a11y: category chips carry both aria-pressed (selected) and aria-current (scrolled-into) states at once #107

Why it matters
With "All" selected and the page scrolled into the Audio group, the chip row shows "All" filled and "Audio" underlined: two highlighted states on a row the UI describes as plain filters. To a screen reader, aria-pressed on a mutually exclusive set announces independent toggles, and the moving aria-current adds a second announced state. Also form-control borders (--line on the page background) sit at about 1.4:1, under the 3:1 non-text contrast guideline, which matters most for the empty search box whose border is its only boundary.

Evidence

• site/public/app.js:286-296 sets is-active / aria-pressed; app.js:486-491 sets is-current / aria-current.
• site/public/styles.css:269, 289, 680 use --line (#c5ccd6 on #eef1f4, 1.43:1; dark 1.45:1) as the sole boundary.

Suggested approach
Make the chip row role="radiogroup" with role="radio" + aria-checked, and move the scroll position indicator to the group heading (or a "You are in: Audio" line). Darken --line for form controls to reach 3:1 (for example #8a94a2 light, #4a5362 dark) or give controls a distinct background.

Done when
Only one state is shown per chip, a screen reader announces the row as a single-choice group, and control borders pass 3:1.