Add aria-label to VFilterTab

WordPress · May 27, 2024 · 3265d2a · 3265d2a
1 parent ed6c2a6
commit 3265d2a
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue b/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
@@ -1,14 +1,18 @@
 <template>
-  <VTab id="filters" size="medium" class="gap-x-2">
+  <VTab id="filters" size="medium" class="gap-x-2" :aria-label="ariaLabel">
     <VFilterIconOrCounter :applied-filter-count="appliedFilterCount" />
     <h2 class="label-regular">{{ $t("filters.title") }}</h2>
   </VTab>
 </template>
 <script lang="ts">
+import { computed, defineComponent } from "vue"
+
+import { useI18n } from "~/composables/use-i18n"
+
 import VFilterIconOrCounter from "~/components/VHeader/VFilterIconOrCounter.vue"
 import VTab from "~/components/VTabs/VTab.vue"
 
-export default {
+export default defineComponent({
   name: "VFilterTab",
   components: { VFilterIconOrCounter, VTab },
   props: {
@@ -17,5 +21,12 @@ export default {
       default: 0,
     },
   },
-}
+  setup(props) {
+    const i18n = useI18n()
+    const ariaLabel = computed(() =>
+      i18n.tc("header.filterButton.withCount", props.appliedFilterCount)
+    )
+    return { ariaLabel }
+  },
+})
 </script>