From 1695605ab591d754b64ceb558dd137aee8283831 Mon Sep 17 00:00:00 2001
From: Aiz <66974576+Aiz0@users.noreply.github.com>
Date: Wed, 12 Oct 2022 17:02:39 +0000
Subject: [PATCH] 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
---
 src/renderer/components/side-nav/side-nav.vue | 15 ++++++++-------
 src/renderer/components/top-nav/top-nav.vue   | 13 ++++++++-----
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index f859356f7..34b07add9 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/src/renderer/components/side-nav/side-nav.vue
@@ -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
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 7de157cd6..5d0d3a61e 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -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