fix(a11y): improve facet selector accessibility

app/components/Compare/FacetSelector.vue

@@ -22,35 +22,88 @@ function isCategoryNoneSelected(category: string): boolean {
   const selectableFacets = facets.filter(f => !f.comingSoon)
   return selectableFacets.length > 0 && selectableFacets.every(f => !isFacetSelected(f.id))
 }
+
+function getCategoryActiveControl(category: string): 'all' | 'none' {
+  if (isCategoryAllSelected(category)) return 'all'
+  if (isCategoryNoneSelected(category)) return 'none'
+  return 'all'
+}
+
+function handleCategoryControlKeydown(category: string, event: KeyboardEvent): void {
+  const { key } = event
+
+  if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key)) return
+
+  event.preventDefault()
+
+  const target = event.currentTarget as HTMLElement | null
+  if (!target) return
+
+  const group = target.closest('[data-facet-category-radiogroup]') as HTMLElement | null
+  if (!group) return
+
+  const radios = Array.from(group.querySelectorAll<HTMLElement>('[role="radio"]'))
+  if (!radios.length) return
+
+  const currentIndex = radios.indexOf(target)
+  if (currentIndex === -1) return
+
+  let nextIndex = currentIndex
+
+  if (key === 'ArrowLeft' || key === 'ArrowUp') {
+    nextIndex = (currentIndex - 1 + radios.length) % radios.length
+  } else if (key === 'ArrowRight' || key === 'ArrowDown') {
+    nextIndex = (currentIndex + 1) % radios.length
+  }
+
+  const nextRadio = radios[nextIndex]
+  if (!nextRadio) return
+  const radioType = nextRadio.dataset.radioType
+
+  if (radioType === 'all') {
+    selectCategory(category)
+  } else if (radioType === 'none') {
+    deselectCategory(category)
+  }
+
+  nextRadio.focus()
+}
 </script>
 
 <template>
   <div class="space-y-3" role="group" :aria-label="$t('compare.facets.group_label')">
     <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">
