From 91f44c11d90dfbf4b7dc741afbecde73070eaa1c Mon Sep 17 00:00:00 2001
From: phy <sneedphylicia@gmail.com>
Date: Tue, 24 Mar 2026 13:37:34 -0500
Subject: [PATCH 1/4] updating to checkboxes from TODO

---
 app/components/Compare/FacetSelector.vue      | 60 ++++++++++-------
 .../components/compare/FacetSelector.spec.ts  | 66 +++++++++----------
 2 files changed, 67 insertions(+), 59 deletions(-)

diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index 2474d873b5..9d65ac51b1 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import type { FacetInfoWithLabels } from '~/composables/useFacetSelection'
+
 const {
+  selectedFacets,
   isFacetSelected,
   toggleFacet,
   selectCategory,
@@ -9,6 +12,17 @@ const {
   getCategoryLabel,
 } = useFacetSelection()
 
+/** Native checkbox disabled when coming soon or this is the only selected facet (must keep ≥1). */
+function isFacetCheckboxDisabled(facet: FacetInfoWithLabels): boolean {
+  if (facet.comingSoon) return true
+  return selectedFacets.value.length === 1 && isFacetSelected(facet.id)
+}
+
+function onFacetChange(facet: FacetInfoWithLabels) {
+ if(isFacetCheckboxDisabled(facet)) return
+  toggleFacet(facet.id)
+}
+
 // Check if all non-comingSoon facets in a category are selected
 function isCategoryAllSelected(category: string): boolean {
   const facets = facetsByCategory.value[category] ?? []
@@ -58,39 +72,39 @@ function isCategoryNoneSelected(category: string): boolean {
         </ButtonBase>
       </div>
 
-      <!-- Facet buttons -->
-      <div class="flex items-center gap-1.5 flex-wrap" role="group">
-        <!-- TODO: These should be checkboxes -->
-        <ButtonBase
+      <div
+        class="flex items-center gap-1.5 flex-wrap"
+        role="group"
+        :aria-label="getCategoryLabel(category)"
+      >
+        <label
           v-for="facet in facetsByCategory[category]"
           :key="facet.id"
-          size="sm"
-          :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
-          :disabled="facet.comingSoon"
-          :aria-pressed="isFacetSelected(facet.id)"
-          :aria-label="facet.label"
-          class="gap-1 px-1.5 rounded transition-colors focus-visible:outline-accent/70"
+          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'
-              : isFacetSelected(facet.id)
-                ? 'text-fg-muted bg-bg-muted'
-                : 'text-fg-subtle bg-bg-subtle border-border-subtle hover:text-fg-muted hover:border-border'
-          "
-          @click="!facet.comingSoon && toggleFacet(facet.id)"
-          :classicon="
-            facet.comingSoon
-              ? undefined
-              : isFacetSelected(facet.id)
-                ? 'i-lucide:check'
-                : 'i-lucide:plus'
+              : 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'
           "
         >
-          {{ facet.label }}
+          <input
+            type="checkbox"
+            :data-facet-id="facet.id"
+            class="size-3.5 shrink-0 accent-accent rounded border-border disabled:opacity-60"
+            :checked="isFacetSelected(facet.id)"
+            :disabled="isFacetCheckboxDisabled(facet)"
+            :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
+            @change="onFacetChange(facet)"
+          />
+          <span>{{ facet.label }}</span>
           <span v-if="facet.comingSoon" class="text-4xs"
             >({{ $t('compare.facets.coming_soon') }})</span
           >
-        </ButtonBase>
+        </label>
       </div>
     </div>
   </div>
diff --git a/test/nuxt/components/compare/FacetSelector.spec.ts b/test/nuxt/components/compare/FacetSelector.spec.ts
index 3db76373a9..e81a74c7bc 100644
--- a/test/nuxt/components/compare/FacetSelector.spec.ts
+++ b/test/nuxt/components/compare/FacetSelector.spec.ts
@@ -136,7 +136,7 @@ describe('FacetSelector', () => {
     })
   })
 
-  describe('facet buttons', () => {
+  describe('facet checkboxes', () => {
     it('renders all facets from FACET_INFO', async () => {
       const component = await mountSuspended(FacetSelector)
 
@@ -146,43 +146,50 @@ describe('FacetSelector', () => {
       }
     })
 
-    it('shows checkmark icon for selected facets', async () => {
+    it('renders a checkbox for each facet', async () => {
+      const component = await mountSuspended(FacetSelector)
+
+      const checkboxes = component.findAll('input[type="checkbox"]')
+      expect(checkboxes.length).toBe(Object.keys(FACET_INFO).length)
+    })
+
+    it('checks selected facets', async () => {
       mockSelectedFacets.value = ['downloads']
       mockIsFacetSelected.mockImplementation((f: string) => f === 'downloads')
 
       const component = await mountSuspended(FacetSelector)
 
-      expect(component.find('.i-lucide\\:check').exists()).toBe(true)
+      const downloads = component.find('input[type="checkbox"][data-facet-id="downloads"]')
+      expect((downloads.element as HTMLInputElement).checked).toBe(true)
     })
 
-    it('shows add icon for unselected facets', async () => {
+    it('unchecks unselected facets', async () => {
       mockSelectedFacets.value = ['downloads']
       mockIsFacetSelected.mockImplementation((f: string) => f === 'downloads')
 
       const component = await mountSuspended(FacetSelector)
 
-      expect(component.find('.i-lucide\\:plus').exists()).toBe(true)
+      const types = component.find('input[type="checkbox"][data-facet-id="types"]')
+      expect((types.element as HTMLInputElement).checked).toBe(false)
     })
 
-    it('applies aria-pressed for selected state', async () => {
+    it('disables the checkbox when it is the only selected facet', async () => {
       mockSelectedFacets.value = ['downloads']
       mockIsFacetSelected.mockImplementation((f: string) => f === 'downloads')
 
       const component = await mountSuspended(FacetSelector)
 
-      const buttons = component.findAll('button[aria-pressed]')
-      const selectedButton = buttons.find(b => b.attributes('aria-pressed') === 'true')
-      expect(selectedButton).toBeDefined()
+      const downloads = component.find('input[type="checkbox"][data-facet-id="downloads"]')
+      expect(downloads.attributes('disabled')).toBeDefined()
     })
 
-    it('calls toggleFacet when facet button is clicked', async () => {
+    it('calls toggleFacet when a facet checkbox is changed', async () => {
       const component = await mountSuspended(FacetSelector)
 
-      // Find a facet button (not all/none)
-      const facetButton = component.findAll('button').find(b => b.text().includes('Downloads'))
-      await facetButton?.trigger('click')
+      const typesCheckbox = component.find('input[type="checkbox"][data-facet-id="types"]')
+      await typesCheckbox.trigger('change')
 
-      expect(mockToggleFacet).toHaveBeenCalled()
+      expect(mockToggleFacet).toHaveBeenCalledWith('types')
     })
   })
 
@@ -190,11 +197,10 @@ describe('FacetSelector', () => {
     it('disables comingSoon facets', async () => {
       const component = await mountSuspended(FacetSelector)
 
-      // totalDependencies is marked as comingSoon
-      const buttons = component.findAll('button')
-      const comingSoonButton = buttons.find(b => b.text().includes(comingSoonFacetLabel))
-
-      expect(comingSoonButton?.attributes('disabled')).toBeDefined()
+      const comingSoonInput = component.find(
+        `input[type="checkbox"][data-facet-id="${comingSoonFacetId}"]`,
+      )
+      expect(comingSoonInput.attributes('disabled')).toBeDefined()
     })
 
     it('shows coming soon text for comingSoon facets', async () => {
@@ -203,26 +209,14 @@ describe('FacetSelector', () => {
       expect(component.text().toLowerCase()).toContain('coming soon')
     })
 
-    it('does not show checkmark/add icon for comingSoon facets', async () => {
+    it('does not call toggleFacet when comingSoon checkbox change is triggered', async () => {
       const component = await mountSuspended(FacetSelector)
 
-      // Find the comingSoon button
-      const buttons = component.findAll('button')
-      const comingSoonButton = buttons.find(b => b.text().includes(comingSoonFacetLabel))
-
-      // Should not have checkmark or add icon
-      expect(comingSoonButton?.find('.i-lucide\\:check').exists()).toBe(false)
-      expect(comingSoonButton?.find('.i-lucide\\:plus').exists()).toBe(false)
-    })
-
-    it('does not call toggleFacet when comingSoon facet is clicked', async () => {
-      const component = await mountSuspended(FacetSelector)
-
-      const buttons = component.findAll('button')
-      const comingSoonButton = buttons.find(b => b.text().includes(comingSoonFacetLabel))
-      await comingSoonButton?.trigger('click')
+      const comingSoonInput = component.find(
+        `input[type="checkbox"][data-facet-id="${comingSoonFacetId}"]`,
+      )
+      await comingSoonInput.trigger('change')
 
-      // toggleFacet should not have been called with totalDependencies
       expect(mockToggleFacet).not.toHaveBeenCalledWith(comingSoonFacetId)
     })
   })

From 86eeb6a877eb362370e893b730869b500438f411 Mon Sep 17 00:00:00 2001
From: phy <sneedphylicia@gmail.com>
Date: Tue, 24 Mar 2026 13:58:10 -0500
Subject: [PATCH 2/4] fix(a11y): use native checkboxes for compare facet
 selector

---
 app/components/Compare/FacetSelector.vue           | 2 +-
 test/nuxt/components/compare/FacetSelector.spec.ts | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index 9d65ac51b1..761e236b38 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -19,7 +19,7 @@ function isFacetCheckboxDisabled(facet: FacetInfoWithLabels): boolean {
 }
 
 function onFacetChange(facet: FacetInfoWithLabels) {
- if(isFacetCheckboxDisabled(facet)) return
+  if (isFacetCheckboxDisabled(facet)) return
   toggleFacet(facet.id)
 }
 
diff --git a/test/nuxt/components/compare/FacetSelector.spec.ts b/test/nuxt/components/compare/FacetSelector.spec.ts
index e81a74c7bc..7eb4e46738 100644
--- a/test/nuxt/components/compare/FacetSelector.spec.ts
+++ b/test/nuxt/components/compare/FacetSelector.spec.ts
@@ -42,9 +42,6 @@ const categoryLabels: Record<string, string> = {
 }
 
 const comingSoonFacetId = comingSoonFacets[0]
-const comingSoonFacetLabel = hasComingSoonFacets
-  ? (facetLabels[comingSoonFacetId!]?.label ?? comingSoonFacetId)
-  : ''
 
 // Helper to build facet info with labels
 function buildFacetInfo(facet: ComparisonFacet) {

From 4b2657fe999382aa0bffc3677b5a3dca2ce215a7 Mon Sep 17 00:00:00 2001
From: phy <sneedphylicia@gmail.com>
Date: Tue, 24 Mar 2026 14:13:23 -0500
Subject: [PATCH 3/4] fix(a11y): link facet checkbox groups to category
 headings

---
 app/components/Compare/FacetSelector.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index 761e236b38..d3de23a9e7 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -43,7 +43,10 @@ function isCategoryNoneSelected(category: string): boolean {
     <div v-for="category in categoryOrder" :key="category">
       <!-- Category header with all/none buttons -->
       <div class="flex items-center gap-2 mb-2">
-        <span class="text-3xs text-fg-subtle uppercase tracking-wider">
+        <span
+          :id="`facet-category-${category}-heading`"
+          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 -->
@@ -75,7 +78,7 @@ function isCategoryNoneSelected(category: string): boolean {
       <div
         class="flex items-center gap-1.5 flex-wrap"
         role="group"
-        :aria-label="getCategoryLabel(category)"
+        :aria-labelledby="`facet-category-${category}-heading`"
       >
         <label
           v-for="facet in facetsByCategory[category]"

From 00bb21ca2289dee41584f9259388dc426a6c4977 Mon Sep 17 00:00:00 2001
From: phy <sneedphylicia@gmail.com>
Date: Tue, 24 Mar 2026 15:33:47 -0500
Subject: [PATCH 4/4] refactor(a11y): extract facet chip classes and harden
 comingSoon test id

---
 app/components/Compare/FacetSelector.vue      | 24 ++++++----
 .../components/compare/FacetSelector.spec.ts  | 46 ++++++++++---------
 2 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index d3de23a9e7..8389a03a1a 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/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"
diff --git a/test/nuxt/components/compare/FacetSelector.spec.ts b/test/nuxt/components/compare/FacetSelector.spec.ts
index 7eb4e46738..f36d33473e 100644
--- a/test/nuxt/components/compare/FacetSelector.spec.ts
+++ b/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 () => {