CivicTechTO / CivicTechTO/civictech.ca

Remove outline:none focus suppression in feedback form

Open
#87 0 comments 0 reactions 0 assignees View on GitHub
accessibility
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.