Improve accessibility labels for filters tab and button (#4396)

* Add aria-label to VFilterTab

* Update filter's aria-label within translations

* Simplify VFilterTab by using $tc filter

* Fix tests

* Use a more stable locator for testing

Co-authored-by: Olga Bulat <obulat@gmail.com>

* Use the plural translation for all cases

* Update frontend/test/locales/ar.json

* Add a translator's note to the base translation file

Co-authored-by: sarayourfriend <git@sarayourfriend.pictures>

---------

Co-authored-by: Olga Bulat <obulat@gmail.com>
Co-authored-by: sarayourfriend <git@sarayourfriend.pictures>

frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue

@@ -1,5 +1,10 @@
 <template>
-  <VTab id="filters" size="medium" class="gap-x-2">
+  <VTab
+    id="filters"
+    size="medium"
+    class="gap-x-2"
+    :aria-label="$tc('header.filterButton.withCount', appliedFilterCount)"
+  >
     <VFilterIconOrCounter :applied-filter-count="appliedFilterCount" />
     <h2 class="label-regular">{{ $t("filters.title") }}</h2>
   </VTab>

frontend/src/locales/scripts/en.json5

@@ -52,7 +52,8 @@
     loading: "Loading...",
     filterButton: {
       simple: "Filters",
-      withCount: "{count} Filter|{count} Filters",
+      /** Used as the accessible label for the button or tab that opens the filters sidebar. Count refers the number of filters the user has enabled, not the number of available filters */
+      withCount: "Filters ({count})",
     },
     seeResults: "See results",
     backButton: "Go back",

frontend/test/locales/ar.json

@@ -52,7 +52,7 @@
     "loading": "جار التحميل...",
     "filterButton": {
       "simple": "مرشحات",
-      "withCount": "{count} عامل التصفية | {count} عوامل التصفية"
+      "withCount": "({count}) مرشح"
     },
     "seeResults": "انظر النتائج",
     "backButton": "عُد",

frontend/test/playwright/utils/navigation.ts

@@ -52,9 +52,15 @@ export const openContentSettingsTab = async (
   tab: "searchTypes" | "filters" = "searchTypes",
   dir: LanguageDirection = "ltr"
 ) => {
-  const tabKey = tab === "searchTypes" ? "searchType.heading" : "filters.title"
-
-  await page.getByRole("tab", { name: t(tabKey, dir) }).click()
+  // Use a hard-coded Regex to match the dynamic Filters tab name
+  const tabName =
+    tab === "searchTypes"
+      ? t("searchType.heading", dir)
+      : dir === "ltr"
+        ? /filter/i
+        : /مرش/
+
+  await page.getByRole("tab", { name: tabName }).click()
 }
 
 /**