Accessibility Auditor

Accessibility Audit — src/components/ProductFilterSidebar.tsx

Framework: React 19 + Radix UI · Target: WCAG 2.2 AA · Components scanned: 7

Findings by WCAG Criterion

Screen-Reader vs Keyboard

Critical Findings — Detail

F-01 — Disabled filter count contrast Critical

FilterGroup.tsx:42 renders #9CA3AF on #F9FAFB at 13px / non-bold. Measured 2.1:1 against the 4.5:1 minimum.

/* Before — fails 1.4.3 */
.filter-count-disabled { color: #9CA3AF; background: #F9FAFB; }

/* After — passes at 5.3:1 */
.filter-count-disabled { color: #6B7280; background: #F9FAFB; }

F-02 — Price slider unreachable Critical

PriceRangeSlider.tsx:18 implements both handles as unstyled <div> elements with mouse-only drag handlers — no role="slider", no aria-value*, no tabIndex. A keyboard or screen-reader user has no path to use the control.

// Preferred: native inputs styled with CSS — no ARIA required
<div className="price-range-track">
  <input type="range" min={0} max={500} value={minPrice}
    onChange={(e) => setMinPrice(Number(e.target.value))}
    aria-label="Minimum price" />
  <input type="range" min={0} max={500} value={maxPrice}
    onChange={(e) => setMaxPrice(Number(e.target.value))}
    aria-label="Maximum price" />
</div>

First rule of ARIA: prefer native <input type="range"> over role="slider" on a <div>. Custom ARIA pattern only if a native input genuinely cannot meet the visual design after CSS.

F-07 — Focus indicator suppressed globally Critical

globals.css:3 contains *:focus { outline: none; }. Component-level :focus-visible exists on ApplyButton but not on checkboxes, swatches, or the collapse toggle. Result: a keyboard user often has no idea where focus is.

/* DELETE: *:focus { outline: none; } */

:focus-visible {
  outline: 3px solid #2563EB;
  outline-offset: 2px;
  border-radius: 2px;
}

Recommended Fixes