refactor(a11y): replace radio controls with action buttons for all/none

Author: Dayifour

app/components/Compare/FacetSelector.vue

@@ -22,52 +22,6 @@ 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>
@@ -76,9 +30,7 @@ function handleCategoryControlKeydown(category: string, event: KeyboardEvent): v
       <!-- Category header with all/none buttons -->
       <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}`"
@@ -87,24 +39,22 @@ function handleCategoryControlKeydown(category: string, event: KeyboardEvent): v
           {{ getCategoryLabel(category) }}
         </span>
         <ButtonBase
-          role="radio"
-          :aria-checked="isCategoryAllSelected(category)"
-          :tabindex="getCategoryActiveControl(category) === 'all' ? 0 : -1"
-          data-radio-type="all"
-          @keydown="handleCategoryControlKeydown(category, $event)"
-          @click="selectCategory(category)"
+          :aria-disabled="isCategoryAllSelected(category)"
+          :aria-label="`${$t('compare.facets.all')} ${getCategoryLabel(category)} facets`"
+          :data-facet-category="category"
+          data-facet-category-action="all"
+          @click="!isCategoryAllSelected(category) && selectCategory(category)"
           size="small"
         >
           {{ $t('compare.facets.all') }}
         </ButtonBase>
         <span class="text-2xs text-fg-muted/40" aria-hidden="true">/</span>
         <ButtonBase
-          role="radio"
-          :aria-checked="isCategoryNoneSelected(category)"
-          :tabindex="getCategoryActiveControl(category) === 'none' ? 0 : -1"
-          data-radio-type="none"
-          @keydown="handleCategoryControlKeydown(category, $event)"
-          @click="deselectCategory(category)"
+          :aria-disabled="isCategoryNoneSelected(category)"
+          :aria-label="`${$t('compare.facets.none')} ${getCategoryLabel(category)} facets`"
+          :data-facet-category="category"
+          data-facet-category-action="none"
+          @click="!isCategoryNoneSelected(category) && deselectCategory(category)"
           size="small"
         >
           {{ $t('compare.facets.none') }}

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

@@ -85,7 +85,9 @@ vi.mock('~/composables/useFacetSelection', () => ({
     facetsByCategory: computed(() => {
       const result: Record<string, ReturnType<typeof buildFacetInfo>[]> = {}
       for (const category of CATEGORY_ORDER) {
-        result[category] = FACETS_BY_CATEGORY[category].map(facet => buildFacetInfo(facet))
+        result[category] = FACETS_BY_CATEGORY[category].map((facet: ComparisonFacet) =>
+          buildFacetInfo(facet),
+        )
       }
       return result
     }),
@@ -230,12 +232,21 @@ describe('FacetSelector', () => {
   })
 
   describe('category all/none buttons', () => {
+    function findCategoryActionButton(
+      component: Awaited<ReturnType<typeof mountSuspended>>,
+      category: string,
+      action: 'all' | 'none',
+    ) {
+      return component.find(
+        `button[data-facet-category="${category}"][data-facet-category-action="${action}"]`,
+      )
+    }
+
     it('calls selectCategory when all button is clicked', async () => {
       const component = await mountSuspended(FacetSelector)
 
-      // Find the first 'all' radio (for performance category)
-      const allButton = component.findAll('button[role="radio"]').find(b => b.text() === 'all')
-      await allButton!.trigger('click')
+      const allButton = findCategoryActionButton(component, 'performance', 'all')
+      await allButton.trigger('click')
 
       expect(mockSelectCategory).toHaveBeenCalledWith('performance')
     })
@@ -247,38 +258,64 @@ describe('FacetSelector', () => {
 
       const component = await mountSuspended(FacetSelector)
 
-      // Find the first 'none' radio (for performance category)
-      const noneButton = component.findAll('button[role="radio"]').find(b => b.text() === 'none')
-      await noneButton!.trigger('click')
+      const noneButton = findCategoryActionButton(component, 'performance', 'none')
+      await noneButton.trigger('click')
 
       expect(mockDeselectCategory).toHaveBeenCalledWith('performance')
     })
 
-    it('marks all button as checked when all facets in category are selected', async () => {
+    it('marks all button as aria-disabled when all facets in category are selected', async () => {
       // Select all performance facets
       const performanceFacets: (string | ComparisonFacet)[] = FACETS_BY_CATEGORY.performance.filter(
-        f => !FACET_INFO[f].comingSoon,
+        (f: ComparisonFacet) => !FACET_INFO[f].comingSoon,
       )
       mockSelectedFacets.value = performanceFacets
       mockIsFacetSelected.mockImplementation((f: string) => performanceFacets.includes(f))
 
       const component = await mountSuspended(FacetSelector)
 
-      const allButton = component.findAll('button[role="radio"]').find(b => b.text() === 'all')
-      // First all button (performance) should be checked
-      expect(allButton!.attributes('aria-checked')).toBe('true')
+      const allButton = findCategoryActionButton(component, 'performance', 'all')
+
+      expect(allButton.attributes('aria-disabled')).toBe('true')
     })
 
-    it('marks none button as checked when no facets in category are selected', async () => {
+    it('marks none button as aria-disabled when no facets in category are selected', async () => {
       // Deselect all performance facets
       mockSelectedFacets.value = ['downloads'] // only health facet selected
       mockIsFacetSelected.mockImplementation((f: string) => f === 'downloads')
 
       const component = await mountSuspended(FacetSelector)
 
-      const noneButton = component.findAll('button[role="radio"]').find(b => b.text() === 'none')
-      // First none button (performance) should be checked
-      expect(noneButton!.attributes('aria-checked')).toBe('true')
+      const noneButton = findCategoryActionButton(component, 'performance', 'none')
+
+      expect(noneButton.attributes('aria-disabled')).toBe('true')
+    })
+
+    it('does not call selectCategory when all button action is already fulfilled', async () => {
+      const performanceFacets: (string | ComparisonFacet)[] = FACETS_BY_CATEGORY.performance.filter(
+        (f: ComparisonFacet) => !FACET_INFO[f].comingSoon,
+      )
+      mockSelectedFacets.value = performanceFacets
+      mockIsFacetSelected.mockImplementation((f: string) => performanceFacets.includes(f))
+
+      const component = await mountSuspended(FacetSelector)
+
+      const allButton = findCategoryActionButton(component, 'performance', 'all')
+      await allButton.trigger('click')
+
+      expect(mockSelectCategory).not.toHaveBeenCalled()
+    })
+
+    it('does not call deselectCategory when none button action is already fulfilled', async () => {
+      mockSelectedFacets.value = ['downloads']
+      mockIsFacetSelected.mockImplementation((f: string) => f === 'downloads')
+
+      const component = await mountSuspended(FacetSelector)
+
+      const noneButton = findCategoryActionButton(component, 'performance', 'none')
+      await noneButton.trigger('click')
+
+      expect(mockDeselectCategory).not.toHaveBeenCalled()
     })
   })