CivicTechTO / CivicTechTO/civictech.ca
Remove outline:none focus suppression in feedback form
- Dominant language
- HTML
- Stars
- 1
- Forks
- 6
- Avg merge
- 9h 45m
- Merged PRs (30d)
- 6
Description
## Summary
Four `:focus` rules in the feedback form page set `outline: none` without providing a replacement visible focus indicator. This removes the browser's default focus ring, making it impossible for keyboard users to tell which element is focused.
## Affected locations
All in `_pages/feedback.md`:
- Line 78: `#meetup:focus { outline: none; }`
- Line 217: `.fb-followup textarea:focus { outline: none; }`
- Line 323: `.fb-expander-body textarea:focus { outline: none; }`
- Line 343: `.fb-expander-body select:focus { outline: none; }`
Note: the pill radio buttons and rating buttons correctly use `outline: 2px solid` on `:focus-visible` — that pattern should be followed here too.
## Fix
Replace `outline: none` with a visible focus style, following the pattern already used elsewhere in the form:
```css
/* Before */
#meetup:focus {
outline: none;
}
/* After */
#meetup:focus-visible {
outline: 2px solid var(--pico-primary);
outline-offset: 2px;
}
```
Apply the same pattern to the three other affected selectors.
## WCAG criterion
2.4.7 Focus Visible (Level AA)
Contributor guide
Assessment
This issue has not been assessed yet.