Improve accessibility of FreeTube input elements

.eslintrc.js

@@ -26,10 +26,11 @@ module.exports = {
     'eslint:recommended',
     'plugin:vue/recommended',
     'standard'
+    // 'plugin:vuejs-accessibility/recommended' // uncomment once issues are fixed
   ],
 
   // https://eslint.org/docs/user-guide/configuring#configuring-plugins
-  plugins: ['vue'],
+  plugins: ['vue', 'vuejs-accessibility'],
 
   rules: {
     'space-before-function-paren': 'off',
@@ -40,6 +41,12 @@ module.exports = {
     'no-undef': 'warn',
     'vue/no-template-key': 'warn',
     'vue/no-useless-template-attributes': 'off',
-    'vue/multi-word-component-names': 'off'
+    'vue/multi-word-component-names': 'off',
+    'vuejs-accessibility/no-onchange': 'off',
+    'vuejs-accessibility/label-has-for': ['error', {
+      required: {
+        some: ['nesting', 'id']
+      }
+    }]
   }
 }

package.json

@@ -101,6 +101,7 @@
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-vue": "^9.7.0",
+    "eslint-plugin-vuejs-accessibility": "^2.0.0",
     "html-webpack-plugin": "^5.3.2",
     "js-yaml": "^4.1.0",
     "json-minimizer-webpack-plugin": "^4.0.0",

src/renderer/App.vue

@@ -20,12 +20,14 @@
           v-if="showUpdatesBanner"
           class="banner"
           :message="updateBannerMessage"
+          role="link"
           @click="handleUpdateBannerClick"
         />
         <ft-notification-banner
           v-if="showBlogBanner"
           class="banner"
           :message="blogBannerMessage"
+          role="link"
           @click="handleNewBlogBannerClick"
         />
       </div>
@@ -46,11 +48,9 @@
 
     <ft-prompt
       v-if="showReleaseNotes"
+      :label="changeLogTitle"
       @click="showReleaseNotes = !showReleaseNotes"
     >
-      <h2>
-        {{ changeLogTitle }}
-      </h2>
       <span
         id="changeLogText"
         v-html="updateChangelog"
@@ -60,6 +60,10 @@
           :label="$t('Download From Site')"
           @click="openDownloadsPage"
         />
+        <ft-button
+          :label="$t('Close')"
+          @click="showReleaseNotes = !showReleaseNotes"
+        />
       </ft-flex-box>
     </ft-prompt>
     <ft-prompt

src/renderer/components/ft-button/ft-button.js

@@ -14,6 +14,10 @@ export default Vue.extend({
     backgroundColor: {
       type: String,
       default: 'var(--accent-color)'
+    },
+    id: {
+      type: String,
+      default: ''
     }
   }
 })

src/renderer/components/ft-button/ft-button.vue

@@ -1,5 +1,6 @@
 <template>
   <button
