diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue index f8f39aee7..87f6bf047 100644 --- a/app/components/Compare/FacetSelector.vue +++ b/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('[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() +}