a11y: focus-visible styles missing or insufficient on custom button variants (WCAG 2.4.7) #36

New issue

Closed

opened 2026-04-08 06:43:16 -07:00 by pyr0ball · 0 comments

pyr0ball commented

2026-04-08 06:43:16 -07:00

Owner

Several component-scoped button styles override button:focus-visible without providing an adequate replacement:

.btn-close, .recipe-title-btn, .select-all-btn, .share-btn, .chip-remove, .filter-chip — all have background: transparent; border: none with no local :focus-visible rule

Also verify amber outline achieves 3:1 contrast against adjacent backgrounds in both light and dark mode per WCAG 1.4.11.

Fix: Add explicit :focus-visible styles to all custom button classes. Minimum: 2px solid, 3px offset. Prefer 3px/3px to meet WCAG 2.2 2.4.11.

Refs: HIGH-W6

Several component-scoped button styles override `button:focus-visible` without providing an adequate replacement: - `.btn-close`, `.recipe-title-btn`, `.select-all-btn`, `.share-btn`, `.chip-remove`, `.filter-chip` — all have `background: transparent; border: none` with no local `:focus-visible` rule Also verify amber outline achieves 3:1 contrast against adjacent backgrounds in both light and dark mode per WCAG 1.4.11. **Fix:** Add explicit `:focus-visible` styles to all custom button classes. Minimum: 2px solid, 3px offset. Prefer 3px/3px to meet WCAG 2.2 2.4.11. **Refs:** HIGH-W6