Keyboard-only users had no visible focus indicator on five widely-used button classes: - .btn-primary (main action button — used in clip download, modal confirms) - .btn-secondary (cancel buttons, neutral actions; also missing hover transitions) - .btn-pill (toolbar/bulk-bar action buttons; primary + success + danger variants) - .btn-close (X-close button used in filter clears, inline removals) - .queue-detail-btn (queue item detail chip buttons + archive companion buttons) Tabbing through these buttons left no indication of which one would activate on Enter/Space — WCAG 2.4.7 (Focus Visible) violation. Added :focus-visible rings using the established box-shadow convention (purple-accent for default, white-inner + accent-outer for purple/green pill variants so the ring stays visible against the button's own purple background, red-toned for .btn-close / .btn-pill.danger). Also added :hover + transition to .btn-secondary which previously had neither — clicking felt unresponsive. 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 | ||