diff --git a/.eslintrc.js b/.eslintrc.js
index be982e46f7c8b..e97ae69e6cdab 100644
--- a/.eslintrc.js
+++ b/.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']
+      }
+    }]
   }
 }
diff --git a/package.json b/package.json
index 6d7b9345caba8..96c4fea82a240 100644
--- a/package.json
+++ b/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",
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index a1a3f925fb38c..b4d7faa4ef45d 100644
--- a/src/renderer/App.vue
+++ b/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
diff --git a/src/renderer/components/ft-button/ft-button.js b/src/renderer/components/ft-button/ft-button.js
index afb52938cfc95..74eb0ba844aa3 100644
--- a/src/renderer/components/ft-button/ft-button.js
+++ b/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: ''
     }
   }
 })
diff --git a/src/renderer/components/ft-button/ft-button.vue b/src/renderer/components/ft-button/ft-button.vue
index 24cbfdb617bd4..88a340248188e 100644
--- a/src/renderer/components/ft-button/ft-button.vue
+++ b/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,
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index 4c220abcd85be..bbb7d9a90d6f3 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/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
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.sass b/src/renderer/components/ft-icon-button/ft-icon-button.sass
index c8ae1b8784d12..ab32c450e1d1a 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.sass
+++ b/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
 
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index fe1479f92d5b8..27f8c26e20d6b 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/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>
diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index 20fd3c648b3a8..bdc007b5dfc47 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/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>
diff --git a/src/renderer/components/ft-list-dropdown/ft-list-dropdown.css b/src/renderer/components/ft-list-dropdown/ft-list-dropdown.css
index 751dd7517c827..e52594083dfbf 100644
--- a/src/renderer/components/ft-list-dropdown/ft-list-dropdown.css
+++ b/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;
diff --git a/src/renderer/components/ft-list-dropdown/ft-list-dropdown.js b/src/renderer/components/ft-list-dropdown/ft-list-dropdown.js
index 1f186014afc9e..b53ca8941237e 100644
--- a/src/renderer/components/ft-list-dropdown/ft-list-dropdown.js
+++ b/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])
+    }
   }
 })
diff --git a/src/renderer/components/ft-list-dropdown/ft-list-dropdown.vue b/src/renderer/components/ft-list-dropdown/ft-list-dropdown.vue
index 383880d41e7e5..814fccec74fc0 100644
--- a/src/renderer/components/ft-list-dropdown/ft-list-dropdown.vue
+++ b/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>
diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.css b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
index 66f4da73cf232..fc4d165581095 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.css
+++ b/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;
diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.js b/src/renderer/components/ft-notification-banner/ft-notification-banner.js
index 086732e0ad9dd..f5333c67bc99b 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.js
+++ b/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)
     }
   }
diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.vue b/src/renderer/components/ft-notification-banner/ft-notification-banner.vue
index a66c2734fa726..02feed7602a2c 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.vue
+++ b/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>
diff --git a/src/renderer/components/ft-prompt/ft-prompt.js b/src/renderer/components/ft-prompt/ft-prompt.js
index acaa116518671..309f7d015dbd2 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.js
+++ b/src/renderer/components/ft-prompt/ft-prompt.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
+import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
 export default Vue.extend({
   name: 'FtPrompt',
@@ -28,10 +29,64 @@ export default Vue.extend({
       default: () => { return [] }
     }
   },
+  data: function () {
+    return {
+      promptButtons: []
+    }
+  },
+  computed: {
+    sanitizedLabel: function() {
+      return sanitizeForHtmlId(this.label)
+    }
+  },
+  beforeDestroy: function () {
+    document.removeEventListener('keydown', this.closeEventFunction, true)
+  },
+  mounted: function () {
+    document.addEventListener('keydown', this.closeEventFunction, true)
+    document.querySelector('.prompt').addEventListener('keydown', this.arrowKeys, true)
+    this.promptButtons = Array.from(
+      document.querySelector('.prompt .promptCard .ft-flex-box').childNodes
+    ).filter((e) => {
+      return e.id && e.id.startsWith('prompt')
+    })
+    this.focusItem(0)
+  },
   methods: {
+    hide: function() {
+      this.$emit('click', null)
+    },
     handleHide: function (event) {
-      if (event.target.className === 'prompt') {
-        this.$emit('click', null)
+      if (event.target.getAttribute('role') === 'button' || event.target.className === 'prompt') {
+        this.hide()
+      }
+    },
+    focusItem: function (value) {
+      let index = value
+      if (index < 0) {
+        index = this.promptButtons.length
+      } else if (index >= this.promptButtons.length) {
+        index = 0
+      }
+      if (index >= 0 && index < this.promptButtons.length) {
+        this.promptButtons[index].focus({ focusVisible: true })
+      }
+    },
+    // close on escape key and unfocus
+    closeEventFunction: function(event) {
+      if (event.type === 'keydown' && event.key === 'Escape') {
+        event.preventDefault()
+        this.hide()
+      }
+    },
+    arrowKeys: function(e) {
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.preventDefault()
+        const currentIndex = this.promptButtons.findIndex((cur) => {
+          return cur === e.target
+        })
+        const direction = (e.key === 'ArrowLeft') ? -1 : 1
+        this.focusItem(parseInt(currentIndex) + direction)
       }
     }
   }
diff --git a/src/renderer/components/ft-prompt/ft-prompt.vue b/src/renderer/components/ft-prompt/ft-prompt.vue
index da993727fc595..ba9e2272e3ee8 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.vue
+++ b/src/renderer/components/ft-prompt/ft-prompt.vue
@@ -1,11 +1,19 @@
 <template>
   <div
     class="prompt"
+    tabindex="-1"
     @click="handleHide"
+    @keydown.enter="handleHide"
   >
-    <ft-card class="promptCard">
+    <ft-card
+      class="promptCard"
+      :aria-labelledby="('dialog-' + sanitizedLabel)"
+    >
       <slot>
-        <h2 class="center">
+        <h2
+          :id="'dialog-' + sanitizedLabel"
+          class="center"
+        >
           {{ label }}
         </h2>
         <p
@@ -20,10 +28,19 @@
         <ft-flex-box>
           <ft-button
             v-for="(option, index) in optionNames"
+            :id="'prompt-' + sanitizedLabel + '-' + index"
             :key="index"
             :label="option"
             @click="$emit('click', optionValues[index])"
           />
+          <ft-button
+            :id="'prompt-' + sanitizedLabel + '-close'"
+            :label="$t('Close')"
+            tabindex="0"
+            text-color="'var(--accent-color)'"
+            background-color="'var(--text-with-accent-color)'"
+            @click="hide"
+          />
         </ft-flex-box>
       </slot>
     </ft-card>
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index a7a404c9d2d58..5387cdbbc2cd4 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -88,7 +88,6 @@
   font-size: 18px;
   font-weight: normal;
   position: absolute;
-  pointer-events: none;
   left: 0;
   top: 10px;
   transition: 0.2s ease all;
diff --git a/src/renderer/components/ft-select/ft-select.js b/src/renderer/components/ft-select/ft-select.js
index 8c4ab6cd7e790..f8cab906fb71b 100644
--- a/src/renderer/components/ft-select/ft-select.js
+++ b/src/renderer/components/ft-select/ft-select.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
+import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
 export default Vue.extend({
   name: 'FtSelect',
@@ -31,5 +32,10 @@ export default Vue.extend({
       type: Boolean,
       default: false
     }
+  },
+  computed: {
+    sanitizedPlaceholder: function() {
+      return sanitizeForHtmlId(this.placeholder)
+    }
   }
 })
diff --git a/src/renderer/components/ft-select/ft-select.vue b/src/renderer/components/ft-select/ft-select.vue
index 660cb6c866874..1d172cb3b67f3 100644
--- a/src/renderer/components/ft-select/ft-select.vue
+++ b/src/renderer/components/ft-select/ft-select.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="select">
     <select
+      :id="sanitizedPlaceholder"
       class="select-text"
       :class="{disabled: disabled}"
       :value="value"
+      :name="sanitizedPlaceholder"
       :disabled="disabled"
       @change="$emit('change', $event.target.value)"
     >
@@ -23,6 +25,7 @@
     <span class="select-bar" />
     <label
       class="select-label"
+      :for="sanitizedPlaceholder"
       :hidden="disabled"
     >
       {{ placeholder }}
diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
index 6b38d9ec398b2..13d39bcd89c93 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.vue
+++ b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -19,6 +19,7 @@
     <div class="shareLinks">
       <div class="header">
         <img
+          id="youtubeShareImage"
           class="youtubeLogo"
           src="~../../assets/img/yt_logo_mono_dark.png"
           alt="YouTube"
@@ -30,6 +31,7 @@
       <div class="buttons">
         <ft-button
           class="action"
+          aria-describedby="youtubeShareImage"
           @click="copyYoutube()"
         >
           <font-awesome-icon :icon="['fas', 'copy']" />
@@ -37,6 +39,7 @@
         </ft-button>
         <ft-button
           class="action"
+          aria-describedby="youtubeShareImage"
           @click="openYoutube()"
         >
           <font-awesome-icon :icon="['fas', 'globe']" />
@@ -45,6 +48,7 @@
         <ft-button
           v-if="isVideo"
           class="action"
+          aria-describedby="youtubeShareImage"
           background-color="var(--accent-color-active)"
           @click="copyYoutubeEmbed()"
         >
@@ -54,6 +58,7 @@
         <ft-button
           v-if="isVideo"
           class="action"
+          aria-describedby="youtubeShareImage"
           background-color="var(--accent-color-active)"
           @click="openYoutubeEmbed()"
         >
@@ -64,12 +69,16 @@
 
       <div class="divider" />
 
-      <div class="header invidious">
+      <div
+        id="invidiousShare"
+        class="header invidious"
+      >
         <span class="invidiousLogo" />Invidious
       </div>
 
       <div class="buttons">
         <ft-button
+          aria-describedby="invidiousShare"
           class="action"
           @click="copyInvidious()"
         >
@@ -77,6 +86,7 @@
           {{ $t("Share.Copy Link") }}
         </ft-button>
         <ft-button
+          aria-describedby="invidiousShare"
           class="action"
           @click="openInvidious()"
         >
@@ -85,6 +95,7 @@
         </ft-button>
         <ft-button
           v-if="isVideo"
+          aria-describedby="invidiousShare"
           class="action"
           background-color="var(--accent-color-active)"
           @click="copyInvidiousEmbed()"
@@ -94,6 +105,7 @@
         </ft-button>
         <ft-button
           v-if="isVideo"
+          aria-describedby="invidiousShare"
           class="action"
           background-color="var(--accent-color-active)"
           @click="openInvidiousEmbed()"
diff --git a/src/renderer/components/ft-toast/ft-toast.vue b/src/renderer/components/ft-toast/ft-toast.vue
index efcd91a8eee04..571470556d8c3 100644
--- a/src/renderer/components/ft-toast/ft-toast.vue
+++ b/src/renderer/components/ft-toast/ft-toast.vue
@@ -5,7 +5,11 @@
       :key="'toast-' + index"
       class="toast"
       :class="{ closed: !toast.isOpen, open: toast.isOpen }"
+      tabindex="0"
+      role="status"
       @click="performAction(index)"
+      @keydown.enter.prevent="performAction(index)"
+      @keydown.space.prevent="performAction(index)"
     >
       <p class="message">
         {{ toast.message }}
diff --git a/src/renderer/helpers/accessibility.js b/src/renderer/helpers/accessibility.js
new file mode 100644
index 0000000000000..2ff2432bef20a
--- /dev/null
+++ b/src/renderer/helpers/accessibility.js
@@ -0,0 +1,44 @@
+export function handleDropdownKeyboardEvent(event, target, afterElement) {
+  if (!event || !(event instanceof KeyboardEvent)) {
+    return true
+  }
+
+  let nextElement = null
+  if (event.key === 'Tab') {
+    if (afterElement) {
+      afterElement.tabindex = 0
+      afterElement.focus()
+    }
+    return false
+  } if (event.key === 'ArrowUp') {
+    nextElement = target.previousElementSibling ?? target.parentNode.lastElementChild
+
+    if (nextElement.classList.contains('listItemDivider')) {
+      nextElement = nextElement.previousElementSibling
+    }
+  } else if (event.key === 'ArrowDown') {
+    nextElement = target.nextElementSibling ?? target.parentNode.firstElementChild
+
+    if (nextElement.classList.contains('listItemDivider')) {
+      nextElement = nextElement.nextElementSibling
+    }
+  } else if (event.key === 'Home') {
+    nextElement = target.parentNode.firstElementChild
+  } else if (event.key === 'End') {
+    nextElement = target.parentNode.lastElementChild
+  }
+
+  event.preventDefault()
+
+  if (nextElement) {
+    target.setAttribute('tabindex', '-1')
+    nextElement.setAttribute('tabindex', '0')
+    nextElement.focus()
+  }
+
+  return event.key === 'Enter' || event.key === ' '
+}
+
+export function sanitizeForHtmlId(attribute) {
+  return attribute.replace(/\s+/g, '')
+}
diff --git a/yarn.lock b/yarn.lock
index 8bc8e9cf519d1..4ea3e938ffda4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1925,6 +1925,13 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-query@>=5.0.0:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
+  integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
+  dependencies:
+    deep-equal "^2.0.5"
+
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -3137,6 +3144,27 @@ decompress-response@^6.0.0:
   dependencies:
     mimic-response "^3.1.0"
 
+deep-equal@^2.0.5:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.1.0.tgz#5ba60402cf44ab92c2c07f3f3312c3d857a0e1dd"
+  integrity sha512-2pxgvWu3Alv1PoWEyVg7HS8YhGlUFUV7N5oOvfL6d+7xAmLSemMwv/c8Zv/i9KFzxV5Kt5CAvQc70fLwVuf4UA==
+  dependencies:
+    call-bind "^1.0.2"
+    es-get-iterator "^1.1.2"
+    get-intrinsic "^1.1.3"
+    is-arguments "^1.1.1"
+    is-date-object "^1.0.5"
+    is-regex "^1.1.4"
+    isarray "^2.0.5"
+    object-is "^1.1.5"
+    object-keys "^1.1.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.4.3"
+    side-channel "^1.0.4"
+    which-boxed-primitive "^1.0.2"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.8"
+
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
@@ -3519,6 +3547,11 @@ elliptic@^6.5.3:
     minimalistic-assert "^1.0.1"
     minimalistic-crypto-utils "^1.0.1"
 
+emoji-regex@^10.0.0:
+  version "10.2.1"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.2.1.tgz#a41c330d957191efd3d9dfe6e1e8e1e9ab048b3f"
+  integrity sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -3642,6 +3675,20 @@ es-abstract@^1.20.0:
     string.prototype.trimstart "^1.0.5"
     unbox-primitive "^1.0.2"
 
+es-get-iterator@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.2.tgz#9234c54aba713486d7ebde0220864af5e2b283f7"
+  integrity sha512-+DTO8GYwbMCwbywjimwZMHp8AuYXOS2JZFWoi2AlPOS3ebnII9w/NLpNZtA7A0YLaVDw+O7KFCeoIV7OPvM7hQ==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.0"
+    has-symbols "^1.0.1"
+    is-arguments "^1.1.0"
+    is-map "^2.0.2"
+    is-set "^2.0.2"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-module-lexer@^0.9.0:
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
@@ -3788,6 +3835,15 @@ eslint-plugin-vue@^9.7.0:
     vue-eslint-parser "^9.0.1"
     xml-name-validator "^4.0.0"
 
+eslint-plugin-vuejs-accessibility@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vuejs-accessibility/-/eslint-plugin-vuejs-accessibility-2.0.0.tgz#29d1e96cce4d73a0a74bb6fb65b05e3ba4e8af1f"
+  integrity sha512-mjbXnncDT9+5K+/QXXhOVWhEU6OOJck/JNlC6tewo3R+Kzsbaecyq3ylN1NqmyKo78vsgun34JLd+vGdxSPFWQ==
+  dependencies:
+    aria-query ">=5.0.0"
+    emoji-regex "^10.0.0"
+    vue-eslint-parser "^9.0.1"
+
 eslint-scope@5.1.1, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -4463,6 +4519,13 @@ globby@^13.1.1:
     merge2 "^1.4.1"
     slash "^4.0.0"
 
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
 got@^11.8.5:
   version "11.8.5"
   resolved "https://registry.yarnpkg.com/got/-/got-11.8.5.tgz#ce77d045136de56e8f024bebb82ea349bc730046"
@@ -4924,7 +4987,7 @@ ipaddr.js@^2.0.1:
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz#eca256a7a877e917aeb368b0a7497ddf42ef81c0"
   integrity sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==
 
-is-arguments@^1.0.4:
+is-arguments@^1.0.4, is-arguments@^1.1.0, is-arguments@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
   integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
@@ -4995,7 +5058,7 @@ is-core-module@^2.9.0:
   dependencies:
     has "^1.0.3"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
   integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
@@ -5036,6 +5099,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-map@^2.0.1, is-map@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
+  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
+
 is-negative-zero@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
@@ -5078,6 +5146,11 @@ is-regex@^1.1.4:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-set@^2.0.1, is-set@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
+  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
+
 is-shared-array-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
@@ -5104,6 +5177,17 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.2"
 
+is-typed-array@^1.1.10:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.10.tgz#36a5b5cb4189b575d1a3e4b08536bfb485801e3f"
+  integrity sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==
+  dependencies:
+    available-typed-arrays "^1.0.5"
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-tostringtag "^1.0.0"
+
 is-typed-array@^1.1.3, is-typed-array@^1.1.9:
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.9.tgz#246d77d2871e7d9f5aeb1d54b9f52c71329ece67"
@@ -5120,6 +5204,11 @@ is-typedarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
 is-weakref@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
@@ -5127,6 +5216,14 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-weakset@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.2.tgz#4569d67a747a1ce5a994dfd4ef6dcea76e7c0a1d"
+  integrity sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
 is-wsl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
@@ -5134,6 +5231,11 @@ is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -6008,6 +6110,14 @@ object-inspect@^1.12.2:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
   integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
 
+object-is@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
+  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
 object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -8412,6 +8522,16 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-typed-array@^1.1.2:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.8.tgz#0cfd53401a6f334d90ed1125754a42ed663eb01f"
@@ -8424,6 +8544,18 @@ which-typed-array@^1.1.2:
     has-tostringtag "^1.0.0"
     is-typed-array "^1.1.9"
 
+which-typed-array@^1.1.8:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6"
+  integrity sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==
+  dependencies:
+    available-typed-arrays "^1.0.5"
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-tostringtag "^1.0.0"
+    is-typed-array "^1.1.10"
+
 which@^1.2.9:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"