From 9a13c33d6b84f4521003ffafa2c98cba6c5662d1 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Tue, 8 Aug 2023 13:15:48 -0700
Subject: [PATCH] Make profiles keyboard accessible

Co-Authored-By: Jason <84899178+jasonhenriquez@users.noreply.github.com>
---
 .eslintrc.js                                      |  3 ++-
 .../ft-list-channel/ft-list-channel.vue           |  2 ++
 .../components/ft-list-video/ft-list-video.vue    |  1 +
 .../ft-profile-bubble/ft-profile-bubble.js        | 11 ++++++++++-
 .../ft-profile-bubble/ft-profile-bubble.vue       |  9 ++++++++-
 .../ft-profile-channel-list.vue                   |  1 +
 .../ft-profile-edit/ft-profile-edit.vue           |  4 ++++
 .../ft-profile-filter-channels-list.vue           |  1 +
 .../ft-profile-selector/ft-profile-selector.vue   | 15 +++++++++++++++
 src/renderer/views/Channel/Channel.vue            |  8 ++++++++
 .../views/Subscriptions/Subscriptions.vue         |  3 +++
 src/renderer/views/Trending/Trending.vue          |  4 ++++
 static/locales/en-US.yaml                         |  1 +
 13 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 8cc33f62ab94a..2729411b7e10b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -47,7 +47,7 @@ module.exports = {
     'plugin:vue/recommended',
     'standard',
     'plugin:jsonc/recommended-with-json',
-    // 'plugin:vuejs-accessibility/recommended' // uncomment once issues are fixed
+    'plugin:vuejs-accessibility/recommended'
   ],
 
   // https://eslint.org/docs/user-guide/configuring#configuring-plugins
@@ -70,6 +70,7 @@ module.exports = {
         some: ['nesting', 'id']
       }
     }],
+    'vuejs-accessibility/no-static-element-interactions': 'off',
     'n/no-callback-literal': 'warn',
     'n/no-path-concat': 'warn',
     'unicorn/better-regex': 'error',
diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.vue b/src/renderer/components/ft-list-channel/ft-list-channel.vue
index cfc85205005e1..cd034322cbae0 100644
--- a/src/renderer/components/ft-list-channel/ft-list-channel.vue
+++ b/src/renderer/components/ft-list-channel/ft-list-channel.vue
@@ -10,10 +10,12 @@
     <div class="channelThumbnail">
       <router-link
         :to="`/channel/${id}`"
+        tabindex="-1"
       >
         <img
           :src="thumbnail"
           class="channelImage"
+          alt=""
         >
       </router-link>
     </div>
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 a6a039d2ae8dd..e3a6303d5649f 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -22,6 +22,7 @@
         <img
           :src="thumbnail"
           class="thumbnailImage"
