From 4d080babcdced7625c63eab86e078b7010e5003e Mon Sep 17 00:00:00 2001
From: Anton Nesterov <anton@nesterov.cc>
Date: Tue, 27 Apr 2021 20:29:28 +0000
Subject: [PATCH] feat: better keyboard navigation (#1104)

Related issue: #375
---
 .../components/ft-button/ft-button.css        |  1 -
 .../ft-list-video/ft-list-video.vue           |  1 +
 src/renderer/components/side-nav/side-nav.vue | 23 +++++++++++++++++++
 src/renderer/components/top-nav/top-nav.vue   | 15 ++++++++++++
 4 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css
index 8da474f1..2edc6266 100644
--- a/src/renderer/components/ft-button/ft-button.css
+++ b/src/renderer/components/ft-button/ft-button.css
@@ -12,7 +12,6 @@
   text-decoration: none;
   transition: 0.3s;
   border-radius: 4px;
-  outline: none;
   white-space: nowrap;
   font-weight: 500;
   vertical-align: middle;
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index 2a79d601..c32eae28 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -13,6 +13,7 @@
     >
       <router-link
         class="thumbnailLink"
+        tabindex="-1"
         :to="{
           path: `/watch/${id}`,
           query: playlistId ? {playlistId} : {}
diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index c016b231..bf55801c 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/src/renderer/components/side-nav/side-nav.vue
@@ -7,6 +7,8 @@
     <div class="inner">
       <div
         class="navOption topNavOption mobileShow"
+        role="button"
+        tabindex="0"
         @click="navigate('subscriptions')"
       >
         <font-awesome-icon
@@ -21,7 +23,10 @@
       <div
         v-if="!hideTrendingVideos"
         class="navOption mobileHidden"
+        role="button"
+        tabindex="0"
         @click="navigate('trending')"
+        @keypress="navigate('trending')"
       >
         <font-awesome-icon
           icon="fire"
@@ -35,7 +40,10 @@
       <div
         v-if="!hidePopularVideos"
         class="navOption mobileHidden"
+        role="button"
+        tabindex="0"
         @click="navigate('popular')"
+        @keypress="navigate('popular')"
       >
         <font-awesome-icon
           icon="users"
@@ -49,7 +57,10 @@
       <div
         v-if="!hidePlaylists"
         class="navOption mobileShow"
+        role="button"
+        tabindex="0"
         @click="navigate('userplaylists')"
+        @keypress="navigate('userplaylists')"
       >
         <font-awesome-icon
           icon="bookmark"
@@ -65,7 +76,10 @@
       />
       <div
         class="navOption mobileShow"
+        role="button"
+        tabindex="0"
         @click="navigate('history')"
+        @keypress="navigate('history')"
       >
         <font-awesome-icon
           icon="history"
@@ -79,7 +93,10 @@
       <hr>
       <div
         class="navOption mobileShow"
+        role="button"
+        tabindex="0"
         @click="navigate('settings')"
+        @keypress="navigate('settings')"
       >
         <font-awesome-icon
           icon="sliders-h"
@@ -92,7 +109,10 @@
       </div>
       <div
         class="navOption mobileHidden"
+        role="button"
+        tabindex="0"
         @click="navigate('about')"
+        @keypress="navigate('about')"
       >
         <font-awesome-icon
           icon="info-circle"
@@ -112,7 +132,10 @@
           :key="index"
           class="navChannel mobileHidden"
           :title="channel.name"
+          role="button"
+          tabindex="0"
           @click="goToChannel(channel.id)"
+          @keypress="goToChannel(channel.id)"
         >
           <div
             class="thumbnailContainer"
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index c5d20170..6079f9f7 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -7,22 +7,34 @@
       <font-awesome-icon
         class="menuIcon navIcon"
         icon="bars"
+        role="button"
+        tabindex="0"
         @click="toggleSideNav"
+        @keypress="toggleSideNav"
       />
       <font-awesome-icon
         class="navBackIcon navIcon"
         icon="arrow-left"
+        role="button"
+        tabindex="0"
         @click="historyBack"
+        @keypress="historyBack"
       />
       <font-awesome-icon
         class="navForwardIcon navIcon"
         icon="arrow-right"
+        role="button"
+        tabindex="0"
         @click="historyForward"
+        @keypress="historyForward"
       />
       <font-awesome-icon
         class="navSearchIcon navIcon"
         icon="search"
+        role="button"
+        tabindex="0"
         @click="toggleSearchContainer"
+        @keypress="toggleSearchContainer"
       />
       <font-awesome-icon
         class="navNewWindowIcon navIcon"
@@ -52,7 +64,10 @@
         <font-awesome-icon
           class="navFilterIcon navIcon"
           icon="filter"
+          role="button"
+          tabindex="0"
           @click="showFilters = !showFilters"
+          @keypress="showFilters = !showFilters"
         />
       </div>
       <ft-search-filters