Restore visible focus indicator for keyboard tab navigation#6938
Merged
compwron merged 1 commit intorubyforgood:mainfrom May 5, 2026
Merged
Restore visible focus indicator for keyboard tab navigation#6938compwron merged 1 commit intorubyforgood:mainfrom
compwron merged 1 commit intorubyforgood:mainfrom
Conversation
Closes rubyforgood#6065. The blanket `:focus` rule in `public/assets/css/main.css` strips `outline` and `box-shadow` from anchors, inputs, textareas, buttons, and the Bootstrap `.btn` family. With both indicators gone, keyboard users lose all visual feedback while tabbing through forms (the case-contact form was called out specifically) -- a serious WCAG 2.4.7 "Focus Visible" failure for an app whose users include CASA volunteers and supervisors who rely on keyboard navigation. Scope the existing reset to `:focus:not(:focus-visible)` so mouse click-focus stays clean, and add a sibling `:focus-visible` rule that draws a 2px outline in the project blue (#4a6cf7) with 2px offset. Browser support for `:focus-visible` is universal at this point (Chrome 86+, Firefox 85+, Safari 15.4+); pre-`:focus-visible` browsers silently fall back to the still-present `:focus` rule. The `.btn.focus` and `.btn:active`/`.btn.active` selectors are left on the reset rule because they represent intentional Bootstrap state classes, not the `:focus` pseudo-class -- they should not gain a focus ring just for being active. Other `outline: none` rules (`.select-style-{1,2,3} .select-position select:focus` at lines 1226/1286/1340) are scoped to selects that get a `border-color` change as their focus indicator, so they still communicate focus and are out of scope here. Tested locally: tabbing through `/cases/.../case_contacts/new` now shows the blue outline on every input and the submit button; mouse clicks do not.
mvanhorn
requested review from
FireLemons,
compwron and
elasticspoon
as code owners
compwron
approved these changes
May 5, 2026
Collaborator
compwron
left a comment
compwron
left a comment
There was a problem hiding this comment.
feedback: provide screenshots on UI impacting PRs please :)
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
2 participants
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.
Closes #6065
Why
The blanket
:focusrule near the top ofpublic/assets/css/main.cssstrips bothoutlineandbox-shadowfrom anchors, inputs, textareas, buttons, and the Bootstrap.btnfamily. With both indicators gone, keyboard users get zero visual feedback while tabbing through forms - the case-contact form was the example in the issue but it affects the whole app. That is a WCAG 2.4.7 (Focus Visible) failure on a tool whose users include CASA volunteers and supervisors who do rely on keyboard navigation.What
Scope the existing reset to
:focus:not(:focus-visible)so mouse click-focus still looks clean, and add a sibling:focus-visiblerule that draws a 2px outline in the project blue (#4a6cf7) with 2px offset..btn.focusand.btn:active/.btn.activeare left on the reset rule because those are Bootstrap state classes, not the:focuspseudo-class - they shouldn't gain an outline just for being the active item.Notes
:focus-visiblebrowser support is now universal (Chrome 86+, Firefox 85+, Safari 15.4+). Older browsers fall back silently to the still-present:focusrule.outline: nonedeclarations later in the file (.select-style-{1,2,3} .select-position select:focusat lines 1226 / 1286 / 1340) are scoped to styled selects that changeborder-coloron focus, so they still communicate focus and are out of scope here.Verification
bin/dev, log in asvolunteer1@example.com, navigate to a case, click "Create New Contact" and tab through the form - every input and the submit button now shows the blue outline. Mouse clicks do not.