feat: better keyboard navigation (#1104)

Related issue: #375

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;

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} : {}

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"

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