From a1951e2ab9115fbf179cd56afee8b4e3b71b6d5c Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 28 Apr 2022 11:44:29 +0300
Subject: [PATCH 01/10] Focus the filter sidebar when tabbing from
 FiltersButton

---
 src/components/VFilters/VSearchGridFilter.vue | 20 +++++------
 src/components/VHeader/VFilterButton.vue      |  1 +
 src/components/VHeader/VHeaderFilter.vue      | 36 +++++++++++++++++--
 3 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/src/components/VFilters/VSearchGridFilter.vue b/src/components/VFilters/VSearchGridFilter.vue
index 57a47e59dd..6499eb1331 100644
--- a/src/components/VFilters/VSearchGridFilter.vue
+++ b/src/components/VFilters/VSearchGridFilter.vue
@@ -8,15 +8,15 @@
       <h4 id="filters-heading" class="text-sr font-semibold py-2 uppercase">
         {{ $t('filter-list.filter-by') }}
       </h4>
-      <button
+      <VButton
         v-if="isAnyFilterApplied"
         id="clear-filter-button"
-        type="button"
-        class="text-sm py-2 px-4 text-pink hover:border-dark-gray"
+        variant="plain"
+        class="text-sm font-semibold py-2 px-4 text-pink hover:ring hover:ring-pink"
         @click="clearFilters"
       >
         {{ $t('filter-list.clear') }}
-      </button>
+      </VButton>
     </div>
     <form class="filters-form">
       <VFilterChecklist
@@ -28,14 +28,10 @@
         @toggle-filter="toggleFilter"
       />
     </form>
-    <footer v-if="isAnyFilterApplied" class="flex justify-between">
-      <button
-        class="text-sm py-4 px-6 lowercase rounded bg-trans-blue text-white md:hidden hover:bg-trans-blue-action"
-        type="button"
-        @click="$emit('close')"
-      >
+    <footer v-if="isAnyFilterApplied" class="md:hidden flex justify-between">
+      <VButton variant="primary" @click="$emit('close')">
         {{ $t('filter-list.show') }}
-      </button>
+      </VButton>
     </footer>
   </section>
 </template>
@@ -54,10 +50,12 @@ import { useSearchStore } from '~/stores/search'
 import { areQueriesEqual } from '~/utils/search-query-transform'
 
 import VFilterChecklist from '~/components/VFilters/VFilterChecklist.vue'
