Standardize form-element focus states on :focus-visible - #1142
Open
stephaniehobson wants to merge 1 commit into
Open
stephaniehobson wants to merge 1 commit into
stephaniehobson wants to merge 1 commit into
Conversation
stephaniehobson
force-pushed
the
v23/focus-visible-forms
branch
from
September 11, 2026 21:42
327cc46 to
5e60634
Compare
stephaniehobson
added this pull request to stack #1150
September 11, 2026 21:42
stephaniehobson
commented
Sep 12, 2026
There was a problem hiding this comment.
🟢 Approval recommended
No unresolved approval-blocking issues were identified.
Pull request overview
Standardizes form-control focus styling with :focus-visible for click/pick controls while preserving :focus for text-entry fields.
Changes:
- Updated focus selectors for selects, color/file inputs, checkboxes, and radios.
- Updated related error-state styles.
- Documented the change in
CHANGELOG.md.
File summaries
| File | Description |
|---|---|
CHANGELOG.md |
Documents updated form focus behavior. |
assets/sass/protocol/components/forms/_status.scss |
Updates error-state focus selectors. |
assets/sass/protocol/components/forms/_choice.scss |
Updates checkbox/radio focus selectors. |
assets/sass/protocol/base/elements/_forms.scss |
Updates select and color/file input focus selectors. |
Review details
- Files reviewed: 4/4 changed files
- Comments generated: 0
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
22 :focus selectors across base/elements/_forms.scss, _choice.scss,
and _status.scss, split by whether the control is text-entry or
click/pick-driven -- a judgment call the plan flagged but didn't fully
resolve, since it only named "checkboxes, radios and buttons" as
:focus-visible candidates and text inputs/textareas as the keepers.
Kept :focus (6, genuinely text-entry):
textarea, input[list|date|email|number|password|search|tel|text|
time|url] in _forms.scss and _status.scss's error-state block.
:focus-visible doesn't reliably match mouse-focused text fields
across engines, so losing the ring on click there would be a real
accessibility regression, not an improvement.
Converted to :focus-visible (16):
- checkboxes/radios in _choice.scss (9) -- unambiguous, matches the
plan directly.
- select, input[type=color], input[type=file] in _forms.scss (7) --
the plan didn't name these explicitly, but they're click/pick-
driven controls (open a dropdown, a color picker, a file chooser)
rather than text-entry fields, so I've grouped them with
checkboxes/radios/buttons rather than with text inputs.
- the matching split in _status.scss's error-state block (2,
plus the 4 above from _forms.scss/_choice.scss) -- had to split
its single compound selector list (which mixed text-like and
widget-like types together) into two rule blocks to apply the
same classification consistently between the normal and
error states.
Verified with a targeted grep for the exact classification (4 bare
:focus in _forms.scss, 2 in _status.scss, 0 elsewhere; 18
:focus-visible total) and a direct sass compile.
Stacked on v23/focus-visible-components. Part of #1084.
Verified: npm run lint, npm test (47 specs, Firefox + Chrome), and a
direct sass --verbose compile confirming 30 :focus-visible selectors
in the compiled protocol.css with no new warnings.
stephaniehobson
force-pushed
the
v23/focus-visible-forms
branch
from
September 17, 2026 23:08
32357ce to
7d5032d
Compare
stephaniehobson
marked this pull request as ready for review
September 17, 2026 23:08
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
:focusselectors in form related CSS.CHANGELOG.md.Issue
Part of #1084
Testing
There's a page that includes all form controls. Tab around and mouse around to see if they are focusing as expected. Remember that buttons are form elements :)
http://localhost:3000/components/detail/example-form