+          alt=""
         >
       </router-link>
       <div
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js
index 63d9f01392037..410640d145fa8 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js
@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue'
+import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
 export default defineComponent({
   name: 'FtProfileBubble',
@@ -21,12 +22,20 @@ export default defineComponent({
     }
   },
   computed: {
+    sanitizedId: function() {
+      return 'profileBubble' + sanitizeForHtmlId(this.profileId)
+    },
     profileInitial: function () {
       return this?.profileName?.length > 0 ? Array.from(this.profileName)[0].toUpperCase() : ''
     }
   },
   methods: {
-    goToProfile: function () {
+    goToProfile: function (event) {
+      if (event instanceof KeyboardEvent) {
+        if (event.target.getAttribute('role') === 'link' && event.key !== 'Enter') {
+          return
+        }
+      }
       this.$router.push({
         path: `/settings/profile/edit/${this.profileId}`
       })
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
index 6879570dd057d..cfed977e68996 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
@@ -1,7 +1,11 @@
 <template>
   <div
     class="bubblePadding"
+    tabindex="0"
+    :aria-labelledby="sanitizedId"
     @click="goToProfile"
+    @keydown.space.prevent="goToProfile($event)"
+    @keydown.enter.prevent="goToProfile($event)"
   >
     <div
       class="bubble"
@@ -11,7 +15,10 @@
         {{ profileInitial }}
       </div>
     </div>
-    <div class="profileName">
+    <div
+      :id="sanitizedId"
+      class="profileName"
+    >
       {{ profileName }}
     </div>
   </div>
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
index d19827b566e7f..bb77bfcb1751e 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
@@ -15,6 +15,7 @@
           :channel-name="channel.name"
           :channel-thumbnail="channel.thumbnail"
           :show-selected="true"
+          role="button"
           @click="handleChannelClick(index)"
         />
       </ft-flex-box>
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
index 700d54c3da4e6..d0824574f4b6e 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
@@ -19,8 +19,12 @@
           v-for="(color, index) in colorValues"
           :key="index"
           class="colorOption"
+          :title="color + ' ' + $t('Profile.Custom Color')"
           :style="{ background: color }"
+          tabindex="0"
           @click="profileBgColor = color"
+          @keydown.space.prevent="profileBgColor = color"
+          @keydown.enter.prevent="profileBgColor = color"
         />
       </ft-flex-box>
       <ft-flex-box
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
index 9965050a4a1f7..a78fc0cedb466 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
@@ -24,6 +24,7 @@
           :channel-name="channel.name"
           :channel-thumbnail="channel.thumbnail"
           :show-selected="true"
+          role="button"
           @click="handleChannelClick(index)"
         />
       </ft-flex-box>
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
index d1d0ee0c6dc91..f9696ad46a31a 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
@@ -2,9 +2,14 @@
   <div>
     <div
       class="colorOption"
+      :title="$t('Profile.Toggle Profile List')"
       :style="{ background: activeProfile.bgColor, color: activeProfile.textColor }"
+      tabindex="0"
+      role="button"
       @click="toggleProfileList"
       @mousedown="handleIconMouseDown"
+      @keydown.space.prevent="toggleProfileList"
+      @keydown.enter.prevent="toggleProfileList"
     >
       <div
         class="initial"
@@ -20,6 +25,7 @@
       @focusout="handleProfileListFocusOut"
     >
       <h3
+        id="profileListTitle"
         class="profileListTitle"
       >
         {{ $t("Profile.Profile Select") }}
@@ -31,12 +37,20 @@
       />
       <div
         class="profileWrapper"
+        role="listbox"
+        aria-labelledby="profileListTitle"
       >
         <div
           v-for="(profile, index) in profileList"
+          :id="'profile-' + index"
           :key="index"
           class="profile"
+          :aria-labelledby="'profile-' + index + '-name'"
+          aria-selected="false"
+          tabindex="0"
+          role="option"
           @click="setActiveProfile(profile)"
+          @keydown.enter.prevent="setActiveProfile(profile, $event)"
         >
           <div
             class="colorOption"
@@ -49,6 +63,7 @@
             </div>
           </div>
           <p
+            :id="'profile-' + index + '-name'"
             class="profileName"
           >
             {{ profile.name }}
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index 5c5af74c74907..114aaa16ab487 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -85,6 +85,7 @@
             role="tablist"
             :aria-label="$t('Channel.Channel Tabs')"
           >
+            <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
             <div
               v-if="tabInfoValues.includes('videos')"
               id="videosTab"
@@ -99,6 +100,7 @@
             >
               {{ $t("Channel.Videos.Videos").toUpperCase() }}
             </div>
+            <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
             <div
               v-if="tabInfoValues.includes('shorts') && !hideChannelShorts"
               id="shortsTab"
@@ -113,6 +115,7 @@
             >
               {{ $t("Global.Shorts").toUpperCase() }}
             </div>
+            <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
             <div
               v-if="tabInfoValues.includes('live') && !hideLiveStreams"
               id="liveTab"
@@ -127,6 +130,7 @@
             >
               {{ $t("Channel.Live.Live").toUpperCase() }}
             </div>
+            <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
             <div
               v-if="tabInfoValues.includes('releases') && !hideChannelReleases"
               id="releasesTab"
@@ -141,6 +145,7 @@
             >
               {{ $t("Channel.Releases.Releases").toUpperCase() }}
             </div>
+            <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
             <div
               v-if="tabInfoValues.includes('podcasts') && !hideChannelPodcasts"
               id="podcastsTab"
@@ -155,6 +160,7 @@
             >
               {{ $t("Channel.Podcasts.Podcasts").toUpperCase() }}
             </div>
+            <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
             <div
               v-if="tabInfoValues.includes('playlists') && !hideChannelPlaylists"
               id="playlistsTab"
@@ -169,6 +175,7 @@
             >
               {{ $t("Channel.Playlists.Playlists").toUpperCase() }}
             </div>
+            <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
             <div
               v-if="tabInfoValues.includes('community') && !hideChannelCommunity"
               id="communityTab"
@@ -183,6 +190,7 @@
             >
               {{ $t("Channel.Community.Community").toUpperCase() }}
             </div>
+            <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
             <div
               id="aboutTab"
               class="tab"
diff --git a/src/renderer/views/Subscriptions/Subscriptions.vue b/src/renderer/views/Subscriptions/Subscriptions.vue
index 04a798f79db21..ac258357cddf9 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.vue
+++ b/src/renderer/views/Subscriptions/Subscriptions.vue
@@ -7,6 +7,7 @@
         role="tablist"
         :aria-label="$t('Subscriptions.Subscriptions Tabs')"
       >
+        <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
         <div
           v-if="!hideSubscriptionsVideos"
           ref="videos"
@@ -22,6 +23,7 @@
         >
           {{ $t("Global.Videos").toUpperCase() }}
         </div>
+        <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
         <div
           v-if="!hideSubscriptionsShorts"
           ref="shorts"
@@ -37,6 +39,7 @@
         >
           {{ $t("Global.Shorts").toUpperCase() }}
         </div>
+        <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
         <div
           v-if="!hideSubscriptionsLive"
           ref="live"
diff --git a/src/renderer/views/Trending/Trending.vue b/src/renderer/views/Trending/Trending.vue
index 0b2c2710009e7..226f7223d14e3 100644
--- a/src/renderer/views/Trending/Trending.vue
+++ b/src/renderer/views/Trending/Trending.vue
@@ -14,6 +14,7 @@
         role="tablist"
         :aria-label="$t('Trending.Trending Tabs')"
       >
+        <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
         <div
           ref="default"
           class="tab"
@@ -29,6 +30,7 @@
         >
           {{ $t("Trending.Default").toUpperCase() }}
         </div>
+        <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
         <div
           ref="music"
           class="tab"
@@ -44,6 +46,7 @@
         >
           {{ $t("Trending.Music").toUpperCase() }}
         </div>
+        <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
         <div
           ref="gaming"
           class="tab"
@@ -59,6 +62,7 @@
         >
           {{ $t("Trending.Gaming").toUpperCase() }}
         </div>
+        <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
         <div
           ref="movies"
           class="tab"
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 126bd555b68e7..8a2e52fc107f1 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -489,6 +489,7 @@ About:
 
 Profile:
   Profile Settings: Profile Settings
+  Toggle Profile List: Toggle Profile List
   Profile Select: Profile Select
   Profile Filter: Profile Filter
   All Channels: All Channels