refactor(a11y): extract facet chip classes and harden comingSoon test id

Author: PhyPhy07

app/components/Compare/FacetSelector.vue

@@ -23,6 +23,20 @@ function onFacetChange(facet: FacetInfoWithLabels) {
   toggleFacet(facet.id)
 }
 
+/** Visual variant for each facet chip (border/background/cursor). */
+function facetChipVariantClass(facet: FacetInfoWithLabels): string {
+  if (facet.comingSoon) {
+    return 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'
+  }
+  if (isFacetCheckboxDisabled(facet)) {
+    return 'text-fg-muted bg-bg-muted border-border opacity-90 cursor-not-allowed'
+  }
+  if (isFacetSelected(facet.id)) {
+    return 'text-fg-muted bg-bg-muted border-border cursor-pointer'
+  }
+  return 'text-fg-subtle bg-bg-subtle border-border-subtle hover:text-fg-muted hover:border-border cursor-pointer'
+}
+
 // Check if all non-comingSoon facets in a category are selected
 function isCategoryAllSelected(category: string): boolean {
   const facets = facetsByCategory.value[category] ?? []
@@ -84,15 +98,7 @@ function isCategoryNoneSelected(category: string): boolean {
           v-for="facet in facetsByCategory[category]"
           :key="facet.id"
           class="flex items-center gap-1.5 px-1.5 py-0.5 rounded border text-xs transition-colors focus-within:outline focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-accent/70"
-          :class="
-            facet.comingSoon
-              ? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'
-              : isFacetCheckboxDisabled(facet)
-                ? 'text-fg-muted bg-bg-muted border-border opacity-90 cursor-not-allowed'
-                : isFacetSelected(facet.id)
-                  ? 'text-fg-muted bg-bg-muted border-border cursor-pointer'
-                  : 'text-fg-subtle bg-bg-subtle border-border-subtle hover:text-fg-muted hover:border-border cursor-pointer'
-          "
+          :class="facetChipVariantClass(facet)"
         >
           <input
             type="checkbox"

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

@@ -41,7 +41,7 @@ const categoryLabels: Record<string, string> = {
   security: 'Security & Compliance',
 }
 
-const comingSoonFacetId = comingSoonFacets[0]
+const comingSoonFacetId: ComparisonFacet | undefined = comingSoonFacets.at(0)
 
 // Helper to build facet info with labels
 function buildFacetInfo(facet: ComparisonFacet) {
@@ -190,33 +190,35 @@ describe('FacetSelector', () => {
     })
   })
 
-  describe.runIf(hasComingSoonFacets)('comingSoon facets', () => {
-    it('disables comingSoon facets', async () => {
-      const component = await mountSuspended(FacetSelector)
+  describe.runIf(hasComingSoonFacets && comingSoonFacetId !== undefined)(
+    'comingSoon facets',
+    () => {
+      // runIf guarantees comingSoonFacetId is defined here
+      const facetId: ComparisonFacet = comingSoonFacetId!
 
-      const comingSoonInput = component.find(
-        `input[type="checkbox"][data-facet-id="${comingSoonFacetId}"]`,
-      )
-      expect(comingSoonInput.attributes('disabled')).toBeDefined()
-    })
+      it('disables comingSoon facets', async () => {
+        const component = await mountSuspended(FacetSelector)
 
-    it('shows coming soon text for comingSoon facets', async () => {
-      const component = await mountSuspended(FacetSelector)
+        const comingSoonInput = component.find(`input[type="checkbox"][data-facet-id="${facetId}"]`)
+        expect(comingSoonInput.attributes('disabled')).toBeDefined()
+      })
 
-      expect(component.text().toLowerCase()).toContain('coming soon')
-    })
+      it('shows coming soon text for comingSoon facets', async () => {
+        const component = await mountSuspended(FacetSelector)
 
-    it('does not call toggleFacet when comingSoon checkbox change is triggered', async () => {
-      const component = await mountSuspended(FacetSelector)
+        expect(component.text().toLowerCase()).toContain('coming soon')
+      })
 
-      const comingSoonInput = component.find(
-        `input[type="checkbox"][data-facet-id="${comingSoonFacetId}"]`,
-      )
-      await comingSoonInput.trigger('change')
+      it('does not call toggleFacet when comingSoon checkbox change is triggered', async () => {
+        const component = await mountSuspended(FacetSelector)
 
-      expect(mockToggleFacet).not.toHaveBeenCalledWith(comingSoonFacetId)
-    })
-  })
+        const comingSoonInput = component.find(`input[type="checkbox"][data-facet-id="${facetId}"]`)
+        await comingSoonInput.trigger('change')
+
+        expect(mockToggleFacet).not.toHaveBeenCalledWith(facetId)
+      })
+    },
+  )
 
   describe('category all/none buttons', () => {
     it('calls selectCategory when all button is clicked', async () => {