a11y: focus rings suppressed globally — keyboard navigation invisible #97

New issue

Closed

opened 2026-04-14 15:42:26 -07:00 by pyr0ball · 0 comments

pyr0ball commented

2026-04-14 15:42:26 -07:00

Owner

Problem

Playwright audit found outlineStyle: "none" at runtime on all buttons. Focus indicators are not visible when navigating with keyboard.

This fails WCAG 2.4.7 (Focus Visible) at AA level, which is also an ADA exposure.

Expected behavior

All interactive elements (buttons, links, inputs, select, textarea) must display a visible focus ring when focused via keyboard. WCAG 2.4.7 requires the indicator to be visible; WCAG 2.4.11 (AA, 2.2) requires it to have at least 3:1 contrast against the adjacent color.

Investigation needed

Determine where outline: none or outline: 0 is being applied (global CSS reset, component styles, or browser default suppression)
Check theme.css, peregrine.css, and any CSS reset/normalize file
Fix by replacing with a visible themed focus ring, e.g.:
```
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
```
Use :focus-visible (not :focus) to avoid showing rings on mouse click while preserving them for keyboard users.

Labels

a11y, bug, frontend

## Problem Playwright audit found `outlineStyle: "none"` at runtime on all buttons. Focus indicators are not visible when navigating with keyboard. This fails WCAG 2.4.7 (Focus Visible) at AA level, which is also an ADA exposure. ## Expected behavior All interactive elements (buttons, links, inputs, select, textarea) must display a visible focus ring when focused via keyboard. WCAG 2.4.7 requires the indicator to be visible; WCAG 2.4.11 (AA, 2.2) requires it to have at least 3:1 contrast against the adjacent color. ## Investigation needed - Determine where `outline: none` or `outline: 0` is being applied (global CSS reset, component styles, or browser default suppression) - Check `theme.css`, `peregrine.css`, and any CSS reset/normalize file - Fix by replacing with a visible themed focus ring, e.g.: ```css :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ``` Use `:focus-visible` (not `:focus`) to avoid showing rings on mouse click while preserving them for keyboard users. ## Labels a11y, bug, frontend