Remove deprecated @keypress + some accessability improvements (#2697)

* remove deprecated @keypress from top-nav

* remove deprecated @keypress from side-nav

* add role and tabindex to new window button

it could previously not be selected by tabbing over the buttons
This commit is contained in:
Aiz 2022-10-12 17:02:39 +00:00 committed by GitHub
parent b35d7ea5e7
commit 1695605ab5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 12 deletions

View File

@ -38,6 +38,7 @@
tabindex="0"
:title="$t('Channels.Channels')"
@click="navigate('subscribedchannels')"
@keydown.enter.prevent="navigate('subscribedchannels')"
>
<div
class="thumbnailContainer"
@ -63,7 +64,7 @@
tabindex="0"
:title="$t('Trending.Trending')"
@click="navigate('trending')"
@keypress="navigate('trending')"
@keydown.enter.prevent="navigate('trending')"
>
<div
class="thumbnailContainer"
@ -89,7 +90,7 @@
tabindex="0"
:title="$t('Most Popular')"
@click="navigate('popular')"
@keypress="navigate('popular')"
@keydown.enter.prevent="navigate('popular')"
>
<div
class="thumbnailContainer"
@ -115,7 +116,7 @@
tabindex="0"
:title="$t('Playlists')"
@click="navigate('userplaylists')"
@keypress="navigate('userplaylists')"
@keydown.enter.prevent="navigate('userplaylists')"
>
<div
class="thumbnailContainer"
@ -143,7 +144,7 @@
tabindex="0"
:title="$t('History.History')"
@click="navigate('history')"
@keypress="navigate('history')"
@keydown.enter.prevent="navigate('history')"
>
<div
class="thumbnailContainer"
@ -169,7 +170,7 @@
tabindex="0"
:title="$t('Settings.Settings')"
@click="navigate('settings')"
@keypress="navigate('settings')"
@keydown.enter.prevent="navigate('settings')"
>
<div
class="thumbnailContainer"
@ -194,7 +195,7 @@
tabindex="0"
:title="$t('About.About')"
@click="navigate('about')"
@keypress="navigate('about')"
@keydown.enter.prevent="navigate('about')"
>
<div
class="thumbnailContainer"
@ -224,7 +225,7 @@
:title="channel.name"
role="button"
tabindex="0"
@keypress="goToChannel(channel.id)"
@keydown.enter.prevent="goToChannel(channel.id)"
@click="goToChannel(channel.id)"
>
<router-link

View File

@ -10,7 +10,7 @@
role="button"
tabindex="0"
@click="toggleSideNav"
@keypress="toggleSideNav"
@keydown.enter.prevent="toggleSideNav"
/>
<font-awesome-icon
ref="historyArrowBack"
@ -20,7 +20,7 @@
tabindex="0"
:title="backwardText"
@click="historyBack"
@keypress="historyBack"
@keydown.enter.prevent="historyBack"
/>
<font-awesome-icon
ref="historyArrowForward"
@ -30,7 +30,7 @@
tabindex="0"
:title="forwardText"
@click="historyForward"
@keypress="historyForward"
@keydown.enter.prevent="historyForward"
/>
<font-awesome-icon
v-if="!hideSearchBar"
@ -39,13 +39,16 @@
role="button"
tabindex="0"
@click="toggleSearchContainer"
@keypress="toggleSearchContainer"
@keydown.enter.prevent="toggleSearchContainer"
/>
<font-awesome-icon
class="navNewWindowIcon navIcon"
:icon="['fas', 'clone']"
:title="newWindowText"
role="button"
tabindex="0"
@click="createNewWindow"
@keydown.enter.prevent="createNewWindow"
/>
<div
class="logo"
@ -90,7 +93,7 @@
role="button"
tabindex="0"
@click="showFilters = !showFilters"
@keypress="showFilters = !showFilters"
@keydown.enter.prevent="showFilters = !showFilters"
/>
</div>
<ft-search-filters