+import VButton from '~/components/VButton.vue'
 
 export default {
   name: 'VSearchGridFilter',
   components: {
+    VButton,
     VFilterChecklist,
   },
   setup() {
diff --git a/src/components/VHeader/VFilterButton.vue b/src/components/VHeader/VFilterButton.vue
index 637bd8c1ee..8861a3a7e8 100644
--- a/src/components/VHeader/VFilterButton.vue
+++ b/src/components/VHeader/VFilterButton.vue
@@ -12,6 +12,7 @@
     aria-controls="filters"
     :aria-label="mdMinLabel"
     @click="$emit('toggle')"
+    @keydown="$emit('keydown', $event)"
   >
     <VIcon
       :class="filtersAreApplied ? 'hidden' : 'block'"
diff --git a/src/components/VHeader/VHeaderFilter.vue b/src/components/VHeader/VHeaderFilter.vue
index 7f037ad18f..a239a68415 100644
--- a/src/components/VHeader/VHeaderFilter.vue
+++ b/src/components/VHeader/VHeaderFilter.vue
@@ -10,6 +10,7 @@
       :pressed="visibleRef"
       v-bind="triggerA11yProps"
       @toggle="onTriggerClick"
+      @keydown="onKeyDown"
     />
     <Component :is="filterComponent" v-bind="options" @close="onTriggerClick">
       <VSearchGridFilter @close="onTriggerClick" />
@@ -31,6 +32,9 @@ import {
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
 
+import { keycodes } from '~/constants/key-codes'
+import { Focus, focusIn } from '~/utils/focus-management'
+
 import VTeleport from '~/components/VTeleport/VTeleport.vue'
 import VFilterButton from '~/components/VHeader/VFilterButton.vue'
 import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
@@ -106,20 +110,47 @@ export default {
       }
     }
 
+    /**
+     * Focus the first element in the sidebar when navigating from the VFilterButton
+     * using keyboard `Tab` key.
+     * @param { KeyboardEvent } event
+     */
+    const onKeyDown = (event) => {
+      if (
+        isMinScreenMd.value &&
+        event.key === keycodes.Tab &&
+        filterSidebar.isVisible.value
+      ) {
+        // Prevent over-tabbing to the element after the target one
+        event.preventDefault()
+        // Cannot use refs when using portals (for sidebar)
+        focusIn(document.querySelector('#filters'), Focus.First)
+      }
+    }
+
+    /**
+     * @typedef {{mode?: string, 'trigger-element'?: import('@nuxtjs/composition-api').ComputedRef<HTMLElement|null>, hide?: close, visible: import('@nuxtjs/composition-api').Ref<boolean>, 'aria-label'?: string}} FilterOptions
+     */
+
+    /** @type {FilterOptions} */
     const mobileOptions = {
       visible: visibleRef,
-      'trigger-element': computed(() => nodeRef?.value?.firstChild),
+      'trigger-element':
+        /** @type {import('@nuxtjs/composition-api').ComputedRef<HTMLElement|null>}*/ (
+          computed(() => nodeRef?.value?.firstChild)
+        ),
       hide: close,
       'aria-label': i18n.t('header.filter-button.simple').toString(),
       mode: 'mobile',
     }
 
+    /** @type {FilterOptions} */
     const desktopOptions = {
       to: 'sidebar',
       visible: visibleRef,
     }
     /**
-     * @type { import('@nuxtjs/composition-api').Ref<{'trigger-element'?: import('@nuxtjs/composition-api').ComputedRef<HTMLElement|null>, hide?: () => void, visible: import('@nuxtjs/composition-api').Ref<boolean>, 'aria-label'?: string, to?: string, mode?: string, hideOnClickOutside?: boolean }> }
+     * @type {Ref<FilterOptions>}
      */
     const options = ref(mobileOptions)
     onMounted(() => {
@@ -151,6 +182,7 @@ export default {
       open,
       close,
       onTriggerClick,
+      onKeyDown,
       triggerA11yProps,
       isMinScreenMd,
       options,

From b71ad839ee4e2788849a82aad1a7ab2595b04881 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 6 May 2022 09:11:50 +0300
Subject: [PATCH 02/10] Move focus from Filters button to the filters sidebar
 on 'Tab' press

---
 src/components/VFilters/VFilterChecklist.vue  | 85 ++++++++++++-------
 src/components/VFilters/VSearchGridFilter.vue | 62 +++++++++++---
 src/constants/filters.ts                      |  1 +
 src/utils/focus-management.ts                 |  2 +-
 4 files changed, 106 insertions(+), 44 deletions(-)

diff --git a/src/components/VFilters/VFilterChecklist.vue b/src/components/VFilters/VFilterChecklist.vue
index 5153580ef6..066dc2f60c 100644
--- a/src/components/VFilters/VFilterChecklist.vue
+++ b/src/components/VFilters/VFilterChecklist.vue
@@ -24,7 +24,7 @@
       <!-- License explanation -->
       <VPopover
         v-if="filterType === 'licenses'"
-        :label="$t('browse-page.aria.license-explanation')"
+        :label="$t('browse-page.aria.license-explanation').toString()"
       >
         <template #trigger="{ a11yProps }">
           <VButton
@@ -55,8 +55,13 @@
   </fieldset>
 </template>
 
-<script>
+<script lang="ts">
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
+
 import { useSearchStore } from '~/stores/search'
+import { useI18n } from '~/composables/use-i18n'
+import type { NonMatureFilterCategory, FilterItem } from '~/constants/filters'
+import { defineEvent } from '~/types/emits'
 
 import VLicenseExplanation from '~/components/VFilters/VLicenseExplanation.vue'
 import VCheckbox from '~/components/VCheckbox/VCheckbox.vue'
@@ -69,7 +74,12 @@ import VPopover from '~/components/VPopover/VPopover.vue'
 import helpIcon from '~/assets/icons/help.svg'
 import closeSmallIcon from '~/assets/icons/close-small.svg'
 
-export default {
+type toggleFilterPayload = {
+  filterType: NonMatureFilterCategory
+  code: string
+}
+
+export default defineComponent({
   name: 'FilterCheckList',
   components: {
     VCheckbox,
@@ -81,41 +91,52 @@ export default {
     VPopover,
   },
   props: {
-    options: { type: Array, required: false },
+    options: {
+      type: Array as PropType<FilterItem[]>,
+      required: false,
+    },
     title: { type: String },
-    filterType: { type: String, required: true },
+    filterType: {
+      type: String as PropType<NonMatureFilterCategory>,
+      required: true,
+    },
     disabled: { type: Boolean, default: false },
   },
-  data() {
-    return {
-      icons: { help: helpIcon, closeSmall: closeSmallIcon },
-    }
+  emits: {
+    'toggle-filter': defineEvent<[toggleFilterPayload]>(),
   },
-  computed: {
-    itemName() {
-      return this.filterType === 'searchBy'
-        ? this.$t('filters.search-by.title')
-        : this.title
-    },
-  },
-  methods: {
-    itemLabel(item) {
-      return ['audioProviders', 'imageProviders'].includes(this.filterType)
+  setup(props, { emit }) {
+    const i18n = useI18n()
+    const itemName = computed(() => {
+      return props.filterType === 'searchBy'
+        ? i18n.t('filters.search-by.title').toString()
+        : props.title
+    })
+
+    const itemLabel = (item: FilterItem) =>
+      ['audioProviders', 'imageProviders'].includes(props.filterType)
         ? item.name
-        : this.$t(item.name)
-    },
-    onValueChange({ value }) {
-      this.$emit('toggle-filter', {
+        : i18n.t(item.name).toString()
+
+    const onValueChange = ({ value }: { value: string }) => {
+      emit('toggle-filter', {
         code: value,
-        filterType: this.filterType,
+        filterType: props.filterType,
       })
-    },
-    isDisabled(item) {
-      return (
-        useSearchStore().isFilterDisabled(item, this.filterType) ??
-        this.disabled
-      )
-    },
+    }
+
+    const isDisabled = (item: FilterItem) =>
+      useSearchStore().isFilterDisabled(item, props.filterType) ??
+      props.disabled
+    const icons = { help: helpIcon, closeSmall: closeSmallIcon }
+
+    return {
+      icons,
+      itemName,
+      isDisabled,
+      itemLabel,
+      onValueChange,
+    }
   },
-}
+})
 </script>
diff --git a/src/components/VFilters/VSearchGridFilter.vue b/src/components/VFilters/VSearchGridFilter.vue
index 6499eb1331..794cf89a19 100644
--- a/src/components/VFilters/VSearchGridFilter.vue
+++ b/src/components/VFilters/VSearchGridFilter.vue
@@ -18,7 +18,7 @@
         {{ $t('filter-list.clear') }}
       </VButton>
     </div>
-    <form class="filters-form">
+    <form ref="filtersFormRef" class="filters-form" @keydown="handleKeyDown">
       <VFilterChecklist
         v-for="filterType in filterTypes"
         :key="filterType"
@@ -36,9 +36,12 @@
   </section>
 </template>
 
-<script>
+<script lang="ts">
 import {
   computed,
+  defineComponent,
+  onMounted,
+  ref,
   useContext,
   useRoute,
   useRouter,
@@ -49,10 +52,14 @@ import { kebab } from 'case'
 import { useSearchStore } from '~/stores/search'
 import { areQueriesEqual } from '~/utils/search-query-transform'
 
+import type { NonMatureFilterCategory } from '~/constants/filters'
+import { keycodes } from '~/constants/key-codes'
+import { Focus, focusIn, getFocusableElements } from '~/utils/focus-management'
+
 import VFilterChecklist from '~/components/VFilters/VFilterChecklist.vue'
 import VButton from '~/components/VButton.vue'
 
-export default {
+export default defineComponent({
   name: 'VSearchGridFilter',
   components: {
     VButton,
@@ -65,15 +72,17 @@ export default {
     const route = useRoute()
     const router = useRouter()
 
+    const filtersFormRef = ref<HTMLFormElement>(null)
+
     const isAnyFilterApplied = computed(() => searchStore.isAnyFilterApplied)
     const filters = computed(() => searchStore.searchFilters)
-    const filterTypes = computed(() => Object.keys(filters.value))
-    const filterTypeTitle = (filterType) => {
-      if (filterType === 'searchBy') {
-        return ''
-      }
-      return i18n.t(`filters.${kebab(filterType)}.title`)
-    }
+    const filterTypes = computed(
+      () => Object.keys(filters.value) as NonMatureFilterCategory[]
+    )
+    const filterTypeTitle = (filterType: string) =>
+      filterType === 'searchBy'
+        ? ''
+        : i18n.t(`filters.${kebab(filterType)}.title`).toString()
 
     /**
      * This watcher fires even when the queries are equal. We update the path only
@@ -96,16 +105,47 @@ export default {
       }
     )
 
+    /**
+     * Find the last focusable element in VSearchGridFilter to add a 'Tab' keydown event
+     * handler to it.
+     * We could actually hard-code this because 'searchBy' is always the last now.
+     */
+    const lastFocusableElement = ref<HTMLElement>(null)
+    const updateLastFocusable = () => {
+      const focusable = getFocusableElements(filtersFormRef.value)
+      lastFocusableElement.value = focusable[focusable.length - 1]
+    }
+    onMounted(() => {
+      updateLastFocusable()
+    })
+    watch(filterTypes, () => updateLastFocusable())
+    /**
+     * When the user presses 'Tab' on the last focusable element, we need to
+     * move focus to the first focusable element in main.
+     * @param event
+     */
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === keycodes.Tab &&
+        lastFocusableElement.value === event.target
+      ) {
+        event.preventDefault()
+        focusIn(document.querySelector('main'), Focus.First)
+      }
+    }
+
     return {
+      filtersFormRef,
       isAnyFilterApplied,
       filters,
       filterTypes,
       filterTypeTitle,
       clearFilters: searchStore.clearFilters,
       toggleFilter: searchStore.toggleFilter,
+      handleKeyDown,
     }
   },
-}
+})
 </script>
 <style scoped>
 .filters {
diff --git a/src/constants/filters.ts b/src/constants/filters.ts
index 9c21da01a5..2c63a31c1c 100644
--- a/src/constants/filters.ts
+++ b/src/constants/filters.ts
@@ -28,6 +28,7 @@ export interface Filters {
   mature: FilterItem[]
 }
 export type FilterCategory = keyof Filters
+export type NonMatureFilterCategory = Exclude<FilterCategory, 'mature'>
 
 /**
  * List of filters available for each search type. The order of the keys
diff --git a/src/utils/focus-management.ts b/src/utils/focus-management.ts
index 265a9c5df8..c68c40efea 100644
--- a/src/utils/focus-management.ts
+++ b/src/utils/focus-management.ts
@@ -64,7 +64,7 @@ export const FocusResult = Object.freeze({
   Underflow: 'Underflow' as const,
 })
 
-export const Direction = Object.freeze({ Next: -1, Previous: 1 })
+export const Direction = Object.freeze({ Next: 1, Previous: -1 })
 
 export function getFocusableElements(
   container: HTMLElement | null = document.body

From 77f9067976830828fb3eadd7181a5423033e285e Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 6 May 2022 09:52:46 +0300
Subject: [PATCH 03/10] Update unit tests

---
 test/unit/specs/components/v-filter-checklist.spec.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/test/unit/specs/components/v-filter-checklist.spec.js b/test/unit/specs/components/v-filter-checklist.spec.js
index 627eb68922..6f1af83a3d 100644
--- a/test/unit/specs/components/v-filter-checklist.spec.js
+++ b/test/unit/specs/components/v-filter-checklist.spec.js
@@ -3,8 +3,14 @@ import { fireEvent, render, screen } from '@testing-library/vue'
 
 import { PiniaVuePlugin, createPinia } from 'pinia'
 
+import { useI18n } from '~/composables/use-i18n'
+
 import FilterChecklist from '~/components/VFilters/VFilterChecklist.vue'
 
+jest.mock('~/composables/use-i18n', () => ({
+  useI18n: jest.fn(),
+}))
+
 describe('FilterChecklist', () => {
   let options = {}
   let props = null
@@ -15,6 +21,7 @@ describe('FilterChecklist', () => {
     localVue = createLocalVue()
     localVue.use(PiniaVuePlugin)
     pinia = createPinia()
+    useI18n.mockImplementation(() => ({ t: (v) => v }))
 
     props = {
       options: [{ code: 'foo', name: 'bar', checked: false }],

From b494f9b78be5cefd06d7fff4dec2dc7d7e71502b Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Sat, 7 May 2022 08:09:32 +0300
Subject: [PATCH 04/10] Update tab/shift-tab handling

---
 src/components/VFilters/VSearchGridFilter.vue |  64 +++++++---
 src/components/VHeader/VFilterButton.vue      |   9 +-
 src/components/VHeader/VHeaderFilter.vue      | 119 +++++++++---------
 3 files changed, 111 insertions(+), 81 deletions(-)

diff --git a/src/components/VFilters/VSearchGridFilter.vue b/src/components/VFilters/VSearchGridFilter.vue
index 794cf89a19..6d7a99f5fe 100644
--- a/src/components/VFilters/VSearchGridFilter.vue
+++ b/src/components/VFilters/VSearchGridFilter.vue
@@ -5,7 +5,10 @@
     class="filters py-8 px-10 min-h-full md:bg-dark-charcoal-06"
   >
     <div class="flex items-center justify-between mt-2 mb-6">
-      <h4 id="filters-heading" class="text-sr font-semibold py-2 uppercase">
+      <h4
+        id="filters-heading"
+        class="text-sr font-semibold py-2 uppercase leading-8"
+      >
         {{ $t('filter-list.filter-by') }}
       </h4>
       <VButton
@@ -14,11 +17,17 @@
         variant="plain"
         class="text-sm font-semibold py-2 px-4 text-pink hover:ring hover:ring-pink"
         @click="clearFilters"
+        @keydown.tab.shift="focusFilterButton"
       >
         {{ $t('filter-list.clear') }}
       </VButton>
     </div>
-    <form ref="filtersFormRef" class="filters-form" @keydown="handleKeyDown">
+    <form
+      ref="filtersFormRef"
+      class="filters-form"
+      @keydown.tab.exact="handleTabKey"
+      @keydown.tab.shift.exact="handleShiftTabKey"
+    >
       <VFilterChecklist
         v-for="filterType in filterTypes"
         :key="filterType"
@@ -40,7 +49,6 @@
 import {
   computed,
   defineComponent,
-  onMounted,
   ref,
   useContext,
   useRoute,
@@ -53,7 +61,6 @@ import { useSearchStore } from '~/stores/search'
 import { areQueriesEqual } from '~/utils/search-query-transform'
 
 import type { NonMatureFilterCategory } from '~/constants/filters'
-import { keycodes } from '~/constants/key-codes'
 import { Focus, focusIn, getFocusableElements } from '~/utils/focus-management'
 
 import VFilterChecklist from '~/components/VFilters/VFilterChecklist.vue'
@@ -110,31 +117,50 @@ export default defineComponent({
      * handler to it.
      * We could actually hard-code this because 'searchBy' is always the last now.
      */
-    const lastFocusableElement = ref<HTMLElement>(null)
-    const updateLastFocusable = () => {
+    const lastFocusableElement = computed<HTMLElement>(() => {
       const focusable = getFocusableElements(filtersFormRef.value)
-      lastFocusableElement.value = focusable[focusable.length - 1]
-    }
-    onMounted(() => {
-      updateLastFocusable()
+      return focusable[focusable.length - 1]
     })
-    watch(filterTypes, () => updateLastFocusable())
+
+    /**
+     * We add the `Shift-Tab` handler to the first focusable checkbox so that focus can go back
+     * to the filter button
+     */
+    const firstFocusableElement = computed<HTMLElement | undefined>(
+      () => getFocusableElements(filtersFormRef.value)[0]
+    )
+
     /**
      * When the user presses 'Tab' on the last focusable element, we need to
      * move focus to the first focusable element in main.
      * @param event
      */
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === keycodes.Tab &&
-        lastFocusableElement.value === event.target
-      ) {
+    const handleTabKey = (event: KeyboardEvent) => {
+      if (lastFocusableElement.value === event.target) {
         event.preventDefault()
         focusIn(document.querySelector('main'), Focus.First)
       }
     }
-
+    /**
+     * Move focus to the filter button only when this checkbox is the first focusable
+     * element in the search grid filter, i.e. the 'Clear filters' button is hidden.
+     * @param event - The keydown event
+     */
+    const handleShiftTabKey = (event: KeyboardEvent) => {
+      if (
+        firstFocusableElement.value === event.target &&
+        !isAnyFilterApplied.value
+      ) {
+        focusFilterButton(event)
+      }
+    }
+    const focusFilterButton = (event: KeyboardEvent) => {
+      event.preventDefault()
+      const filterButton = document.getElementById('filter-button')
+      if (filterButton) filterButton.focus()
+    }
     return {
+      firstFocusableElement,
       filtersFormRef,
       isAnyFilterApplied,
       filters,
@@ -142,7 +168,9 @@ export default defineComponent({
       filterTypeTitle,
       clearFilters: searchStore.clearFilters,
       toggleFilter: searchStore.toggleFilter,
-      handleKeyDown,
+      handleTabKey,
+      handleShiftTabKey,
+      focusFilterButton,
     }
   },
 })
diff --git a/src/components/VHeader/VFilterButton.vue b/src/components/VHeader/VFilterButton.vue
index 8861a3a7e8..060dc30c25 100644
--- a/src/components/VHeader/VFilterButton.vue
+++ b/src/components/VHeader/VFilterButton.vue
@@ -1,5 +1,6 @@
 <template>
   <VButton
+    id="filter-button"
     :variant="variant"
     size="disabled"
     class="self-center gap-2 align-center font-semibold py-2 flex-shrink-0 focus-visible:border-tx focus-visible:ring focus-visible:ring-pink"
@@ -12,7 +13,7 @@
     aria-controls="filters"
     :aria-label="mdMinLabel"
     @click="$emit('toggle')"
-    @keydown="$emit('keydown', $event)"
+    @keydown.tab.exact="$emit('tab', $event)"
   >
     <VIcon
       :class="filtersAreApplied ? 'hidden' : 'block'"
@@ -36,6 +37,7 @@ import {
 } from '@nuxtjs/composition-api'
 
 import { useSearchStore } from '~/stores/search'
+import { defineEvent } from '~/types/emits'
 
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
@@ -54,7 +56,10 @@ const VFilterButton = defineComponent({
       default: false,
     },
   },
-  emits: ['toggle'],
+  emits: {
+    tab: defineEvent<[KeyboardEvent]>(),
+    toggle: defineEvent(),
+  },
   setup(props) {
     const { i18n } = useContext()
     const searchStore = useSearchStore()
diff --git a/src/components/VHeader/VHeaderFilter.vue b/src/components/VHeader/VHeaderFilter.vue
index a239a68415..df83099817 100644
--- a/src/components/VHeader/VHeaderFilter.vue
+++ b/src/components/VHeader/VHeaderFilter.vue
@@ -10,73 +10,75 @@
       :pressed="visibleRef"
       v-bind="triggerA11yProps"
       @toggle="onTriggerClick"
-      @keydown="onKeyDown"
+      @tab="onTab"
     />
-    <Component :is="filterComponent" v-bind="options" @close="onTriggerClick">
+    <Component
+      :is="filterComponent"
+      v-bind="options"
+      :visible="visibleRef"
+      @close="onTriggerClick"
+    >
       <VSearchGridFilter @close="onTriggerClick" />
     </Component>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {
+  defineComponent,
   ref,
   watch,
   reactive,
   computed,
   onMounted,
-  useContext,
   inject,
+  Ref,
 } from '@nuxtjs/composition-api'
 
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
+import { useI18n } from '~/composables/use-i18n'
 
-import { keycodes } from '~/constants/key-codes'
 import { Focus, focusIn } from '~/utils/focus-management'
+import { defineEvent } from '~/types/emits'
 
 import VTeleport from '~/components/VTeleport/VTeleport.vue'
 import VFilterButton from '~/components/VHeader/VFilterButton.vue'
 import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
-import VSidebarContent from '~/components/VHeader/VSidebarContent.vue'
-import VModalContent from '~/components/VModal/VModalContent.vue'
 
-export default {
+export default defineComponent({
   name: 'VHeaderFilter',
   components: {
     VFilterButton,
     VSearchGridFilter,
-    VSidebarContent,
-    VModalContent,
     VTeleport,
   },
-  emits: [
+  emits: {
     /**
      * Fires when the popover opens, regardless of reason. There are no extra parameters.
      */
-    'open',
+    open: defineEvent(),
     /**
      * Fires when the popover closes, regardless of reason. There are no extra parameters.
      */
-    'close',
-  ],
+    close: defineEvent(),
+  },
   setup(_, { emit }) {
-    const modalRef = ref(null)
-    /** @type { import('@nuxtjs/composition-api').Ref<boolean> } */
-    const visibleRef = ref(false)
-    const nodeRef = ref(null)
+    const modalRef = ref<HTMLElement | null>(null)
+    const nodeRef = ref<HTMLElement | null>(null)
+    const buttonRef = ref<HTMLElement | null>(null)
 
-    /** @type { import('@nuxtjs/composition-api').Ref<HTMLElement | undefined> } */
-    const buttonRef = ref()
+    const visibleRef = ref(false)
     const filterSidebar = useFilterSidebarVisibility()
-    const { i18n } = useContext()
-    /** @type { import('@nuxtjs/composition-api').Ref<boolean> } */
-    const isMinScreenMd = inject('isMinScreenMd')
-    /** @type { import('@nuxtjs/composition-api').Ref<boolean> } */
-    const isHeaderScrolled = inject('isHeaderScrolled')
+    const i18n = useI18n()
+
+    const isMinScreenMd: Ref<boolean> = inject('isMinScreenMd', ref(true))
+    const isHeaderScrolled: Ref<boolean> = inject(
+      'isHeaderScrolled',
+      ref(false)
+    )
 
-    /** @type { import('@nuxtjs/composition-api').Ref<import('@nuxtjs/composition-api').Component> } */
-    const filterComponent = ref(VModalContent)
+    const filterComponent = ref('VModalContent')
 
     const triggerA11yProps = reactive({
       'aria-expanded': false,
@@ -103,56 +105,50 @@ export default {
     }
 
     const onTriggerClick = () => {
-      if (visibleRef.value === true) {
-        close()
-      } else {
-        open()
-      }
+      visibleRef.value === true ? close() : open()
     }
 
     /**
      * Focus the first element in the sidebar when navigating from the VFilterButton
      * using keyboard `Tab` key.
-     * @param { KeyboardEvent } event
      */
-    const onKeyDown = (event) => {
-      if (
-        isMinScreenMd.value &&
-        event.key === keycodes.Tab &&
-        filterSidebar.isVisible.value
-      ) {
+    const onTab = (event: KeyboardEvent) => {
+      if (isMinScreenMd.value && filterSidebar.isVisible.value) {
         // Prevent over-tabbing to the element after the target one
         event.preventDefault()
         // Cannot use refs when using portals (for sidebar)
-        focusIn(document.querySelector('#filters'), Focus.First)
+        const filtersSidebarElement = document.getElementById('filters')
+        if (filtersSidebarElement) {
+          focusIn(filtersSidebarElement, Focus.First)
+        }
       }
     }
 
-    /**
-     * @typedef {{mode?: string, 'trigger-element'?: import('@nuxtjs/composition-api').ComputedRef<HTMLElement|null>, hide?: close, visible: import('@nuxtjs/composition-api').Ref<boolean>, 'aria-label'?: string}} FilterOptions
-     */
+    type MobileFilterOptions = {
+      'aria-label': string
+      hide: () => void
+    }
+    type DesktopFilterOptions = {
+      to: string
+    }
 
-    /** @type {FilterOptions} */
     const mobileOptions = {
-      visible: visibleRef,
-      'trigger-element':
-        /** @type {import('@nuxtjs/composition-api').ComputedRef<HTMLElement|null>}*/ (
-          computed(() => nodeRef?.value?.firstChild)
-        ),
-      hide: close,
+      triggerElement: computed(() =>
+        nodeRef.value?.firstChild
+          ? (nodeRef.value?.firstChild as HTMLElement)
+          : null
+      ),
       'aria-label': i18n.t('header.filter-button.simple').toString(),
-      mode: 'mobile',
+      hide: close,
     }
 
-    /** @type {FilterOptions} */
     const desktopOptions = {
       to: 'sidebar',
-      visible: visibleRef,
     }
-    /**
-     * @type {Ref<FilterOptions>}
-     */
-    const options = ref(mobileOptions)
+
+    const options: Ref<MobileFilterOptions | DesktopFilterOptions> =
+      ref(mobileOptions)
+
     onMounted(() => {
       if (isMinScreenMd.value && filterSidebar.isVisible.value) {
         open()
@@ -162,10 +158,10 @@ export default {
       [isMinScreenMd],
       ([isMinScreenMd]) => {
         if (isMinScreenMd) {
-          filterComponent.value = VSidebarContent
+          filterComponent.value = 'VSidebarContent'
           options.value = desktopOptions
         } else {
-          filterComponent.value = VModalContent
+          filterComponent.value = 'VModalContent'
           options.value = mobileOptions
         }
       },
@@ -179,14 +175,15 @@ export default {
       isHeaderScrolled,
       nodeRef,
       visibleRef,
+
       open,
       close,
       onTriggerClick,
-      onKeyDown,
+      onTab,
       triggerA11yProps,
       isMinScreenMd,
       options,
     }
   },
-}
+})
 </script>

From 3c31855be342f7f4d646b289cc43b29655b31776 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Sat, 7 May 2022 09:27:55 +0300
Subject: [PATCH 05/10] Stop focus going to the filters sidebar at the end of
 the search page

---
 .../VMetaSearch/VMetaSearchForm.vue           | 34 ++++++++++++++-
 src/components/VScrollButton.vue              | 15 ++++---
 src/components/VSearchGrid.vue                | 26 +++++++----
 src/pages/search.vue                          | 43 +++++++++++++------
 src/stores/search.ts                          |  8 ++--
 5 files changed, 93 insertions(+), 33 deletions(-)

diff --git a/src/components/VMetaSearch/VMetaSearchForm.vue b/src/components/VMetaSearch/VMetaSearchForm.vue
index 62c6a2c531..48cb66ff02 100644
--- a/src/components/VMetaSearch/VMetaSearchForm.vue
+++ b/src/components/VMetaSearch/VMetaSearchForm.vue
@@ -1,8 +1,10 @@
 <template>
   <section
     :key="type"
+    ref="sectionRef"
     class="p-6 meta-search text-center mt-12"
     data-testid="meta-search-form"
+    @keydown.tab.exact="handleTab"
   >
     <header class="mb-10">
       <i18n
@@ -51,11 +53,18 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
+import {
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+} from '@nuxtjs/composition-api'
 
 import type { MediaType } from '~/constants/media'
 import type { ApiQueryParams } from '~/utils/search-query-transform'
 import { getAdditionalSourceBuilders } from '~/utils/get-additional-sources'
+import { getFocusableElements } from '~/utils/focus-management'
+import { defineEvent } from '~/types/emits'
 
 import VMetaSourceList from './VMetaSourceList.vue'
 
@@ -70,7 +79,11 @@ export default defineComponent({
     isSupported: { type: Boolean, default: false },
     hasNoResults: { type: Boolean, required: true },
   },
-  setup(props) {
+  emits: {
+    tab: defineEvent<[KeyboardEvent]>(),
+  },
+  setup(props, { emit }) {
+    const sectionRef = ref<HTMLElement>()
     const unsupportedByUseFilter = computed(() =>
       getAdditionalSourceBuilders(props.type)
         .filter((source) => !source.supportsUseFilters)
@@ -78,8 +91,25 @@ export default defineComponent({
         .join(', ')
     )
 
+    /**
+     * Find the last focusable element in VSearchGridFilter to add a 'Tab' keydown event
+     * handler to it.
+     * We could actually hard-code this because 'searchBy' is always the last now.
+     */
+    const lastFocusableElement = computed<HTMLElement>(() => {
+      const focusable = getFocusableElements(sectionRef.value)
+      return focusable[focusable.length - 1]
+    })
+
+    const handleTab = (event: KeyboardEvent) => {
+      if (event.target === lastFocusableElement.value) {
+        emit('tab', event)
+      }
+    }
     return {
+      sectionRef,
       unsupportedByUseFilter,
+      handleTab,
     }
   },
 })
diff --git a/src/components/VScrollButton.vue b/src/components/VScrollButton.vue
index 2b950b80a2..2aba244676 100644
--- a/src/components/VScrollButton.vue
+++ b/src/components/VScrollButton.vue
@@ -5,7 +5,7 @@
     class="scroll text-white bg-pink hover:bg-dark-pink transition-all duration-100 ease-linear fixed bottom-4 w-14 h-14 hover:shadow-md rounded-full text-center"
     :class="hClass"
     @click="scrollToTop"
-    @keyup.enter="scrollToTop"
+    @keydown.tab.exact="$emit('tab', $event)"
   >
     <svg
       viewBox="0 0 24 24"
@@ -19,15 +19,20 @@
   </button>
 </template>
 
-<script>
-import { computed } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 
+import { defineEvent } from '~/types/emits'
+
 const positionWithoutSidebar = 'ltr:right-4 rtl:left-4'
 const positionWithSidebar = 'ltr:right-[21rem] rtl:left-[21rem]'
-export default {
+export default defineComponent({
   name: 'VScrollButton',
+  emits: {
+    tab: defineEvent<[KeyboardEvent]>(),
+  },
   setup() {
     const { isVisible: isFilterVisible } = useFilterSidebarVisibility()
     const hClass = computed(() =>
@@ -44,5 +49,5 @@ export default {
       })
     },
   },
-}
+})
 </script>
diff --git a/src/components/VSearchGrid.vue b/src/components/VSearchGrid.vue
index d770d8499e..af4aaa0a48 100644
--- a/src/components/VSearchGrid.vue
+++ b/src/components/VSearchGrid.vue
@@ -27,6 +27,7 @@
       :has-no-results="hasNoResults"
       :query="query"
       :is-supported="supported"
+      @tab="$emit('tab', $event)"
     />
   </section>
   <VErrorSection v-else class="w-full py-10">
@@ -37,19 +38,24 @@
   </VErrorSection>
 </template>
 
-<script>
-import { computed } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
-import { ALL_MEDIA, IMAGE } from '~/constants/media'
+import { ALL_MEDIA, IMAGE, SupportedSearchType } from '~/constants/media'
 import { NO_RESULT } from '~/constants/errors'
 
+import { defineEvent } from '~/types/emits'
+
 import VMetaSearchForm from '~/components/VMetaSearch/VMetaSearchForm.vue'
 import VErrorSection from '~/components/VErrorSection/VErrorSection.vue'
 import VErrorImage from '~/components/VErrorSection/VErrorImage.vue'
 import VNoResults from '~/components/VErrorSection/VNoResults.vue'
 import VSearchResultsTitle from '~/components/VSearchResultsTitle.vue'
 
-export default {
+import { ApiQueryParams } from '../utils/search-query-transform'
+import { FetchState } from '../composables/use-fetch-state'
+
+export default defineComponent({
   name: 'VSearchGrid',
   components: {
     VErrorSection,
@@ -64,16 +70,15 @@ export default {
       required: true,
     },
     query: {
-      type: Object,
+      type: Object as PropType<ApiQueryParams>,
       required: true,
     },
     searchType: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<import('~/constants/media').SupportedSearchType>} */ (
-        String
-      ),
+      type: String as PropType<SupportedSearchType>,
       required: true,
     },
     fetchState: {
+      type: Object as PropType<FetchState>,
       required: true,
     },
     resultsCount: {
@@ -81,6 +86,9 @@ export default {
       required: true,
     },
   },
+  emits: {
+    tab: defineEvent<[KeyboardEvent]>(),
+  },
   setup(props) {
     const hasNoResults = computed(() => {
       // noResult is hard-coded for search types that are not currently
@@ -103,5 +111,5 @@ export default {
       NO_RESULT,
     }
   },
-}
+})
 </script>
diff --git a/src/pages/search.vue b/src/pages/search.vue
index 4b907a0ae3..abf06d9994 100644
--- a/src/pages/search.vue
+++ b/src/pages/search.vue
@@ -3,12 +3,14 @@
     class="browse-page flex flex-col w-full px-4 md:px-10"
   >
     <VSearchGrid
+      ref="searchGridRef"
       :fetch-state="fetchState"
       :query="query"
       :supported="supported"
       :search-type="searchType"
       :results-count="resultsCount"
       data-testid="search-grid"
+      @tab="handleTab($event, 'search-grid')"
     >
       <template #media>
         <NuxtChild
@@ -22,13 +24,17 @@
         />
       </template>
     </VSearchGrid>
-    <VScrollButton v-show="showScrollButton" data-testid="scroll-button" />
+    <VScrollButton
+      v-show="showScrollButton"
+      data-testid="scroll-button"
+      @tab="handleTab($event, 'scroll-button')"
+    />
   </VSkipToContentContainer>
 </template>
 
-<script>
+<script lang="ts">
 import { isShallowEqualObjects } from '@wordpress/is-shallow-equal'
-import { computed, inject } from '@nuxtjs/composition-api'
+import { computed, defineComponent, inject, ref } from '@nuxtjs/composition-api'
 
 import { supportedSearchTypes } from '~/constants/media'
 import { isMinScreen } from '~/composables/use-media-query'
@@ -41,14 +47,18 @@ import VSearchGrid from '~/components/VSearchGrid.vue'
 import VSkipToContentContainer from '~/components/VSkipToContentContainer.vue'
 import VScrollButton from '~/components/VScrollButton.vue'
 
-const BrowsePage = {
-  name: 'browse-page',
+import { Focus, focusIn } from '../utils/focus-management'
+
+export default defineComponent({
+  name: 'BrowsePage',
   components: {
     VScrollButton,
     VSearchGrid,
     VSkipToContentContainer,
   },
+  scrollToTop: false,
   setup() {
+    const searchGridRef = ref(null)
     const isMinScreenMd = isMinScreen('md')
     const { isVisible } = useFilterSidebarVisibility()
     const showScrollButton = inject('showScrollButton')
@@ -65,7 +75,14 @@ const BrowsePage = {
     const fetchState = computed(() => mediaStore.fetchState)
     const resultItems = computed(() => mediaStore.resultItems)
 
+    const handleTab = (event: KeyboardEvent, element: string) => {
+      if (showScrollButton.value && element !== 'scroll-button') {
+        return
+      }
+      focusIn(document.getElementById('__layout'), Focus.First)
+    }
     return {
+      searchGridRef,
       isMinScreenMd,
       isVisible,
       showScrollButton,
@@ -79,12 +96,7 @@ const BrowsePage = {
       resultItems,
       fetchMedia: mediaStore.fetchMedia,
       setSearchStateFromUrl: searchStore.setSearchStateFromUrl,
-    }
-  },
-  scrollToTop: false,
-  async fetch() {
-    if (this.supported && !this.resultCount && this.searchTerm.trim() !== '') {
-      await this.fetchMedia()
+      handleTab,
     }
   },
   asyncData({ route, $pinia }) {
@@ -94,6 +106,11 @@ const BrowsePage = {
       urlQuery: route.query,
     })
   },
+  async fetch() {
+    if (this.supported && !this.resultCount && this.searchTerm.trim() !== '') {
+      await this.fetchMedia()
+    }
+  },
   computed: {
     /**
      * Number of search results. Returns 0 for unsupported types.
@@ -120,7 +137,5 @@ const BrowsePage = {
       }
     },
   },
-}
-
-export default BrowsePage
+})
 </script>
diff --git a/src/stores/search.ts b/src/stores/search.ts
index bda0c40a92..4f10681e29 100644
--- a/src/stores/search.ts
+++ b/src/stores/search.ts
@@ -26,6 +26,8 @@ import {
   mediaUniqueFilterKeys,
 } from '~/constants/filters'
 
+import type { Dictionary } from 'vue-router/types/router'
+
 export interface SearchState {
   searchType: SupportedSearchType
   searchTerm: string
@@ -245,9 +247,9 @@ export const useSearchStore = defineStore('search', {
       urlQuery,
     }: {
       path: string
-      urlQuery: Record<string, string>
+      urlQuery: Dictionary<string | (string | null)[]>
     }) {
-      if (urlQuery.q) {
+      if (urlQuery.q && typeof urlQuery.q === 'string') {
         this.setSearchTerm(urlQuery.q.trim())
       }
       this.searchType = queryStringToSearchType(path)
@@ -261,7 +263,7 @@ export const useSearchStore = defineStore('search', {
       }
 
       const newFilterData = queryToFilterData({
-        query,
+        query: query as Record<string, string>,
         searchType: this.searchType,
         defaultFilters: this.getBaseFiltersWithProviders(),
       })

From e6b13a6a4678e842809a86bf90590fa7bbfd97c0 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Sat, 7 May 2022 10:02:52 +0300
Subject: [PATCH 06/10] Update POT file

---
 src/locales/po-files/openverse.pot | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index 24cf5e9f55..8f4a5056f4 100644
--- a/src/locales/po-files/openverse.pot
+++ b/src/locales/po-files/openverse.pot
@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-05-04T11:38:38+00:00\n"
+"POT-Creation-Date: 2022-05-07T07:02:11+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -301,7 +301,7 @@ msgid "Edge"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VMetaSearch/VMetaSearchForm.vue:48
+#: src/components/VMetaSearch/VMetaSearchForm.vue:50
 msgctxt "meta-search.caption"
 msgid "###openverse### does not currently index the sources listed above, but through this interface is offering convenient access to search services provided by other independent organizations. ###openverse### has no control over the results that are returned. Do not assume that the results displayed in this search portal are under a CC license. Always verify that the work is actually under a CC license by following the link. If you are in doubt, you should contact the copyright holder directly, or try to contact the site where you found the content."
 msgstr ""
@@ -318,13 +318,13 @@ msgid "Not finding what you're looking for? Try additional ###type### sources."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VMetaSearch/VMetaSearchForm.vue:8
+#: src/components/VMetaSearch/VMetaSearchForm.vue:10
 msgctxt "meta-search.form.no-results-title"
 msgid "No ###type### results for \"###query###\"."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VMetaSearch/VMetaSearchForm.vue:32
+#: src/components/VMetaSearch/VMetaSearchForm.vue:34
 msgctxt "meta-search.form.caption"
 msgid "Click on a source below to directly search other collections of CC-licensed ###type###.###break###Please note that Use filters are not supported for ###filter###."
 msgstr ""
@@ -851,7 +851,7 @@ msgctxt "browse-page.search-rating.feedback-thanks"
 msgid "Thank you for the feedback!"
 msgstr ""
 
-#: src/components/VFilters/VSearchGridFilter.vue:9
+#: src/components/VFilters/VSearchGridFilter.vue:12
 msgctxt "filter-list.filter-by"
 msgid "Filter by"
 msgstr ""
@@ -860,12 +860,12 @@ msgctxt "filter-list.hide"
 msgid "Hide filters"
 msgstr ""
 
-#: src/components/VFilters/VSearchGridFilter.vue:18
+#: src/components/VFilters/VSearchGridFilter.vue:22
 msgctxt "filter-list.clear"
 msgid "Clear filters"
 msgstr ""
 
-#: src/components/VFilters/VSearchGridFilter.vue:37
+#: src/components/VFilters/VSearchGridFilter.vue:42
 msgctxt "filter-list.show"
 msgid "Show results"
 msgstr ""
@@ -914,7 +914,7 @@ msgctxt "filters.license-explanation.more.read-more"
 msgid "Read more"
 msgstr ""
 
-#: src/components/VFilters/VFilterChecklist.vue:97
+#: src/components/VFilters/VFilterChecklist.vue:112
 msgctxt "filters.search-by.title"
 msgid "Search By"
 msgstr ""
@@ -1872,7 +1872,7 @@ msgid "Filters"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VHeader/VFilterButton.vue:95
+#: src/components/VHeader/VFilterButton.vue:101
 msgctxt "header.filter-button.with-count"
 msgid "###count### Filter"
 msgid_plural "###count### Filters"

From 1815f4d46ff4e12a3359f13bf64e639ff9613673 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 10 May 2022 12:24:49 +0300
Subject: [PATCH 07/10] Update src/components/VFilters/VSearchGridFilter.vue

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
---
 src/components/VFilters/VSearchGridFilter.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/VFilters/VSearchGridFilter.vue b/src/components/VFilters/VSearchGridFilter.vue
index 6d7a99f5fe..324eb35039 100644
--- a/src/components/VFilters/VSearchGridFilter.vue
+++ b/src/components/VFilters/VSearchGridFilter.vue
@@ -112,14 +112,14 @@ export default defineComponent({
       }
     )
 
+    const focusableElements = computed(() => getFocusableElements(filtersFormRef.value))
     /**
      * Find the last focusable element in VSearchGridFilter to add a 'Tab' keydown event
      * handler to it.
      * We could actually hard-code this because 'searchBy' is always the last now.
      */
     const lastFocusableElement = computed<HTMLElement>(() => {
-      const focusable = getFocusableElements(filtersFormRef.value)
-      return focusable[focusable.length - 1]
+      return focusableElements.value[focusableElements.value.length - 1]
     })
 
     /**
@@ -127,7 +127,7 @@ export default defineComponent({
      * to the filter button
      */
     const firstFocusableElement = computed<HTMLElement | undefined>(
-      () => getFocusableElements(filtersFormRef.value)[0]
+      () => focusableElements.value[0]
     )
 
     /**

From cd9d7bdc8bd58f7d18fb57ffc76204270c3fc913 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 10 May 2022 16:56:55 +0300
Subject: [PATCH 08/10] Make focus go to the filters sidebar on shift-tab from
 search page

---
 .../VAllResultsGrid/VAllResultsGrid.vue       | 32 ++++++++------
 src/components/VAudioTrack/VAudioTrack.vue    | 10 ++---
 src/components/VContentLink/VContentLink.vue  | 15 ++++---
 src/components/VFilters/VFilterChecklist.vue  |  9 +++-
 src/components/VFilters/VSearchGridFilter.vue | 14 +++---
 src/components/VHeader/VHeader.vue            | 26 ++++-------
 src/components/VHeader/VHeaderFilter.vue      | 15 ++-----
 src/components/VImageGrid/VImageCell.vue      |  1 +
 src/components/VImageGrid/VImageGrid.vue      | 43 +++++++++++++-----
 src/components/VScrollButton.vue              |  5 ++-
 src/components/VSearchGrid.vue                |  7 ++-
 .../use-filter-sidebar-visibility.js          | 44 -------------------
 .../use-filter-sidebar-visibility.ts          | 43 ++++++++++++++++++
 src/composables/use-focus-filters.ts          | 31 +++++++++++++
 src/pages/search.vue                          |  4 +-
 src/pages/search/audio.vue                    | 19 +++++---
 src/pages/search/image.vue                    | 15 ++++---
 tsconfig.json                                 |  1 +
 18 files changed, 195 insertions(+), 139 deletions(-)
 delete mode 100644 src/composables/use-filter-sidebar-visibility.js
 create mode 100644 src/composables/use-filter-sidebar-visibility.ts
 create mode 100644 src/composables/use-focus-filters.ts

diff --git a/src/components/VAllResultsGrid/VAllResultsGrid.vue b/src/components/VAllResultsGrid/VAllResultsGrid.vue
index 2813c5a591..c1542f6b44 100644
--- a/src/components/VAllResultsGrid/VAllResultsGrid.vue
+++ b/src/components/VAllResultsGrid/VAllResultsGrid.vue
@@ -5,12 +5,13 @@
       class="results-grid grid grid-cols-2 lg:grid-cols-5 2xl:grid-cols-6 gap-4 mb-4"
     >
       <VContentLink
-        v-for="[mediaType, count] in resultCounts"
+        v-for="([mediaType, count], i) in resultCounts"
         :key="mediaType"
         :media-type="mediaType"
         :results-count="count"
         :to="localePath({ path: `/search/${mediaType}`, query: $route.query })"
         class="lg:col-span-2"
+        @shift-tab="handleShiftTab($event, i)"
       />
     </div>
     <VGridSkeleton
@@ -39,10 +40,12 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
 
 import { useMediaStore } from '~/stores/media'
+import { useFocusFilters } from '~/composables/use-focus-filters'
+import { Focus } from '~/utils/focus-management'
 
 import VImageCellSquare from '~/components/VAllResultsGrid/VImageCellSquare.vue'
 import VAudioCell from '~/components/VAllResultsGrid/VAudioCell.vue'
@@ -59,16 +62,10 @@ export default defineComponent({
     VGridSkeleton,
     VContentLink,
   },
-  props: ['canLoadMore'],
-  setup(_, { emit }) {
+  setup() {
     const { i18n } = useContext()
     const mediaStore = useMediaStore()
 
-    const onLoadMore = () => {
-      emit('load-more')
-    }
-
-    /** @type {import('@nuxtjs/composition-api').ComputedRef<boolean>} */
     const resultsLoading = computed(() => {
       return (
         Boolean(mediaStore.fetchState.fetchingError) ||
@@ -76,14 +73,10 @@ export default defineComponent({
       )
     })
 
-    /**
-     * @type { ComputedRef<import('~/models/media').Media[]> }
-     */
     const allMedia = computed(() => mediaStore.allMedia)
 
     const isError = computed(() => !!mediaStore.fetchState.fetchingError)
 
-    /** @type {import('@nuxtjs/composition-api').ComputedRef<import('~/composables/use-fetch-state').FetchState>} */
     const fetchState = computed(() => mediaStore.fetchState)
 
     const errorHeader = computed(() => {
@@ -97,15 +90,26 @@ export default defineComponent({
       () => fetchState.value.isFinished && allMedia.value.length === 0
     )
 
+    /**
+     * Move focus to the filters sidebar if shift-tab is pressed on the first content link.
+     * @param i - the index of the content link.
+     * @param event - keydown event
+     */
+    const handleShiftTab = (event: KeyboardEvent, i: number) => {
+      if (i === 0) {
+        useFocusFilters().focusFilterSidebar(event, Focus.Last)
+      }
+    }
+
     return {
       isError,
       errorHeader,
       allMedia,
-      onLoadMore,
       fetchState,
       resultsLoading,
       resultCounts,
       noResults,
+      handleShiftTab,
     }
   },
 })
diff --git a/src/components/VAudioTrack/VAudioTrack.vue b/src/components/VAudioTrack/VAudioTrack.vue
index 070b5a4a89..06e9ba78e3 100644
--- a/src/components/VAudioTrack/VAudioTrack.vue
+++ b/src/components/VAudioTrack/VAudioTrack.vue
@@ -5,7 +5,8 @@
     :aria-label="ariaLabel"
     role="region"
     v-bind="layoutBasedProps"
-    @keydown.native="handleKeydown"
+    @keydown.native.shift.tab="$emit('tab-shift', $event)"
+    @keydown.native.space="handleSpace"
   >
     <Component
       :is="layoutComponent"
@@ -57,7 +58,6 @@ import { useActiveMediaStore } from '~/stores/active-media'
 import { useMediaStore } from '~/stores/media'
 
 import { AUDIO } from '~/constants/media'
-import { keycodes } from '~/constants/key-codes'
 
 import type { AudioDetail } from '~/models/media'
 import {
@@ -385,8 +385,8 @@ export default defineComponent({
         : i18n.t('audio-track.aria-label', { title: props.audio.title })
     )
 
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (!isBoxed.value || event.key !== keycodes.Spacebar) return
+    const handleSpace = (event: KeyboardEvent) => {
+      if (!isBoxed.value) return
       event.preventDefault()
       status.value = status.value === 'playing' ? 'paused' : 'playing'
       handleToggle(status.value)
@@ -398,7 +398,7 @@ export default defineComponent({
       ariaLabel,
       handleToggle,
       handleSeeked,
-      handleKeydown,
+      handleSpace,
 
       currentTime,
       duration,
diff --git a/src/components/VContentLink/VContentLink.vue b/src/components/VContentLink/VContentLink.vue
index 47264109bc..ed383c41c7 100644
--- a/src/components/VContentLink/VContentLink.vue
+++ b/src/components/VContentLink/VContentLink.vue
@@ -2,6 +2,7 @@
   <VLink
     :href="to"
     class="text-dark-charcoal bg-white border border-dark-charcoal/20 rounded-sm flex flex-col md:flex-row md:justify-between items-start md:items-center hover:bg-dark-charcoal hover:text-white hover:no-underline focus:border-tx overflow-hidden py-4 ps-4 pe-12 w-full md:p-6 focus:outline-none focus-visible:ring focus-visible:ring-pink"
+    @keydown.native.shift.tab.exact="$emit('shift-tab', $event)"
   >
     <div class="flex flex-col items-start md:flex-row md:items-center">
       <VIcon :icon-path="iconPath" />
@@ -16,11 +17,13 @@
   </VLink>
 </template>
 
-<script>
-import { computed, defineComponent } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import { useI18nResultsCount } from '~/composables/use-i18n-utilities'
-import { AUDIO, IMAGE, supportedMediaTypes } from '~/constants/media'
+import { AUDIO, IMAGE, SupportedMediaType } from '~/constants/media'
+
+import { defineEvent } from '~/types/emits'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VLink from '~/components/VLink.vue'
@@ -41,9 +44,8 @@ export default defineComponent({
      * One of the media types supported.
      */
     mediaType: {
-      type: String,
+      type: String as PropType<SupportedMediaType>,
       required: true,
-      validator: (val) => supportedMediaTypes.includes(val),
     },
     /**
      * The number of results that the search returned.
@@ -59,6 +61,9 @@ export default defineComponent({
       type: String,
     },
   },
+  emits: {
+    'shift-tab': defineEvent<[KeyboardEvent]>(),
+  },
   setup(props) {
     const iconPath = computed(() => iconMapping[props.mediaType])
     const { getI18nCount } = useI18nResultsCount()
diff --git a/src/components/VFilters/VFilterChecklist.vue b/src/components/VFilters/VFilterChecklist.vue
index 066dc2f60c..9abfe92fb7 100644
--- a/src/components/VFilters/VFilterChecklist.vue
+++ b/src/components/VFilters/VFilterChecklist.vue
@@ -95,12 +95,17 @@ export default defineComponent({
       type: Array as PropType<FilterItem[]>,
       required: false,
     },
-    title: { type: String },
+    title: {
+      type: String,
+    },
     filterType: {
       type: String as PropType<NonMatureFilterCategory>,
       required: true,
     },
-    disabled: { type: Boolean, default: false },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: {
     'toggle-filter': defineEvent<[toggleFilterPayload]>(),
diff --git a/src/components/VFilters/VSearchGridFilter.vue b/src/components/VFilters/VSearchGridFilter.vue
index 324eb35039..4a759ef837 100644
--- a/src/components/VFilters/VSearchGridFilter.vue
+++ b/src/components/VFilters/VSearchGridFilter.vue
@@ -62,6 +62,7 @@ import { areQueriesEqual } from '~/utils/search-query-transform'
 
 import type { NonMatureFilterCategory } from '~/constants/filters'
 import { Focus, focusIn, getFocusableElements } from '~/utils/focus-management'
+import { useFocusFilters } from '~/composables/use-focus-filters'
 
 import VFilterChecklist from '~/components/VFilters/VFilterChecklist.vue'
 import VButton from '~/components/VButton.vue'
@@ -112,7 +113,9 @@ export default defineComponent({
       }
     )
 
-    const focusableElements = computed(() => getFocusableElements(filtersFormRef.value))
+    const focusableElements = computed(() =>
+      getFocusableElements(filtersFormRef.value)
+    )
     /**
      * Find the last focusable element in VSearchGridFilter to add a 'Tab' keydown event
      * handler to it.
@@ -151,14 +154,10 @@ export default defineComponent({
         firstFocusableElement.value === event.target &&
         !isAnyFilterApplied.value
       ) {
-        focusFilterButton(event)
+        useFocusFilters().focusFilterButton(event)
       }
     }
-    const focusFilterButton = (event: KeyboardEvent) => {
-      event.preventDefault()
-      const filterButton = document.getElementById('filter-button')
-      if (filterButton) filterButton.focus()
-    }
+
     return {
       firstFocusableElement,
       filtersFormRef,
@@ -170,7 +169,6 @@ export default defineComponent({
       toggleFilter: searchStore.toggleFilter,
       handleTabKey,
       handleShiftTabKey,
-      focusFilterButton,
     }
   },
 })
diff --git a/src/components/VHeader/VHeader.vue b/src/components/VHeader/VHeader.vue
index 527d4d26f4..1d9a245ee8 100644
--- a/src/components/VHeader/VHeader.vue
+++ b/src/components/VHeader/VHeader.vue
@@ -49,7 +49,7 @@
   </header>
 </template>
 
-<script>
+<script lang="ts">
 import {
   computed,
   defineComponent,
@@ -80,8 +80,9 @@ const menus = {
   FILTERS: 'filters',
   CONTENT_SWITCHER: 'content-switcher',
 }
+type HeaderMenu = 'filters' | 'content-switcher'
 
-const VHeader = defineComponent({
+export default defineComponent({
   name: 'VHeader',
   components: {
     VLogoButton,
@@ -106,6 +107,9 @@ const VHeader = defineComponent({
 
     const { isVisible: isFilterVisible } = useFilterSidebarVisibility()
 
+    const openMenu = ref<null | HeaderMenu>(null)
+    const isMenuOpen = computed(() => openMenu.value !== null)
+
     /**
      * Set the active mobile menu view to the 'filters'
      * if the filter sidebar has been toggled open.
@@ -114,16 +118,7 @@ const VHeader = defineComponent({
       openMenu.value = isFilterVisible ? menus.FILTERS : null
     })
 
-    /**
-     * @type {import('@nuxtjs/composition-api').Ref<null|'filters'|'content-switcher'>}
-     */
-    const openMenu = ref(null)
-    const isMenuOpen = computed(() => openMenu.value !== null)
-
-    /**
-     * @param {'filters'|'content-switcher'} menuName
-     */
-    const openMenuModal = (menuName) => {
+    const openMenuModal = (menuName: HeaderMenu) => {
       if (openMenu.value !== null) {
         close()
       }
@@ -133,12 +128,10 @@ const VHeader = defineComponent({
       openMenu.value = null
     }
 
-    /**  @type {import('@nuxtjs/composition-api').ComputedRef<boolean>} */
     const isFetching = computed(() => {
       return mediaStore.fetchState.isFetching
     })
 
-    /** @type {import('@nuxtjs/composition-api').ComputedRef<number>} */
     const resultsCount = computed(() => mediaStore.resultCount)
     const { getI18nCount } = useI18nResultsCount()
     /**
@@ -159,11 +152,10 @@ const VHeader = defineComponent({
      * Search term has a getter and setter to be used as a v-model.
      * To prevent sending unnecessary requests, we also keep track of whether
      * the search term was changed.
-     * @type {import('@nuxtjs/composition-api').WritableComputedRef<string>}
      */
     const searchTerm = computed({
       get: () => localSearchTerm.value,
-      set: (value) => {
+      set: (value: string) => {
         localSearchTerm.value = value
       },
     })
@@ -230,6 +222,4 @@ const VHeader = defineComponent({
     }
   },
 })
-
-export default VHeader
 </script>
diff --git a/src/components/VHeader/VHeaderFilter.vue b/src/components/VHeader/VHeaderFilter.vue
index df83099817..47dd061ed1 100644
--- a/src/components/VHeader/VHeaderFilter.vue
+++ b/src/components/VHeader/VHeaderFilter.vue
@@ -35,11 +35,12 @@ import {
   Ref,
 } from '@nuxtjs/composition-api'
 
-import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
 import { useI18n } from '~/composables/use-i18n'
+import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
+import { useFocusFilters } from '~/composables/use-focus-filters'
 
-import { Focus, focusIn } from '~/utils/focus-management'
+import { Focus } from '~/utils/focus-management'
 import { defineEvent } from '~/types/emits'
 
 import VTeleport from '~/components/VTeleport/VTeleport.vue'
@@ -113,15 +114,7 @@ export default defineComponent({
      * using keyboard `Tab` key.
      */
     const onTab = (event: KeyboardEvent) => {
-      if (isMinScreenMd.value && filterSidebar.isVisible.value) {
-        // Prevent over-tabbing to the element after the target one
-        event.preventDefault()
-        // Cannot use refs when using portals (for sidebar)
-        const filtersSidebarElement = document.getElementById('filters')
-        if (filtersSidebarElement) {
-          focusIn(filtersSidebarElement, Focus.First)
-        }
-      }
+      useFocusFilters().focusFilterSidebar(event, Focus.First)
     }
 
     type MobileFilterOptions = {
diff --git a/src/components/VImageGrid/VImageCell.vue b/src/components/VImageGrid/VImageCell.vue
index 70b48568c4..52194f54cc 100644
--- a/src/components/VImageGrid/VImageCell.vue
+++ b/src/components/VImageGrid/VImageCell.vue
@@ -7,6 +7,7 @@
       containerAspect * widthBasis
     }`"
     @click="onGotoDetailPage($event, image)"
+    @keydown.native.shift.tab.exact="$emit('shift-tab', $event)"
   >
     <figure
       class="absolute w-full"
diff --git a/src/components/VImageGrid/VImageGrid.vue b/src/components/VImageGrid/VImageGrid.vue
index 0a1d7ec8dd..db87c998ca 100644
--- a/src/components/VImageGrid/VImageGrid.vue
+++ b/src/components/VImageGrid/VImageGrid.vue
@@ -5,6 +5,7 @@
         v-for="(image, index) in images"
         :key="index"
         :image="image"
+        @shift-tab="handleShiftTab($event, index)"
       />
     </div>
     <h5 v-if="isError && !fetchState.isFinished" class="py-4">
@@ -16,7 +17,7 @@
   </section>
 </template>
 
-<script>
+<script lang="ts">
 /**
  * This component receives an array of images as a prop, and
  * is responsible for displaying them as a grid.
@@ -24,14 +25,22 @@
  * or display 'No More Media'.
  * Used to display both image search results, and related images.
  */
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
+
+import type { FetchState } from '~/composables/use-fetch-state'
+import type { ImageDetail } from '~/models/media'
+
+import { defineEvent } from '~/types/emits'
+
 import VLoadMore from '~/components/VLoadMore.vue'
 import VImageCell from '~/components/VImageGrid/VImageCell.vue'
 
-export default {
+export default defineComponent({
   name: 'ImageGrid',
   components: { VLoadMore, VImageCell },
   props: {
     images: {
+      type: Array as PropType<ImageDetail[]>,
       default: () => [],
     },
     /**
@@ -43,21 +52,31 @@ export default {
       default: true,
     },
     fetchState: {
+      type: Object as PropType<FetchState>,
       required: true,
     },
   },
-
-  computed: {
-    isError() {
-      return !!this.fetchState.fetchingError
-    },
+  emits: {
+    'load-more': defineEvent(),
+    'shift-tab': defineEvent(),
   },
-  methods: {
-    onLoadMore() {
-      this.$emit('load-more')
-    },
+  setup(props, { emit }) {
+    const isError = computed(() => Boolean(props.fetchState.fetchingError))
+
+    const onLoadMore = () => {
+      emit('load-more')
+    }
+
+    const handleShiftTab = (event: KeyboardEvent, index: number) => {
+      if (index === 0) {
+        event.preventDefault()
+        emit('shift-tab')
+      }
+    }
+
+    return { isError, onLoadMore, handleShiftTab }
   },
-}
+})
 </script>
 
 <style scoped>
diff --git a/src/components/VScrollButton.vue b/src/components/VScrollButton.vue
index 2aba244676..70138ae497 100644
--- a/src/components/VScrollButton.vue
+++ b/src/components/VScrollButton.vue
@@ -22,12 +22,13 @@
 <script lang="ts">
 import { computed, defineComponent } from '@nuxtjs/composition-api'
 
-import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
-
 import { defineEvent } from '~/types/emits'
 
+import { useFilterSidebarVisibility } from '../composables/use-filter-sidebar-visibility'
+
 const positionWithoutSidebar = 'ltr:right-4 rtl:left-4'
 const positionWithSidebar = 'ltr:right-[21rem] rtl:left-[21rem]'
+
 export default defineComponent({
   name: 'VScrollButton',
   emits: {
diff --git a/src/components/VSearchGrid.vue b/src/components/VSearchGrid.vue
index af4aaa0a48..cc0b833ed6 100644
--- a/src/components/VSearchGrid.vue
+++ b/src/components/VSearchGrid.vue
@@ -43,18 +43,17 @@ import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import { ALL_MEDIA, IMAGE, SupportedSearchType } from '~/constants/media'
 import { NO_RESULT } from '~/constants/errors'
-
 import { defineEvent } from '~/types/emits'
 
+import type { ApiQueryParams } from '~/utils/search-query-transform'
+import type { FetchState } from '~/composables/use-fetch-state'
+
 import VMetaSearchForm from '~/components/VMetaSearch/VMetaSearchForm.vue'
 import VErrorSection from '~/components/VErrorSection/VErrorSection.vue'
 import VErrorImage from '~/components/VErrorSection/VErrorImage.vue'
 import VNoResults from '~/components/VErrorSection/VNoResults.vue'
 import VSearchResultsTitle from '~/components/VSearchResultsTitle.vue'
 
-import { ApiQueryParams } from '../utils/search-query-transform'
-import { FetchState } from '../composables/use-fetch-state'
-
 export default defineComponent({
   name: 'VSearchGrid',
   components: {
diff --git a/src/composables/use-filter-sidebar-visibility.js b/src/composables/use-filter-sidebar-visibility.js
deleted file mode 100644
index 3b2d41077b..0000000000
--- a/src/composables/use-filter-sidebar-visibility.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { onMounted, ref } from '@nuxtjs/composition-api'
-
-import local from '~/utils/local'
-import { isMinScreen } from '~/composables/use-media-query'
-
-/**
- * This global ref is SSR safe because it will only
- * change internal value based on client side interaction.
- *
- * @type {import('@nuxtjs/composition-api').Ref<boolean>}
- */
-const isVisible = ref(false)
-
-/**
- * This composable keeps track of whether the filters (sidebar or modal) should be visible.
- * @param {object} props
- * @param {import('@nuxtjs/composition-api').Ref<boolean>} [props.mediaQuery=isMinScreen('md')] - the minimum media query at which
- * the filters are shown as sidebar instead of the full-page modal.
- * @returns {{isVisible: import('@nuxtjs/composition-api').Ref<boolean>, setVisibility: (val: boolean) => void}}
- */
-export function useFilterSidebarVisibility({ mediaQuery } = {}) {
-  if (!mediaQuery) {
-    mediaQuery = isMinScreen('md')
-  }
-  /**
-   * Open or close the filter sidebar
-   * @param {boolean} val
-   */
-  const setVisibility = (val) => {
-    isVisible.value = val
-    local.setItem(process.env.filterStorageKey, val)
-  }
-
-  onMounted(() => {
-    const localFilterState = () =>
-      local.getItem(process.env.filterStorageKey) === 'true'
-    setVisibility(mediaQuery.value && localFilterState())
-  })
-
-  return {
-    isVisible,
-    setVisibility,
-  }
-}
diff --git a/src/composables/use-filter-sidebar-visibility.ts b/src/composables/use-filter-sidebar-visibility.ts
new file mode 100644
index 0000000000..a6617baeea
--- /dev/null
+++ b/src/composables/use-filter-sidebar-visibility.ts
@@ -0,0 +1,43 @@
+import { onMounted, Ref, ref } from '@nuxtjs/composition-api'
+
+import { env } from '~/utils/env'
+import local from '~/utils/local'
+import { isMinScreen } from '~/composables/use-media-query'
+
+/**
+ * This global ref is SSR safe because it will only
+ * change internal value based on client side interaction.
+ *
+ */
+const isVisible = ref<boolean>(false)
+
+/**
+ * This composable keeps track of whether the filters (sidebar or modal) should be visible.
+ * @param mediaQuery - the minimum media query at which
+ * the filters are shown as sidebar instead of the full-page modal.
+ */
+export const useFilterSidebarVisibility = ({
+  mediaQuery,
+}: { mediaQuery?: Ref<boolean> } = {}) => {
+  const _mediaQuery = mediaQuery ? mediaQuery : isMinScreen('md')
+
+  /**
+   * Open or close the filter sidebar
+   * @param val - whether to set the sidebar visible.
+   */
+  const setVisibility = (val: boolean) => {
+    isVisible.value = val
+    local.setItem(env.filterStorageKey, String(val))
+  }
+
+  onMounted(() => {
+    const localFilterState = () =>
+      local.getItem(env.filterStorageKey) === 'true'
+    setVisibility(_mediaQuery.value && localFilterState())
+  })
+
+  return {
+    isVisible,
+    setVisibility,
+  }
+}
diff --git a/src/composables/use-focus-filters.ts b/src/composables/use-focus-filters.ts
new file mode 100644
index 0000000000..d541498a4b
--- /dev/null
+++ b/src/composables/use-focus-filters.ts
@@ -0,0 +1,31 @@
+import { isMinScreen } from '~/composables/use-media-query'
+import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
+import { Focus, focusIn } from '~/utils/focus-management'
+
+export const useFocusFilters = () => {
+  const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
+  const { isVisible: isFilterVisible } = useFilterSidebarVisibility()
+
+  const focusFilterSidebar = (event?: KeyboardEvent, focus = Focus.Last) => {
+    if (isMinScreenMd.value && isFilterVisible.value) {
+      if (event) event.preventDefault()
+      // Prevent over-tabbing to the element after the target one
+      // Cannot use refs when using portals (for sidebar)
+      const filtersSidebarElement = document.getElementById('filters')
+      if (filtersSidebarElement) {
+        focusIn(filtersSidebarElement, focus)
+      }
+    }
+  }
+  const focusFilterButton = (event?: KeyboardEvent) => {
+    if (isMinScreenMd.value && isFilterVisible.value) {
+      if (event) event.preventDefault()
+      const filterButton = document.getElementById('filter-button')
+      if (filterButton) {
+        filterButton.focus()
+      }
+    }
+  }
+
+  return { focusFilterSidebar, focusFilterButton }
+}
diff --git a/src/pages/search.vue b/src/pages/search.vue
index abf06d9994..d2ce5704c4 100644
--- a/src/pages/search.vue
+++ b/src/pages/search.vue
@@ -39,7 +39,7 @@ import { computed, defineComponent, inject, ref } from '@nuxtjs/composition-api'
 import { supportedSearchTypes } from '~/constants/media'
 import { isMinScreen } from '~/composables/use-media-query'
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
-
+import { Focus, focusIn } from '~/utils/focus-management'
 import { useMediaStore } from '~/stores/media'
 import { useSearchStore } from '~/stores/search'
 
@@ -47,8 +47,6 @@ import VSearchGrid from '~/components/VSearchGrid.vue'
 import VSkipToContentContainer from '~/components/VSkipToContentContainer.vue'
 import VScrollButton from '~/components/VScrollButton.vue'
 
-import { Focus, focusIn } from '../utils/focus-management'
-
 export default defineComponent({
   name: 'BrowsePage',
   components: {
diff --git a/src/pages/search/audio.vue b/src/pages/search/audio.vue
index f4495b7d1e..c4ba5bd8df 100644
--- a/src/pages/search/audio.vue
+++ b/src/pages/search/audio.vue
@@ -5,18 +5,19 @@
       is-for-tab="audio"
     />
     <VAudioTrack
-      v-for="audio in results"
+      v-for="(audio, i) in results"
       :key="audio.id"
       class="mb-8 md:mb-10"
       :audio="audio"
       :size="audioTrackSize"
       layout="row"
+      @shift-tab="handleShiftTab($event, i)"
     />
     <VLoadMore />
   </section>
 </template>
 
-<script>
+<script lang="ts">
 import {
   computed,
   defineComponent,
@@ -27,16 +28,16 @@ import {
 import { useLoadMore } from '~/composables/use-load-more'
 import { isMinScreen } from '~/composables/use-media-query'
 import { useBrowserIsMobile } from '~/composables/use-browser-detection'
+import { useFocusFilters } from '~/composables/use-focus-filters'
+import { Focus } from '~/utils/focus-management'
 
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
-
 import VLoadMore from '~/components/VLoadMore.vue'
-
 import VGridSkeleton from '~/components/VSkeleton/VGridSkeleton.vue'
 
 import { propTypes } from './search-page.types'
 
-const AudioSearch = defineComponent({
+export default defineComponent({
   name: 'AudioSearch',
   components: {
     VAudioTrack,
@@ -69,6 +70,12 @@ const AudioSearch = defineComponent({
       return i18n.t('browse-page.fetching-error', { type })
     })
 
+    const handleShiftTab = (event: KeyboardEvent, i: number) => {
+      if (i === 0) {
+        useFocusFilters().focusFilterSidebar(event, Focus.Last)
+      }
+    }
+
     const { canLoadMore, onLoadMore } = useLoadMore(props)
 
     return {
@@ -77,11 +84,11 @@ const AudioSearch = defineComponent({
       isError,
       errorHeader,
 
+      handleShiftTab,
       canLoadMore,
       onLoadMore,
     }
   },
   head: {},
 })
-export default AudioSearch
 </script>
diff --git a/src/pages/search/image.vue b/src/pages/search/image.vue
index 616ee67fa3..f360c95fac 100644
--- a/src/pages/search/image.vue
+++ b/src/pages/search/image.vue
@@ -4,18 +4,20 @@
     :can-load-more="canLoadMore"
     :fetch-state="fetchState"
     @load-more="onLoadMore"
+    @shift-tab="handleShiftTab"
   />
 </template>
 
-<script>
+<script lang="ts">
 import { computed, defineComponent, useMeta } from '@nuxtjs/composition-api'
 
 import { propTypes } from '~/pages/search/search-page.types'
 import { useLoadMore } from '~/composables/use-load-more'
+import { useFocusFilters } from '~/composables/use-focus-filters'
 
 import VImageGrid from '~/components/VImageGrid/VImageGrid.vue'
 
-const ImageSearch = defineComponent({
+export default defineComponent({
   name: 'ImageSearch',
   components: { VImageGrid },
   props: propTypes,
@@ -24,10 +26,13 @@ const ImageSearch = defineComponent({
 
     const results = computed(() => props.resultItems.image)
     const { canLoadMore, onLoadMore } = useLoadMore(props)
-    return { canLoadMore, onLoadMore, results }
+
+    const handleShiftTab = () => {
+      useFocusFilters().focusFilterButton()
+    }
+
+    return { canLoadMore, onLoadMore, handleShiftTab, results }
   },
   head: {},
 })
-
-export default ImageSearch
 </script>
diff --git a/tsconfig.json b/tsconfig.json
index c792fe664f..46fd2eb065 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -53,6 +53,7 @@
     "src/components/VIcon/VIcon.vue",
     "src/components/VIconButton/VIconButton.vue",
     "src/components/VLicense/VLicense.vue",
+    "src/components/VContentLink/VContentLink.vue",
     "src/components/VContentReport/VReportDescForm.vue",
     "src/components/VErrorSection/VErrorImage.vue",
     "src/components/VAudioTrack/**.vue",

From 4335b1235635e8073c493d96309bb17c9fdd6868 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 10 May 2022 18:05:30 +0300
Subject: [PATCH 09/10] Correctly initialize composable

---
 src/components/VAllResultsGrid/VAllResultsGrid.vue |  4 ++--
 src/components/VAudioTrack/VAudioTrack.vue         |  2 +-
 src/components/VFilters/VSearchGridFilter.vue      | 14 ++++++++++----
 src/components/VHeader/VHeaderFilter.vue           |  6 +++---
 src/composables/use-filter-sidebar-visibility.ts   | 12 ++++--------
 src/pages/search/audio.vue                         |  3 ++-
 src/pages/search/image.vue                         |  3 ++-
 7 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/components/VAllResultsGrid/VAllResultsGrid.vue b/src/components/VAllResultsGrid/VAllResultsGrid.vue
index c1542f6b44..8a75e03eed 100644
--- a/src/components/VAllResultsGrid/VAllResultsGrid.vue
+++ b/src/components/VAllResultsGrid/VAllResultsGrid.vue
@@ -89,7 +89,7 @@ export default defineComponent({
     const noResults = computed(
       () => fetchState.value.isFinished && allMedia.value.length === 0
     )
-
+    const focusFilters = useFocusFilters()
     /**
      * Move focus to the filters sidebar if shift-tab is pressed on the first content link.
      * @param i - the index of the content link.
@@ -97,7 +97,7 @@ export default defineComponent({
      */
     const handleShiftTab = (event: KeyboardEvent, i: number) => {
       if (i === 0) {
-        useFocusFilters().focusFilterSidebar(event, Focus.Last)
+        focusFilters.focusFilterSidebar(event, Focus.Last)
       }
     }
 
diff --git a/src/components/VAudioTrack/VAudioTrack.vue b/src/components/VAudioTrack/VAudioTrack.vue
index 06e9ba78e3..a4c57c7341 100644
--- a/src/components/VAudioTrack/VAudioTrack.vue
+++ b/src/components/VAudioTrack/VAudioTrack.vue
@@ -5,7 +5,7 @@
     :aria-label="ariaLabel"
     role="region"
     v-bind="layoutBasedProps"
-    @keydown.native.shift.tab="$emit('tab-shift', $event)"
+    @keydown.native.shift.tab.exact="$emit('shift-tab', $event)"
     @keydown.native.space="handleSpace"
   >
     <Component
diff --git a/src/components/VFilters/VSearchGridFilter.vue b/src/components/VFilters/VSearchGridFilter.vue
index 4a759ef837..2c54ceddb0 100644
--- a/src/components/VFilters/VSearchGridFilter.vue
+++ b/src/components/VFilters/VSearchGridFilter.vue
@@ -17,7 +17,7 @@
         variant="plain"
         class="text-sm font-semibold py-2 px-4 text-pink hover:ring hover:ring-pink"
         @click="clearFilters"
-        @keydown.tab.shift="focusFilterButton"
+        @keydown.shift.tab.exact="focusFilterButton"
       >
         {{ $t('filter-list.clear') }}
       </VButton>
@@ -26,7 +26,7 @@
       ref="filtersFormRef"
       class="filters-form"
       @keydown.tab.exact="handleTabKey"
-      @keydown.tab.shift.exact="handleShiftTabKey"
+      @keydown.shift.tab.exact="handleShiftTabKey"
     >
       <VFilterChecklist
         v-for="filterType in filterTypes"
@@ -90,7 +90,7 @@ export default defineComponent({
     const filterTypeTitle = (filterType: string) =>
       filterType === 'searchBy'
         ? ''
-        : i18n.t(`filters.${kebab(filterType)}.title`).toString()
+        : i18n.t(`filters.${kebab(filterType)}.title`)
 
     /**
      * This watcher fires even when the queries are equal. We update the path only
@@ -154,10 +154,15 @@ export default defineComponent({
         firstFocusableElement.value === event.target &&
         !isAnyFilterApplied.value
       ) {
-        useFocusFilters().focusFilterButton(event)
+        focusFilterButton(event)
       }
     }
 
+    const focusFilters = useFocusFilters()
+    const focusFilterButton = (event?: KeyboardEvent) => {
+      focusFilters.focusFilterButton(event)
+    }
+
     return {
       firstFocusableElement,
       filtersFormRef,
@@ -169,6 +174,7 @@ export default defineComponent({
       toggleFilter: searchStore.toggleFilter,
       handleTabKey,
       handleShiftTabKey,
+      focusFilterButton,
     }
   },
 })
diff --git a/src/components/VHeader/VHeaderFilter.vue b/src/components/VHeader/VHeaderFilter.vue
index 47dd061ed1..234deb7dbe 100644
--- a/src/components/VHeader/VHeaderFilter.vue
+++ b/src/components/VHeader/VHeaderFilter.vue
@@ -108,13 +108,13 @@ export default defineComponent({
     const onTriggerClick = () => {
       visibleRef.value === true ? close() : open()
     }
-
+    const focusFilters = useFocusFilters()
     /**
      * Focus the first element in the sidebar when navigating from the VFilterButton
      * using keyboard `Tab` key.
      */
     const onTab = (event: KeyboardEvent) => {
-      useFocusFilters().focusFilterSidebar(event, Focus.First)
+      focusFilters.focusFilterSidebar(event, Focus.First)
     }
 
     type MobileFilterOptions = {
@@ -131,7 +131,7 @@ export default defineComponent({
           ? (nodeRef.value?.firstChild as HTMLElement)
           : null
       ),
-      'aria-label': i18n.t('header.filter-button.simple').toString(),
+      'aria-label': i18n.t('header.filter-button.simple'),
       hide: close,
     }
 
diff --git a/src/composables/use-filter-sidebar-visibility.ts b/src/composables/use-filter-sidebar-visibility.ts
index a6617baeea..e3f4a849ab 100644
--- a/src/composables/use-filter-sidebar-visibility.ts
+++ b/src/composables/use-filter-sidebar-visibility.ts
@@ -1,4 +1,4 @@
-import { onMounted, Ref, ref } from '@nuxtjs/composition-api'
+import { onMounted, ref } from '@nuxtjs/composition-api'
 
 import { env } from '~/utils/env'
 import local from '~/utils/local'
@@ -13,13 +13,9 @@ const isVisible = ref<boolean>(false)
 
 /**
  * This composable keeps track of whether the filters (sidebar or modal) should be visible.
- * @param mediaQuery - the minimum media query at which
- * the filters are shown as sidebar instead of the full-page modal.
  */
-export const useFilterSidebarVisibility = ({
-  mediaQuery,
-}: { mediaQuery?: Ref<boolean> } = {}) => {
-  const _mediaQuery = mediaQuery ? mediaQuery : isMinScreen('md')
+export const useFilterSidebarVisibility = () => {
+  const mediaQuery = isMinScreen('md')
 
   /**
    * Open or close the filter sidebar
@@ -33,7 +29,7 @@ export const useFilterSidebarVisibility = ({
   onMounted(() => {
     const localFilterState = () =>
       local.getItem(env.filterStorageKey) === 'true'
-    setVisibility(_mediaQuery.value && localFilterState())
+    setVisibility(mediaQuery.value && localFilterState())
   })
 
   return {
diff --git a/src/pages/search/audio.vue b/src/pages/search/audio.vue
index c4ba5bd8df..03ebe6abdb 100644
--- a/src/pages/search/audio.vue
+++ b/src/pages/search/audio.vue
@@ -70,9 +70,10 @@ export default defineComponent({
       return i18n.t('browse-page.fetching-error', { type })
     })
 
+    const focusFilters = useFocusFilters()
     const handleShiftTab = (event: KeyboardEvent, i: number) => {
       if (i === 0) {
-        useFocusFilters().focusFilterSidebar(event, Focus.Last)
+        focusFilters.focusFilterSidebar(event, Focus.Last)
       }
     }
 
diff --git a/src/pages/search/image.vue b/src/pages/search/image.vue
index f360c95fac..e634dc5233 100644
--- a/src/pages/search/image.vue
+++ b/src/pages/search/image.vue
@@ -27,8 +27,9 @@ export default defineComponent({
     const results = computed(() => props.resultItems.image)
     const { canLoadMore, onLoadMore } = useLoadMore(props)
 
+    const focusFilters = useFocusFilters()
     const handleShiftTab = () => {
-      useFocusFilters().focusFilterButton()
+      focusFilters.focusFilterSidebar()
     }
 
     return { canLoadMore, onLoadMore, handleShiftTab, results }

From 8faec43227b69073666332df8776ab695b68d252 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 10 May 2022 18:21:05 +0300
Subject: [PATCH 10/10] Add missing emit type

---
 src/components/VFilters/VSearchGridFilter.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/VFilters/VSearchGridFilter.vue b/src/components/VFilters/VSearchGridFilter.vue
index 2c54ceddb0..485b834853 100644
--- a/src/components/VFilters/VSearchGridFilter.vue
+++ b/src/components/VFilters/VSearchGridFilter.vue
@@ -59,10 +59,10 @@ import { kebab } from 'case'
 
 import { useSearchStore } from '~/stores/search'
 import { areQueriesEqual } from '~/utils/search-query-transform'
-
-import type { NonMatureFilterCategory } from '~/constants/filters'
 import { Focus, focusIn, getFocusableElements } from '~/utils/focus-management'
+import type { NonMatureFilterCategory } from '~/constants/filters'
 import { useFocusFilters } from '~/composables/use-focus-filters'
+import { defineEvent } from '~/types/emits'
 
 import VFilterChecklist from '~/components/VFilters/VFilterChecklist.vue'
 import VButton from '~/components/VButton.vue'
@@ -73,6 +73,9 @@ export default defineComponent({
     VButton,
     VFilterChecklist,
   },
+  emits: {
+    close: defineEvent(),
+  },
   setup() {
     const searchStore = useSearchStore()