+      <div
+        class="flex items-center gap-2 mb-2"
+        role="radiogroup"
+        :aria-labelledby="`facet-category-label-${category}`"
+        data-facet-category-radiogroup
+      >
+        <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
-          :aria-label="
-            $t('compare.facets.select_category', { category: getCategoryLabel(category) })
-          "
-          :aria-pressed="isCategoryAllSelected(category)"
-          :disabled="isCategoryAllSelected(category)"
+          role="radio"
+          :aria-checked="isCategoryAllSelected(category)"
+          :tabindex="getCategoryActiveControl(category) === 'all' ? 0 : -1"
+          data-radio-type="all"
+          @keydown="handleCategoryControlKeydown(category, $event)"
           @click="selectCategory(category)"
           size="small"
         >
           {{ $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
-          :aria-label="
-            $t('compare.facets.deselect_category', { category: getCategoryLabel(category) })
-          "
-          :aria-pressed="isCategoryNoneSelected(category)"
-          :disabled="isCategoryNoneSelected(category)"
+          role="radio"
+          :aria-checked="isCategoryNoneSelected(category)"
+          :tabindex="getCategoryActiveControl(category) === 'none' ? 0 : -1"
+          data-radio-type="none"
+          @keydown="handleCategoryControlKeydown(category, $event)"
           @click="deselectCategory(category)"
           size="small"
         >
@@ -59,17 +112,21 @@ function isCategoryNoneSelected(category: string): boolean {
       </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="small"
           :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
-          :disabled="facet.comingSoon"
-          :aria-pressed="isFacetSelected(facet.id)"
-          :aria-label="facet.label"
-          class="gap-1 px-1.5 rounded transition-colors focus-visible:outline-accent/70"
+          :aria-disabled="facet.comingSoon"
+          role="checkbox"
+          :aria-checked="isFacetSelected(facet.id)"
+          class="gap-1 px-1.5 rounded transition-colors"
           :class="
             facet.comingSoon
               ? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'

i18n/locales/ar.json

@@ -940,8 +940,6 @@
       "coming_soon": "قريبًا",
       "select_all": "تحديد كل المحاور",
       "deselect_all": "إلغاء تحديد كل المحاور",
-      "select_category": "تحديد جميع محاور {category}",
-      "deselect_category": "إلغاء تحديد جميع محاور {category}",
       "binary_only_tooltip": "هذه الحزمة تعرض ملفات تنفيذية فقط دون تصديرات",
       "categories": {
         "performance": "الأداء",

i18n/locales/bg-BG.json

@@ -921,8 +921,6 @@
       "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,8 +807,6 @@
       "coming_soon": "শীঘ্রই আসছে",
       "select_all": "সব ফ্যাসেট নির্বাচন করুন",
       "deselect_all": "সব ফ্যাসেট অনির্বাচিত করুন",
-      "select_category": "সব {category} ফ্যাসেট নির্বাচন করুন",
-      "deselect_category": "সব {category} ফ্যাসেট অনির্বাচিত করুন",
       "categories": {
         "performance": "কর্মক্ষমতা",
         "health": "স্বাস্থ্য",

i18n/locales/cs-CZ.json

@@ -822,8 +822,6 @@
       "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-DE.json

@@ -938,8 +938,6 @@
       "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

@@ -940,8 +940,6 @@
       "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

@@ -936,8 +936,6 @@
       "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

@@ -940,8 +940,6 @@
       "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",

i18n/locales/hi-IN.json

@@ -808,8 +808,6 @@
       "coming_soon": "जल्द आ रहा है",
       "select_all": "सभी फेसेट्स चुनें",
       "deselect_all": "सभी फेसेट्स अचयनित करें",
-      "select_category": "सभी {category} फेसेट्स चुनें",
-      "deselect_category": "सभी {category} फेसेट्स अचयनित करें",
       "categories": {
         "performance": "प्रदर्शन",
         "health": "स्वास्थ्य",

i18n/locales/id-ID.json

@@ -793,8 +793,6 @@
       "coming_soon": "Segera hadir",
       "select_all": "Pilih semua aspek",
       "deselect_all": "Batalkan semua aspek",
-      "select_category": "Pilih semua aspek {category}",
-      "deselect_category": "Batalkan semua aspek {category}",
       "categories": {
         "performance": "Performa",
         "health": "Kesehatan",

i18n/locales/it-IT.json

@@ -870,8 +870,6 @@
       "coming_soon": "Prossimamente",
       "select_all": "Seleziona tutte le sfaccettature",
       "deselect_all": "Deseleziona tutte le sfaccettature",
-      "select_category": "Seleziona tutte le sfaccettature {category}",
-      "deselect_category": "Deseleziona tutte le sfaccettature {category}",
       "binary_only_tooltip": "Questo pacchetto espone binari e nessuna esportazione",
       "categories": {
         "performance": "Prestazioni",

i18n/locales/ja-JP.json

@@ -930,8 +930,6 @@
       "coming_soon": "近日公開",
       "select_all": "すべての項目を選択",
       "deselect_all": "すべての項目の選択を解除",
-      "select_category": "{category} のすべての項目を選択",
-      "deselect_category": "{category} のすべての項目の選択を解除",
       "binary_only_tooltip": "このパッケージはバイナリのみを提供し、エクスポートを含みません",
       "categories": {
         "performance": "パフォーマンス",

i18n/locales/nb-NO.json

@@ -884,8 +884,6 @@
       "coming_soon": "Kommer snart",
       "select_all": "Velg alle fasetter",
       "deselect_all": "Fravelg alle fasetter",
-      "select_category": "Velg alle {category}-fasetter",
-      "deselect_category": "Fravelg alle {category}-fasetter",
       "binary_only_tooltip": "Denne pakken eksponerer binærfiler og ingen eksporter",
       "categories": {
         "performance": "Ytelse",

i18n/locales/ne-NP.json

@@ -793,8 +793,6 @@
       "coming_soon": "छिट्टै आउँदैछ",
       "select_all": "सबै पक्षहरू चयन गर्नुहोस्",
       "deselect_all": "सबै पक्षहरू हटाउनुहोस्",
-      "select_category": "सबै {category} पक्षहरू चयन गर्नुहोस्",
-      "deselect_category": "सबै {category} पक्षहरू हटाउनुहोस्",
       "categories": {
         "performance": "परफर्मेन्स",
         "health": "हेल्थ",

i18n/locales/pl-PL.json

@@ -940,8 +940,6 @@
       "coming_soon": "Wkrótce",
       "select_all": "Wybierz wszystkie aspekty",
       "deselect_all": "Odznacz wszystkie aspekty",
-      "select_category": "Wybierz wszystkie aspekty: {category}",
-      "deselect_category": "Odznacz wszystkie aspekty: {category}",
       "binary_only_tooltip": "Ten pakiet udostępnia tylko pliki binarne i nie ma eksportów",
       "categories": {
         "performance": "Wydajność",

i18n/locales/pt-BR.json

@@ -809,8 +809,6 @@
       "coming_soon": "Em breve",
       "select_all": "Selecionar todos os aspectos",
       "deselect_all": "Desselecionar todos os aspectos",
-      "select_category": "Selecionar todos os aspectos {category}",
-      "deselect_category": "Desselecionar todos os aspectos {category}",
       "categories": {
         "performance": "Performance",
         "health": "Saúde",

i18n/locales/te-IN.json

@@ -808,8 +808,6 @@
       "coming_soon": "త్వరలో వస్తుంది",
       "select_all": "అన్ని ఫేసెట్‌లను ఎంచుకోండి",
       "deselect_all": "అన్ని ఫేసెట్‌లను అన్‌సెలెక్ట్ చేయండి",
-      "select_category": "అన్ని {category} ఫేసెట్‌లను ఎంచుకోండి",
-      "deselect_category": "అన్ని {category} ఫేసెట్‌లను అన్‌సెలెక్ట్ చేయండి",
       "categories": {
         "performance": "పనితీరు",
         "health": "ఆరోగ్యం",

i18n/locales/zh-CN.json

@@ -940,8 +940,6 @@
       "coming_soon": "即将推出",
       "select_all": "选择所有维度",
       "deselect_all": "取消选择所有维度",
-      "select_category": "选择所有{category}维度",
-      "deselect_category": "取消选择所有{category}维度",
       "binary_only_tooltip": "此包仅暴露二进制文件且无导出",
       "categories": {
         "performance": "性能",

i18n/locales/zh-TW.json

@@ -904,8 +904,6 @@
       "coming_soon": "即將推出",
       "select_all": "選擇所有維度",
       "deselect_all": "取消選擇所有維度",
-      "select_category": "選擇所有{category}維度",
-      "deselect_category": "取消選擇所有{category}維度",
       "binary_only_tooltip": "此套件僅提供二進位檔且沒有匯出",
       "categories": {
         "performance": "效能",

i18n/schema.json

@@ -2824,12 +2824,6 @@
             "deselect_all": {
               "type": "string"
             },
-            "select_category": {
-              "type": "string"
-            },
-            "deselect_category": {
-              "type": "string"
-            },
             "binary_only_tooltip": {
               "type": "string"
             },

lunaria/files/ar-EG.json

@@ -939,8 +939,6 @@
       "coming_soon": "قريبًا",
       "select_all": "تحديد كل المحاور",
       "deselect_all": "إلغاء تحديد كل المحاور",
-      "select_category": "تحديد جميع محاور {category}",
-      "deselect_category": "إلغاء تحديد جميع محاور {category}",
       "binary_only_tooltip": "هذه الحزمة تعرض ملفات تنفيذية فقط دون تصديرات",
       "categories": {
         "performance": "الأداء",

lunaria/files/bg-BG.json

@@ -920,8 +920,6 @@
       "coming_soon": "Скоро",
       "select_all": "Избор на всички аспекти",
       "deselect_all": "Отмяна на избора на всички аспекти",
-      "select_category": "Избор на всички {category} аспекти",
-      "deselect_category": "Отмяна на избора на всички {category} аспекти",
       "binary_only_tooltip": "Този пакет излага binaries и няма exports",
       "categories": {
         "performance": "Производителност",

lunaria/files/bn-IN.json

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

lunaria/files/cs-CZ.json

@@ -821,8 +821,6 @@
       "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",

lunaria/files/de-DE.json

@@ -937,8 +937,6 @@
       "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",

lunaria/files/en-GB.json

@@ -939,8 +939,6 @@
       "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",

lunaria/files/en-US.json

@@ -939,8 +939,6 @@
       "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",

lunaria/files/es-419.json

@@ -935,8 +935,6 @@
       "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",

lunaria/files/es-ES.json

@@ -935,8 +935,6 @@
       "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",