Improve accessibility of FreeTube input elements

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

@@ -24,6 +24,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-prompt/ft-prompt.js

@@ -30,14 +30,21 @@ export default Vue.extend({
     }
   },
   mounted: function () {
-    document.querySelector('.prompt button').focus({ focusVisible: true })
+    this.focusItem(0)
   },
   methods: {
     removeWhitespace,
+    hide: function() {
+      this.$emit('click', null)
+    },
     handleHide: function (event) {
       if (event.target.getAttribute('role') === 'button' || event.target.className === 'prompt') {
-        this.$emit('click', null)
+        this.hide()
       }
+    },
+    focusItem: function (index) {
+      document.querySelector(`#prompt-${removeWhitespace(this.label)}-${index}`)
+        .focus({ focusVisible: true })
     }
   }
 })

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

@@ -28,9 +28,19 @@
         <ft-flex-box>
           <ft-button
             v-for="(option, index) in optionNames"
+            :id="'prompt-' + removeWhitespace(label) + '-' + index"
             :key="index"
             :label="option"
             @click="$emit('click', optionValues[index])"
+            @keydown.left.prevent="focusItem(index-1)"
+            @keydown.right.prevent="focusItem(index+1)"
+          />
+          <ft-button
+            :label="'Close'"
+            tabindex="0"
+            text-color="'var(--accent-color)'"
+            background-color="'var(--text-with-accent-color)'"
+            @click="hide"
           />
         </ft-flex-box>
       </slot>