From bd677a3c4af8796e40b286d5b8105525d39cffd3 Mon Sep 17 00:00:00 2001 From: Manager Dayif Date: Tue, 17 Feb 2026 21:58:10 +0000 Subject: [PATCH 1/5] fix(compare): improve facet selector accessibility --- app/components/Compare/FacetSelector.vue | 103 ++++++++++++++---- .../components/compare/FacetSelector.spec.ts | 6 +- 2 files changed, 87 insertions(+), 22 deletions(-) diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue index f8f39aee7..9878c3641 100644 --- a/app/components/Compare/FacetSelector.vue +++ b/app/components/Compare/FacetSelector.vue @@ -22,23 +22,83 @@ 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 (key === 'Enter') { + event.preventDefault() + return + } + + 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('[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] + const radioType = nextRadio.dataset.radioType + + if (radioType === 'all') { + selectCategory(category) + } else if (radioType === 'none') { + deselectCategory(category) + } + + nextRadio.focus() +}