fix(a11y): improve facet selector accessibility (#1536)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Nathan Knowler <nathan@knowler.dev>

Author: 3 people

app/components/Compare/FacetSelector.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { debounce } from 'perfect-debounce'
 const {
   isFacetSelected,
   toggleFacet,
@@ -22,61 +23,94 @@ function isCategoryNoneSelected(category: string): boolean {
   const selectableFacets = facets.filter(f => !f.comingSoon)
   return selectableFacets.length > 0 && selectableFacets.every(f => !isFacetSelected(f.id))
 }
+
+const liveRegionText = ref('')
+const clearLiveRegion = debounce(() => {
+  liveRegionText.value = ''
+}, 250)
+const updateLiveRegion = debounce((message: string) => {
+  liveRegionText.value = message
+  clearLiveRegion()
+}, 250)
+
+function selectAllFacet(category: string) {
+  if (!isCategoryAllSelected(category)) {
+    updateLiveRegion($t('compare.facets.selected_all_category_facets', { category }))
+    selectCategory(category)
+  }
+}
+
+function deselectAllFacet(category: string) {
+  if (!isCategoryNoneSelected(category)) {
+    updateLiveRegion($t('compare.facets.deselected_all_category_facets', { category }))
+    deselectCategory(category)
+  }
+}
 </script>
 
 <template>
-  <div class="space-y-3" role="group" :aria-label="$t('compare.facets.group_label')">
+  <div role="status" aria-live="polite" class="sr-only">{{ liveRegionText }}</div>
+  <div class="space-y-3">
     <div v-for="category in categoryOrder" :key="category">
-      <!-- Category header with all/none buttons -->
       <div class="flex items-center gap-2 mb-2">
-        <span class="text-3xs text-fg-subtle uppercase tracking-wider">
+        <span
+          :id="`facet-category-label-${category}`"
+          class="text-3xs text-fg-subtle uppercase tracking-wider"
+        >
           {{ getCategoryLabel(category) }}
         </span>
-        <!-- TODO: These should be radios, since they are mutually exclusive, and currently this behavior is faked with buttons -->
+
         <ButtonBase
+          size="sm"
+          data-facet-category-action="all"
+          :data-facet-category="category"
           :aria-label="
-            $t('compare.facets.select_category', { category: getCategoryLabel(category) })
+            $t('compare.facets.select_all_category_facets', {
+              category: getCategoryLabel(category),
+            })
           "
-          :aria-pressed="isCategoryAllSelected(category)"
-          :disabled="isCategoryAllSelected(category)"
-          @click="selectCategory(category)"
-          size="sm"
+          :aria-disabled="isCategoryAllSelected(category)"
+          class="aria-disabled:(opacity-40 border-transparent)"
+          @click="selectAllFacet(category)"
         >
           {{ $t('compare.facets.all') }}
         </ButtonBase>
-        <span class="text-2xs text-fg-muted/40">/</span>
+
+        <span class="text-2xs text-fg-muted/40" aria-hidden="true">/</span>
+
         <ButtonBase
+          size="sm"
+          data-facet-category-action="none"
+          :data-facet-category="category"
           :aria-label="
-            $t('compare.facets.deselect_category', { category: getCategoryLabel(category) })
+            $t('compare.facets.deselect_all_category_facets', {
+              category: getCategoryLabel(category),
+            })
           "
-          :aria-pressed="isCategoryNoneSelected(category)"
-          :disabled="isCategoryNoneSelected(category)"
-          @click="deselectCategory(category)"
-          size="sm"
+          :aria-disabled="isCategoryNoneSelected(category)"
+          class="aria-disabled:(opacity-40 border-transparent)"
+          @click="deselectAllFacet(category)"
         >
           {{ $t('compare.facets.none') }}
         </ButtonBase>
       </div>
 
-      <!-- Facet buttons -->
-      <div class="flex items-center gap-1.5 flex-wrap" role="group">
-        <!-- TODO: These should be checkboxes -->
+      <div
+        class="flex items-center gap-1.5 flex-wrap"
+        role="group"
+        :aria-labelledby="`facet-category-label-${category}`"
+        data-facet-category-facets
+      >
         <ButtonBase
           v-for="facet in facetsByCategory[category]"
           :key="facet.id"
           size="sm"
+          role="checkbox"
           :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
           :disabled="facet.comingSoon"
-          :aria-pressed="isFacetSelected(facet.id)"
+          :aria-checked="isFacetSelected(facet.id)"
           :aria-label="facet.label"
-          class="gap-1 px-1.5 rounded transition-colors focus-visible:outline-accent/70"
-          :class="
-            facet.comingSoon
-              ? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'
-              : isFacetSelected(facet.id)
-                ? 'text-fg-muted bg-bg-muted'
-                : 'text-fg-subtle bg-bg-subtle border-border-subtle hover:text-fg-muted hover:border-border'
-          "
+          class="gap-1 px-1.5 rounded transition-colors text-fg-subtle bg-bg-subtle border-border-subtle enabled:hover:(text-fg-muted border-border) aria-checked:(text-fg-muted bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50)) focus-visible:outline-accent/70 disabled:(text-fg-subtle/50 bg-bg-subtle border-border-subtle)"
           @click="!facet.comingSoon && toggleFacet(facet.id)"
           :classicon="
             facet.comingSoon

i18n/locales/ar.json

@@ -937,14 +937,11 @@
       "add_column": "إضافة عمود «بدون تبعية» إلى المقارنة"
     },
     "facets": {
-      "group_label": "محاور المقارنة",
       "all": "الكل",
       "none": "لا شيء",
       "coming_soon": "قريبًا",
       "select_all": "تحديد كل المحاور",
       "deselect_all": "إلغاء تحديد كل المحاور",
-      "select_category": "تحديد جميع محاور {category}",
-      "deselect_category": "إلغاء تحديد جميع محاور {category}",
       "binary_only_tooltip": "هذه الحزمة تعرض ملفات تنفيذية فقط دون تصديرات",
       "categories": {
         "performance": "الأداء",

i18n/locales/az-AZ.json

@@ -1051,14 +1051,11 @@
       "add_column": "Müqayisəyə asılılıqsız sütun əlavə et"
     },
     "facets": {
-      "group_label": "Müqayisə aspektləri",
       "all": "hamısı",
       "none": "heç biri",
       "coming_soon": "Tezliklə",
       "select_all": "Bütün aspektləri seç",
       "deselect_all": "Bütün aspektləri ləğv et",
-      "select_category": "Bütün {category} aspektlərini seç",
-      "deselect_category": "Bütün {category} aspektlərini ləğv et",
       "binary_only_tooltip": "Bu paket yalnız binar fayllar təqdim edir, ixrac yoxdur",
       "categories": {
         "performance": "Performans",

i18n/locales/bg-BG.json

@@ -1008,14 +1008,11 @@
       "add_column": "Добавяне на колона без зависимости към сравнението"
     },
     "facets": {
-      "group_label": "Аспекти на сравнението",
       "all": "всички",
       "none": "нито един",
       "coming_soon": "Скоро",
       "select_all": "Избор на всички аспекти",
       "deselect_all": "Отмяна на избора на всички аспекти",
-      "select_category": "Избор на всички {category} аспекти",
-      "deselect_category": "Отмяна на избора на всички {category} аспекти",
       "binary_only_tooltip": "Този пакет излага binaries и няма exports",
       "categories": {
         "performance": "Производителност",

i18n/locales/bn-IN.json

@@ -807,14 +807,11 @@
     },
     "no_dependency": {},
     "facets": {
-      "group_label": "তুলনা ফ্যাসেট",
       "all": "সব",
       "none": "কিছু না",
       "coming_soon": "শীঘ্রই আসছে",
       "select_all": "সব ফ্যাসেট নির্বাচন করুন",
       "deselect_all": "সব ফ্যাসেট অনির্বাচিত করুন",
-      "select_category": "সব {category} ফ্যাসেট নির্বাচন করুন",
-      "deselect_category": "সব {category} ফ্যাসেট অনির্বাচিত করুন",
       "categories": {
         "performance": "কর্মক্ষমতা",
         "health": "স্বাস্থ্য",

i18n/locales/cs-CZ.json

@@ -1065,14 +1065,11 @@
       "add_column": "Přidat sloupec bez závislosti do porovnání"
     },
     "facets": {
-      "group_label": "Kategorie vlastností",
       "all": "Vše",
       "none": "Žádné",
       "coming_soon": "Brzy k dispozici",
       "select_all": "Vybrat všechny vlastnosti",
       "deselect_all": "Zrušit výběr všech vlastností",
-      "select_category": "Vybrat všechny vlastnosti kategorie {category}",
-      "deselect_category": "Zrušit výběr všech vlastností kategorie {category}",
       "binary_only_tooltip": "Tento balíček obsahuje pouze binární soubory a žádné exporty",
       "categories": {
         "performance": "Výkon",

i18n/locales/de.json

@@ -1127,14 +1127,11 @@
       "add_column": "Spalte „Keine Abhängigkeit“ zum Vergleich hinzufügen"
     },
     "facets": {
-      "group_label": "Vergleichsfacetten",
       "all": "Alle",
       "none": "Keine",
       "coming_soon": "Demnächst verfügbar",
       "select_all": "Alle Facetten auswählen",
       "deselect_all": "Alle Facetten abwählen",
-      "select_category": "Alle {category}-Facetten auswählen",
-      "deselect_category": "Alle {category}-Facetten abwählen",
       "binary_only_tooltip": "Dieses Paket stellt Binärdateien bereit und hat keine Exports",
       "categories": {
         "performance": "Performance",

i18n/locales/en.json

@@ -1128,14 +1128,15 @@
       "add_column": "Add no dependency column to comparison"
     },
     "facets": {
-      "group_label": "Comparison facets",
       "all": "all",
       "none": "none",
+      "select_all_category_facets": "Select all {category} facets",
+      "deselect_all_category_facets": "Deselect all {category} facets",
+      "selected_all_category_facets": "Selected all {category} facets",
+      "deselected_all_category_facets": "Deselected all {category} facets",
       "coming_soon": "Coming soon",
       "select_all": "Select all facets",
       "deselect_all": "Deselect all facets",
-      "select_category": "Select all {category} facets",
-      "deselect_category": "Deselect all {category} facets",
       "binary_only_tooltip": "This package exposes binaries and no exports",
       "categories": {
         "performance": "Performance",

i18n/locales/es.json

@@ -1072,14 +1072,11 @@
       "add_column": "Añadir columna sin dependencia a la comparación"
     },
     "facets": {
-      "group_label": "Facetas de comparación",
       "all": "todas",
       "none": "ninguna",
       "coming_soon": "Próximamente",
       "select_all": "Seleccionar todas las facetas",
       "deselect_all": "Deseleccionar todas las facetas",
-      "select_category": "Seleccionar todas las facetas de {category}",
-      "deselect_category": "Deseleccionar todas las facetas de {category}",
       "binary_only_tooltip": "Este paquete expone binarios y no exportaciones",
       "categories": {
         "performance": "Rendimiento",

i18n/locales/fr-FR.json

@@ -1125,14 +1125,11 @@
       "add_column": "Ajouter la colonne sans dépendance à la comparaison"
     },
     "facets": {
-      "group_label": "Facettes de comparaison",
       "all": "tout",
       "none": "aucun",
       "coming_soon": "Bientôt disponible",
       "select_all": "Sélectionner toutes les facettes",
       "deselect_all": "Désélectionner toutes les facettes",
-      "select_category": "Sélectionner toutes les facettes {category}",
-      "deselect_category": "Désélectionner toutes les facettes {category}",
       "binary_only_tooltip": "Ce paquet expose des binaires et aucun export",
       "categories": {
         "performance": "Performance",