fix(login): add visible focus indicator for keyboard navigation#2148
Open
mvanhorn wants to merge 1 commit intohackforla:developmentfrom
Open
fix(login): add visible focus indicator for keyboard navigation#2148mvanhorn wants to merge 1 commit intohackforla:developmentfrom
mvanhorn wants to merge 1 commit intohackforla:developmentfrom
Conversation
Resolves hackforla#2144. The login form had no explicit :focus / :focus-visible styles, so keyboard users could not tell which input or button was focused. This is a WCAG 2.1 SC 2.4.7 (Focus Visible) violation. Add focus rings to AdminLogin.scss covering: - The MUI TextField root via :focus-within (so the wrapper rings up when the underlying input receives focus). - The MUI input itself via :focus-visible (defense in depth for browsers that do not propagate :focus-within reliably to the visual root). - The login button via :focus-visible. The 2px solid #1976d2 ring matches the MUI primary palette already used by the form's TextField label, with a 2px offset so the ring sits outside the existing border. Mouse-driven focus stays unstyled because the rules are gated on :focus-visible / :focus-within. Resources cited in the issue: - https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html - https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
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
1 participant
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.
Resolves #2144.
Problem
The login form had no explicit
:focus/:focus-visiblestyles, so keyboard users could not tell which input or button was focused. This is a WCAG 2.1 SC 2.4.7 (Focus Visible) violation, as called out in the issue.Fix
Add focus rings to
client/src/sass/AdminLogin.scsscovering::focus-withinso the wrapper rings up when the underlying input receives focus.:focus-visiblefor defense in depth on browsers that do not propagate:focus-withinreliably.:focus-visible.The 2px solid
#1976d2ring matches the MUI primary palette the form's TextField label already uses, with a 2px offset so the ring sits outside the existing border.Mouse-driven focus stays unstyled because the rules are gated on
:focus-visible/:focus-withinrather than:focus.Verification
Resources
:focus-visible: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible