26b03da765
The previous a11y pass made all four chip-buttons inside a streamer row (AUTO / VOD / REC / remove) keyboard-accessible, but the row itself — the parent .streamer-item div whose click selects the streamer — was still mouse-only. A keyboard user could focus the chips but never the row, so they could never select a streamer without a mouse. Made the row a focusable role="button": - role + tabindex on the .streamer-item div - aria-label set to the streamer's name (so AT announces "xrohat button" rather than reading every chip child) - aria-current="true" on the currently selected row (mirroring the visual .active state) so AT understands which row is the current selection - A keydown handler on the row that fires selectStreamer on Enter / Space, but ONLY when the row itself (not a chip child) is the event target. The chips already preventDefault + stopPropagation on their own keydowns so they never reach this handler — and even if they did, the e.target check guards. Focus-visible adds an inset 2px purple ring (inset to match the row's left-border-marker styling for the active state). Tab order through the sidebar is now: nav-items → streamer row → AUTO → VOD → REC → remove-X → next streamer row. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|---|---|---|
| build | ||
| docs | ||
| scripts | ||
| src | ||
| .gitignore | ||
| eslint.config.mjs | ||
| package-lock.json | ||
| package.json | ||
| README_AI_RELEASE.md | ||
| tsconfig.json | ||