+    :id="id.length > 0 ? id : null"
     class="btn ripple"
     :style="{
       color: textColor,

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
 export default Vue.extend({
   name: 'FtIconButton',
@@ -59,6 +60,7 @@ export default Vue.extend({
     }
   },
   methods: {
+    sanitizeForHtmlId,
     // used by the share menu
     hideDropdown: function () {
       this.dropdownShown = false

src/renderer/components/ft-icon-button/ft-icon-button.sass

@@ -86,7 +86,7 @@
     cursor: pointer
     transition: background 0.2s ease-out
 
-    &:hover
+    &:hover, &:focus
       background-color: var(--side-nav-hover-color)
       transition: background 0.2s ease-in
 

src/renderer/components/ft-icon-button/ft-icon-button.vue

@@ -12,8 +12,12 @@
         padding: padding + 'px',
         fontSize: size + 'px'
       }"
+      tabindex="0"
+      role="button"
       @click="handleIconClick"
       @mousedown="handleIconMouseDown"
+      @keydown.enter.prevent="handleIconClick"
+      @keydown.space.prevent="handleIconClick"
     />
     <div
       v-show="dropdownShown"
@@ -33,12 +37,20 @@
         <ul
           v-if="dropdownOptions.length > 0"
           class="list"
+          role="listbox"
+          :aria-expanded="dropdownShown"
         >
           <li
             v-for="(option, index) in dropdownOptions"
+            :id="sanitizeForHtmlId(title + '-' + index)"
             :key="index"
+            role="option"
+            aria-selected="false"
+            tabindex="-1"
             :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
-            @click="handleDropdownClick({url: option.value, index: index})"
+            @click="handleDropdownClick({url: option.value, index: index}, $event)"
+            @keydown.enter="handleDropdownClick({url: option.value, index: index}, $event)"
+            @keydown.space="handleDropdownClick({url: option.value, index: index}, $event)"
           >
             {{ option.type === 'divider' ? '' : option.label }}
           </li>

src/renderer/components/ft-input/ft-input.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->
 <template>
   <div
     class="ft-input-component"
@@ -70,6 +71,7 @@
         @mouseenter="searchState.isPointerInList = true"
         @mouseleave="searchState.isPointerInList = false"
       >
+        <!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
         <li
           v-for="(list, index) in visibleDataList"
           :key="index"
@@ -79,6 +81,7 @@
         >
           {{ list }}
         </li>
+        <!-- skipped -->
       </ul>
     </div>
   </div>

src/renderer/components/ft-list-dropdown/ft-list-dropdown.css

@@ -1,11 +1,11 @@
-.dropDown {
+.dropdown {
   position: relative;
   text-align: center;
   text-transform: uppercase;
   margin: 0 5px;
 }
 
-.dropDown ul {
+.dropdown ul {
     display: none;
     position: absolute;
     list-style: none;
@@ -15,19 +15,19 @@
     z-index: 100;
 }
 
-.dropDown ul li {
+.dropdown ul li.buttonOption {
     width: 100%;
     float: none;
     box-sizing: border-box;
 }
 
-.dropDown:hover ul {
-    display: block;
+.dropdown:hover ul, .dropdown:focus-within ul {
+  display: block;
 }
 
-.dropDown ul li a {
-    text-decoration: none;
-    color: inherit;
+.dropdown ul li a {
+  text-decoration: none;
+  color: inherit;
 }
 
 .buttonTitle {
@@ -60,7 +60,7 @@
   transition: background 0.2s ease-out;
 }
 
-.buttonOption:hover {
+.buttonOption:hover, .buttonOption:focus {
   background-color: var(--side-nav-hover-color);
   -moz-transition: background 0.2s ease-in;
   -o-transition: background 0.2s ease-in;

src/renderer/components/ft-list-dropdown/ft-list-dropdown.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-
+import { sanitizeForHtmlId, handleDropdownKeyboardEvent } from '../../helpers/accessibility'
 export default Vue.extend({
   name: 'FtListDropdown',
   props: {
@@ -31,5 +31,26 @@ export default Vue.extend({
     listType: function () {
       return this.$store.getters.getListType
     }
+  },
+  methods: {
+    sanitizeForHtmlId,
+    handleIconKeyPress() {
+      const firstOption = document.getElementById('buttonOption0')
+      if (firstOption) {
+        firstOption.setAttribute('tabIndex', 1)
+        firstOption.focus()
+      }
+    },
+    handleDropdownClick: function(index, event) {
+      if (!handleDropdownKeyboardEvent(event, event?.target)) {
+        return
+      }
+
+      const unspacedTitle = CSS.escape(sanitizeForHtmlId(this.title))
+      const allOptions = document.querySelector(`#${unspacedTitle} + ul`)
+      allOptions.setAttribute('tabindex', '-1')
+      event.target.setAttribute('tabindex', '0')
+      this.$emit('click', this.labelValues[index])
+    }
   }
 })

src/renderer/components/ft-list-dropdown/ft-list-dropdown.vue

@@ -1,6 +1,14 @@
 <template>
-  <div class="dropDown">
-    <div class="buttonTitle">
+  <div class="dropdown">
+    <div
+      :id="sanitizeForHtmlId(title)"
+      class="buttonTitle"
+      tabindex="0"
+      role="listbox"
+      @keydown.space.prevent="handleIconKeyPress($event)"
+      @keydown.enter.prevent="handleIconKeyPress($event)"
+      @keydown.down.prevent="handleIconKeyPress($event)"
+    >
       {{ title }}
       <font-awesome-icon
         class="angleDownIcon"
@@ -10,9 +18,14 @@
     <ul>
       <li
         v-for="(label, index) in labelNames"
+        :id="'buttonOption' + index"
         :key="index"
         class="buttonOption"
-        @click="$emit('click', labelValues[index])"
+        role="option"
+        tabindex="-1"
+        aria-selected="false"
+        @click="handleDropdownClick(index, $event)"
+        @keydown="handleDropdownClick(index, $event)"
       >
         {{ label }}
       </li>

src/renderer/components/ft-notification-banner/ft-notification-banner.css

@@ -14,6 +14,10 @@
   cursor: pointer;
 }
 
+.ftNotificationBanner:focus {
+  box-shadow: 20px 20px 20px rgba(0,0,0,.1);
+}
+
 .message {
   margin-right: 25px;
   cursor: pointer;

src/renderer/components/ft-notification-banner/ft-notification-banner.js

@@ -18,8 +18,7 @@ export default Vue.extend({
       this.$emit('click', response)
     },
 
-    handleClose: function (event) {
-      event.stopPropagation()
+    handleClose: function () {
       this.handleClick(false)
     }
   }

src/renderer/components/ft-notification-banner/ft-notification-banner.vue

@@ -1,7 +1,13 @@
 <template>
   <div
     class="ftNotificationBanner"
+    tabindex="0"
+    role="link"
+    :title="message"
+    :aria-describedby="message"
     @click="handleClick(true)"
+    @keydown.enter.prevent="handleClick(true)"
+    @keydown.space.prevent="handleClick(true)"
   >
     <div
       class="message"
@@ -15,7 +21,10 @@
     <font-awesome-icon
       class="bannerIcon"
       :icon="['fas', 'times']"
-      @click="handleClose"
+      tabindex="0"
+      :title="$t('Close Banner')"
+      @click.stop="handleClose"
+      @keydown.enter.stop.prevent="handleClose"
     />
   </div>
 </template>