From 5e6063493d0f7acc3b4d5094ac83cbdf12ff234b Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Thu, 10 Sep 2026 13:23:26 -0700 Subject: [PATCH] Standardize form-element focus states on :focus-visible (#1084) 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. --- CHANGELOG.md | 1 + .../sass/protocol/base/elements/_forms.scss | 14 +++++------ .../protocol/components/forms/_choice.scss | 18 ++++++------- .../protocol/components/forms/_status.scss | 25 ++++++++++++++++--- 4 files changed, 39 insertions(+), 19 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c1e0091..d31a14db 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -52,6 +52,7 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust ### Accessibility * (breaking) Standardized interactive component states on `:focus-visible` instead of `:focus`, so the focus ring only shows for keyboard/assistive-tech focus rather than every mouse click. Affects Breadcrumb, Button, Card, Footer, Menu, Menu Item, Menu List, Modal, Navigation, Notification Bar, Sidebar Menu, and Sticky Promo. Text inputs keep `:focus` -- see the next entry. +* (breaking) Did the same in form styles for checkboxes, radio buttons, `