fix(compare): improve facet selector accessibility

Author: Dayifour

app/components/Compare/FacetSelector.vue

@@ -28,16 +28,20 @@ function isCategoryNoneSelected(category: string): boolean {
   <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">
+      <div
+        class="flex items-center gap-2 mb-2"
+        role="radiogroup"
+        :aria-label="getCategoryLabel(category)"
+      >
         <span 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
+          role="radio"
           :aria-label="
             $t('compare.facets.select_category', { category: getCategoryLabel(category) })
           "
-          :aria-pressed="isCategoryAllSelected(category)"
+          :aria-checked="isCategoryAllSelected(category)"
           :disabled="isCategoryAllSelected(category)"
           @click="selectCategory(category)"
           size="small"
@@ -46,10 +50,11 @@ function isCategoryNoneSelected(category: string): boolean {
         </ButtonBase>
         <span class="text-2xs text-fg-muted/40">/</span>
         <ButtonBase
+          role="radio"
           :aria-label="
             $t('compare.facets.deselect_category', { category: getCategoryLabel(category) })
           "
-          :aria-pressed="isCategoryNoneSelected(category)"
+          :aria-checked="isCategoryNoneSelected(category)"
           :disabled="isCategoryNoneSelected(category)"
           @click="deselectCategory(category)"
           size="small"
@@ -59,15 +64,20 @@ 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-label="getCategoryLabel(category)"
+      >
         <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)"
+          role="checkbox"
+          :aria-checked="isFacetSelected(facet.id)"
+          :aria-disabled="facet.comingSoon"
           :aria-label="facet.label"
           class="gap-1 px-1.5 rounded transition-colors focus-visible:outline-accent/70"
           :class="

test/nuxt/components/compare/FacetSelector.spec.ts

@@ -170,8 +170,8 @@ describe('FacetSelector', () => {
 
       const component = await mountSuspended(FacetSelector)
 
-      const buttons = component.findAll('button[aria-pressed]')
-      const selectedButton = buttons.find(b => b.attributes('aria-pressed') === 'true')
+      const buttons = component.findAll('button[aria-checked]')
+      const selectedButton = buttons.find(b => b.attributes('aria-checked') === 'true')
       expect(selectedButton).toBeDefined()
     })