Summary
`app/frontend/src/App.css` lines 133-138 removes the focus outline on all buttons globally:
```css
@layer base {
button {
appearance: none;
outline: none;
}
}
```
Removing `outline` without providing a `:focus-visible` replacement means keyboard users and screen reader users get no visual focus indicator on any button in the application. This fails WCAG 2.1 Success Criterion 2.4.7 (Focus Visible).
How to fix
Replace the blanket `outline: none` with a `:focus-visible` rule that provides a visible indicator for keyboard navigation while keeping the clean look for mouse users:
```css
@layer base {
button {
appearance: none;
outline: none;
}
button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
}
```
`:focus-visible` is only applied when the browser determines the user is navigating by keyboard, so it does not affect mouse interaction.
Files
- `app/frontend/src/App.css` (lines 133-138, `@layer base` button rule)
Summary
`app/frontend/src/App.css` lines 133-138 removes the focus outline on all buttons globally:
```css
@layer base {
button {
appearance: none;
outline: none;
}
}
```
Removing `outline` without providing a `:focus-visible` replacement means keyboard users and screen reader users get no visual focus indicator on any button in the application. This fails WCAG 2.1 Success Criterion 2.4.7 (Focus Visible).
How to fix
Replace the blanket `outline: none` with a `:focus-visible` rule that provides a visible indicator for keyboard navigation while keeping the clean look for mouse users:
```css
@layer base {
button {
appearance: none;
outline: none;
}
button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
}
```
`:focus-visible` is only applied when the browser determines the user is navigating by keyboard, so it does not affect mouse interaction.
Files