diff --git a/src/components/VAllResultsGrid/VAllResultsGrid.vue b/src/components/VAllResultsGrid/VAllResultsGrid.vue
index 2813c5a591..8a75e03eed 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(() => {
@@ -96,16 +89,27 @@ 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.
+     * @param event - keydown event
+     */
+    const handleShiftTab = (event: KeyboardEvent, i: number) => {
+      if (i === 0) {
+        focusFilters.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..a4c57c7341 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.exact="$emit('shift-tab', $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 7c233cd922..822e2b9ce1 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 { getElements } from '~/utils/license'
 
 import VLicenseExplanation from '~/components/VFilters/VLicenseExplanation.vue'
@@ -70,7 +75,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,
@@ -82,51 +92,68 @@ export default {
     VPopover,
   },
   props: {
-    options: { type: Array, required: false },
-    title: { type: String },
-    filterType: { type: String, required: true },
-    disabled: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      icons: { help: helpIcon, closeSmall: closeSmallIcon },
-    }
-  },
-  computed: {
-    itemName() {
-      return this.filterType === 'searchBy'
-        ? this.$t('filters.search-by.title')
-        : this.title
+    options: {
+      type: Array as PropType<FilterItem[]>,
+      required: false,
+    },
+    title: {
+      type: String,
+    },
+    filterType: {
+      type: String as PropType<NonMatureFilterCategory>,
+      required: true,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: {
+    'toggle-filter': defineEvent<[toggleFilterPayload]>(),
   },
-  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')
+        : props.title
+    })
+
+    const itemLabel = (item: FilterItem) =>
+      ['audioProviders', 'imageProviders'].indexOf(props.filterType) > -1
         ? item.name
-        : this.$t(item.name)
-    },
-    onValueChange({ value }) {
-      this.$emit('toggle-filter', {
+        : i18n.t(item.name)
+
+    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
-      )
-    },
-    getLicenseExplanationCloseAria(license) {
+    }
+    const getLicenseExplanationCloseAria = (license) => {
       const elements = getElements(license).filter((icon) => icon !== 'cc')
       const descriptions = elements
-        .map((element) => this.$t(`browse-page.license-description.${element}`))
+        .map((element) => i18n.t(`browse-page.license-description.${element}`))
         .join(' ')
-      const close = this.$t('modal.close-named', {
-        name: this.$t('browse-page.aria.license-explanation'),
+      const close = i18n.t('modal.close-named', {
+        name: i18n.t('browse-page.aria.license-explanation'),
       })
       return `${descriptions} - ${close}`
-    },
+    }
+
+    const isDisabled = (item: FilterItem) =>
+      useSearchStore().isFilterDisabled(item, props.filterType) ??
+      props.disabled
+    const icons = { help: helpIcon, closeSmall: closeSmallIcon }
+
+    return {
+      icons,
+      itemName,
+      isDisabled,
+      itemLabel,
+      onValueChange,
+      getLicenseExplanationCloseAria,
+    }
   },
-}
+})
 </script>
diff --git a/src/components/VFilters/VSearchGridFilter.vue b/src/components/VFilters/VSearchGridFilter.vue
index 4f04e7d4a7..6cefa9ddc6 100644
--- a/src/components/VFilters/VSearchGridFilter.vue
+++ b/src/components/VFilters/VSearchGridFilter.vue
@@ -5,20 +5,29 @@
     class="filters py-8 px-10"
   >
     <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>
-      <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"
+        @keydown.shift.tab.exact="focusFilterButton"
       >
         {{ $t('filter-list.clear') }}
-      </button>
+      </VButton>
     </div>
-    <form class="filters-form">
+    <form
+      ref="filtersFormRef"
+      class="filters-form"
+      @keydown.tab.exact="handleTabKey"
+      @keydown.shift.tab.exact="handleShiftTabKey"
+    >
       <VFilterChecklist
         v-for="filterType in filterTypes"
         :key="filterType"
@@ -28,21 +37,19 @@
         @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>
 
-<script>
+<script lang="ts">
 import {
   computed,
+  defineComponent,
+  ref,
   useContext,
   useRoute,
   useRouter,
@@ -52,14 +59,23 @@ import { kebab } from 'case'
 
 import { useSearchStore } from '~/stores/search'
 import { areQueriesEqual } from '~/utils/search-query-transform'
+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'
 
-export default {
+export default defineComponent({
   name: 'VSearchGridFilter',
   components: {
+    VButton,
     VFilterChecklist,
   },
+  emits: {
+    close: defineEvent(),
+  },
   setup() {
     const searchStore = useSearchStore()
 
@@ -67,15 +83,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`)
 
     /**
      * This watcher fires even when the queries are equal. We update the path only
@@ -98,14 +116,69 @@ export default {
       }
     )
 
+    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>(() => {
+      return focusableElements.value[focusableElements.value.length - 1]
+    })
+
+    /**
+     * 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>(
+      () => focusableElements.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 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 focusFilters = useFocusFilters()
+    const focusFilterButton = (event?: KeyboardEvent) => {
+      focusFilters.focusFilterButton(event)
+    }
+
     return {
+      firstFocusableElement,
+      filtersFormRef,
       isAnyFilterApplied,
       filters,
       filterTypes,
       filterTypeTitle,
       clearFilters: searchStore.clearFilters,
       toggleFilter: searchStore.toggleFilter,
+      handleTabKey,
+      handleShiftTabKey,
+      focusFilterButton,
     }
   },
-}
+})
 </script>
diff --git a/src/components/VHeader/VFilterButton.vue b/src/components/VHeader/VFilterButton.vue
index 637bd8c1ee..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,6 +13,7 @@
     aria-controls="filters"
     :aria-label="mdMinLabel"
     @click="$emit('toggle')"
+    @keydown.tab.exact="$emit('tab', $event)"
   >
     <VIcon
       :class="filtersAreApplied ? 'hidden' : 'block'"
@@ -35,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'
@@ -53,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/VHeader.vue b/src/components/VHeader/VHeader.vue
index bca8d57e6f..29e036e07a 100644
--- a/src/components/VHeader/VHeader.vue
+++ b/src/components/VHeader/VHeader.vue
@@ -46,7 +46,7 @@
   </header>
 </template>
 
-<script>
+<script lang="ts">
 import {
   computed,
   defineComponent,
@@ -77,6 +77,7 @@ const menus = {
   FILTERS: 'filters',
   CONTENT_SWITCHER: 'content-switcher',
 }
+type HeaderMenu = 'filters' | 'content-switcher'
 
 export default defineComponent({
   name: 'VHeader',
@@ -103,6 +104,9 @@ export default 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.
@@ -111,16 +115,7 @@ export default 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()
       }
@@ -130,12 +125,10 @@ export default 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()
     /**
@@ -156,11 +149,10 @@ export default 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
       },
     })
diff --git a/src/components/VHeader/VHeaderFilter.vue b/src/components/VHeader/VHeaderFilter.vue
index ae0bb78958..81c253a232 100644
--- a/src/components/VHeader/VHeaderFilter.vue
+++ b/src/components/VHeader/VHeaderFilter.vue
@@ -10,69 +10,76 @@
       :pressed="visibleRef"
       v-bind="triggerA11yProps"
       @toggle="onTriggerClick"
+      @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 { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
+import { useFocusFilters } from '~/composables/use-focus-filters'
+
+import { Focus } 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()
 
-    /** @type { import('@nuxtjs/composition-api').Ref<import('@nuxtjs/composition-api').Component> } */
-    const filterComponent = ref(VModalContent)
+    const isMinScreenMd: Ref<boolean> = inject('isMinScreenMd', ref(true))
+    const isHeaderScrolled: Ref<boolean> = inject(
+      'isHeaderScrolled',
+      ref(false)
+    )
+
+    const filterComponent = ref('VModalContent')
 
     const triggerA11yProps = reactive({
       'aria-expanded': false,
@@ -102,29 +109,42 @@ export default {
     }
 
     const onTriggerClick = () => {
-      if (visibleRef.value === true) {
-        close()
-      } else {
-        open()
-      }
+      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) => {
+      focusFilters.focusFilterSidebar(event, Focus.First)
+    }
+
+    type MobileFilterOptions = {
+      'aria-label': string
+      hide: () => void
+    }
+    type DesktopFilterOptions = {
+      to: string
     }
 
     const mobileOptions = {
-      visible: visibleRef,
-      'trigger-element': computed(() => nodeRef?.value?.firstChild),
+      triggerElement: computed(() =>
+        nodeRef.value?.firstChild
+          ? (nodeRef.value?.firstChild as HTMLElement)
+          : null
+      ),
+      'aria-label': i18n.t('header.filter-button.simple'),
       hide: close,
-      'aria-label': i18n.t('header.filter-button.simple').toString(),
-      mode: 'mobile',
     }
 
     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 }> }
-     */
-    const options = ref(mobileOptions)
+
+    const options: Ref<MobileFilterOptions | DesktopFilterOptions> =
+      ref(mobileOptions)
+
     onMounted(() => {
       if (isMinScreenMd.value && filterSidebar.isVisible.value) {
         open()
@@ -134,10 +154,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
         }
       },
@@ -151,13 +171,15 @@ export default {
       isHeaderScrolled,
       nodeRef,
       visibleRef,
+
       open,
       close,
       onTriggerClick,
+      onTab,
       triggerA11yProps,
       isMinScreenMd,
       options,
     }
   },
-}
+})
 </script>
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/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 3e866eba46..a78b178691 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,9 +19,11 @@
   </button>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, defineComponent } from '@nuxtjs/composition-api'
 
+import { defineEvent } from '~/types/emits'
+
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 
 const positionWithoutSidebar = 'ltr:right-4 rtl:left-4'
@@ -29,6 +31,9 @@ const positionWithSidebar = 'ltr:right-[21rem] rtl:left-[21rem]'
 
 export default defineComponent({
   name: 'VScrollButton',
+  emits: {
+    tab: defineEvent<[KeyboardEvent]>(),
+  },
   setup() {
     const { isVisible: isFilterVisible } = useFilterSidebarVisibility()
     const hClass = computed(() =>
diff --git a/src/components/VSearchGrid.vue b/src/components/VSearchGrid.vue
index cddd30719a..1ce5bb4e49 100644
--- a/src/components/VSearchGrid.vue
+++ b/src/components/VSearchGrid.vue
@@ -24,6 +24,7 @@
       :has-no-results="hasNoResults"
       :query="query"
       :is-supported="supported"
+      @tab="$emit('tab', $event)"
     />
   </section>
   <VErrorSection v-else class="w-full py-10">
@@ -34,11 +35,15 @@
   </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 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'
@@ -46,7 +51,7 @@ import VErrorImage from '~/components/VErrorSection/VErrorImage.vue'
 import VNoResults from '~/components/VErrorSection/VNoResults.vue'
 import VSearchResultsTitle from '~/components/VSearchResultsTitle.vue'
 
-export default {
+export default defineComponent({
   name: 'VSearchGrid',
   components: {
     VErrorSection,
@@ -61,16 +66,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: {
@@ -78,6 +82,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
@@ -100,5 +107,5 @@ export default {
       NO_RESULT,
     }
   },
-}
+})
 </script>
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..e3f4a849ab
--- /dev/null
+++ b/src/composables/use-filter-sidebar-visibility.ts
@@ -0,0 +1,39 @@
+import { onMounted, 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.
+ */
+export const useFilterSidebarVisibility = () => {
+  const 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/composables/use-popover-content.js b/src/composables/use-popover-content.js
index 89275d4786..ebaea88533 100644
--- a/src/composables/use-popover-content.js
+++ b/src/composables/use-popover-content.js
@@ -5,7 +5,7 @@ import { useDialogContent } from './use-dialog-content'
 /**
  * @typedef Props
  * @property {import('./types').Ref<HTMLElement>} popoverRef
- * @property {import('./types').ToRefs<import('../components/VPopover/VPopoverContent.types').Props>} popoverPropsRefs
+ * @property {import('./types').ToRefs<import('~/components/VPopover/VPopoverContent.types').Props>} popoverPropsRefs
  * @property {import('@nuxtjs/composition-api').SetupContext['emit']} emit
  */
 
diff --git a/src/composables/use-popper.js b/src/composables/use-popper.js
index 3d66f6611b..b9f01ca5cc 100644
--- a/src/composables/use-popper.js
+++ b/src/composables/use-popper.js
@@ -4,7 +4,7 @@ import { createPopper } from '@popperjs/core'
 /**
  * @typedef Props
  * @property {import('./types').Ref<HTMLElement>} popoverRef
- * @property {import('./types').ToRefs<import('../components/VPopover/VPopoverContent.types').Props>} popoverPropsRefs
+ * @property {import('./types').ToRefs<import('~/components/VPopover/VPopoverContent.types').Props>} popoverPropsRefs
  */
 
 /**
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/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index 5c4814d41f..ff21927479 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-10T16:41:27+00:00\n"
+"POT-Creation-Date: 2022-05-11T02:19:06+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -142,7 +142,7 @@ msgid "Close"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VFilters/VFilterChecklist.vue:125
+#: src/components/VFilters/VFilterChecklist.vue:138
 msgctxt "modal.close-named"
 msgid "Close ###name###"
 msgstr ""
@@ -313,7 +313,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 ""
@@ -330,13 +330,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 ""
@@ -742,7 +742,7 @@ msgid "Load more results"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VAllResultsGrid/VAllResultsGrid.vue:91
+#: src/components/VAllResultsGrid/VAllResultsGrid.vue:84
 msgctxt "browse-page.fetching-error"
 msgid "Error fetching ###type###:"
 msgstr ""
@@ -822,7 +822,7 @@ msgctxt "browse-page.search-form.image"
 msgid "images"
 msgstr ""
 
-#: src/components/VAllResultsGrid/VAllResultsGrid.vue:90
+#: src/components/VAllResultsGrid/VAllResultsGrid.vue:83
 msgctxt "browse-page.search-form.audio"
 msgid "audio"
 msgstr ""
@@ -863,7 +863,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 ""
@@ -872,12 +872,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 ""
@@ -926,7 +926,7 @@ msgctxt "filters.license-explanation.more.read-more"
 msgid "Read more"
 msgstr ""
 
-#: src/components/VFilters/VFilterChecklist.vue:98
+#: src/components/VFilters/VFilterChecklist.vue:118
 msgctxt "filters.search-by.title"
 msgid "Search By"
 msgstr ""
@@ -1871,7 +1871,7 @@ msgctxt "header.api-nav-item"
 msgid "API"
 msgstr ""
 
-#: src/components/VHeader/VHeader.vue:147
+#: src/components/VHeader/VHeader.vue:140
 msgctxt "header.loading"
 msgid "Loading..."
 msgstr ""
@@ -1882,7 +1882,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"
diff --git a/src/pages/search.vue b/src/pages/search.vue
index a4f8039697..5dfa822c35 100644
--- a/src/pages/search.vue
+++ b/src/pages/search.vue
@@ -3,12 +3,14 @@
     class="browse-page flex flex-col px-4 md:px-10 w-full"
   >
     <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,18 +24,22 @@
         />
       </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'
 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'
 
@@ -41,14 +47,16 @@ import VSearchGrid from '~/components/VSearchGrid.vue'
 import VSkipToContentContainer from '~/components/VSkipToContentContainer.vue'
 import VScrollButton from '~/components/VScrollButton.vue'
 
-const BrowsePage = {
-  name: 'browse-page',
+export default defineComponent({
+  name: 'BrowsePage',
   components: {
     VScrollButton,
     VSearchGrid,
     VSkipToContentContainer,
   },
+  scrollToTop: false,
   setup() {
+    const searchGridRef = ref(null)
     const isMinScreenMd = isMinScreen('md')
     const { isVisible: isFilterSidebarVisible } = useFilterSidebarVisibility()
     const showScrollButton = inject('showScrollButton')
@@ -65,7 +73,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,
       isFilterSidebarVisible,
       showScrollButton,
@@ -79,12 +94,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 +104,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 +135,5 @@ const BrowsePage = {
       }
     },
   },
-}
-
-export default BrowsePage
+})
 </script>
diff --git a/src/pages/search/audio.vue b/src/pages/search/audio.vue
index f4495b7d1e..03ebe6abdb 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,13 @@ const AudioSearch = defineComponent({
       return i18n.t('browse-page.fetching-error', { type })
     })
 
+    const focusFilters = useFocusFilters()
+    const handleShiftTab = (event: KeyboardEvent, i: number) => {
+      if (i === 0) {
+        focusFilters.focusFilterSidebar(event, Focus.Last)
+      }
+    }
+
     const { canLoadMore, onLoadMore } = useLoadMore(props)
 
     return {
@@ -77,11 +85,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..e634dc5233 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,14 @@ const ImageSearch = defineComponent({
 
     const results = computed(() => props.resultItems.image)
     const { canLoadMore, onLoadMore } = useLoadMore(props)
-    return { canLoadMore, onLoadMore, results }
+
+    const focusFilters = useFocusFilters()
+    const handleShiftTab = () => {
+      focusFilters.focusFilterSidebar()
+    }
+
+    return { canLoadMore, onLoadMore, handleShiftTab, results }
   },
   head: {},
 })
-
-export default ImageSearch
 </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(),
       })
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
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 }],
diff --git a/tsconfig.json b/tsconfig.json
index 063681c0ff..efebcb6208 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -54,6 +54,7 @@
     "src/components/VCheckbox/VCheckbox.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",