fix(button): give buttons a visible keyboard focus indicator - #8314
Draft
talissoncosta wants to merge 2 commits into
Draft
fix(button): give buttons a visible keyboard focus indicator#8314talissoncosta wants to merge 2 commits into
talissoncosta wants to merge 2 commits into
Conversation
`.btn:focus-visible` set `box-shadow: none`, removing Bootstrap's focus ring without replacing it, so every button in the app showed nothing on keyboard focus. Text buttons partly got away with it via the underline on `.btn-link`; icon-only buttons showed nothing at all. Replaced with the outline BareButton already uses, so the two primitives agree. WCAG 2.4.7. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Focus persists after a mouse click, so `:focus` left buttons looking pressed until the user clicked elsewhere. `:focus-visible` limits the styling to keyboard and programmatic focus. Revives the change from #7437, which was closed unreviewed; that branch predates #7402 and no longer rebases cleanly. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
the
front-end
4 tasks
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.
docs/if required so people know about the feature.Changes
.btn:focus-visiblesetbox-shadow: none, removing Bootstrap's focus ring without putting anything in its place. Every button in the app therefore shows nothing when it takes keyboard focus. Text buttons partly get away with it because.btn-link:focusadds an underline; an icon-only button has no text to underline, so it shows nothing at all, which reads as the button being skipped by Tab.It came in with #2289, the Bootstrap upgrade, and survived #7402, so it looks like a cosmetic removal of Bootstrap's glow rather than a decision about focus.
Two commits, separable:
BareButtonalready uses (2px solid var(--color-border-action),outline-offset: 2px), so the two primitives agree. WCAG 2.4.7.:focusto:focus-visible. Focus persists after a mouse click, so:focusleft buttons looking pressed until the user clicked elsewhere. This is the change from fix(button): use :focus-visible for hover-bg, drop click-focused dark state #7437, which was closed unreviewed; that branch predates fix(button): centre icons natively, fix hover and disabled states #7402 and no longer rebases cleanly, hence a fresh one. Drop this commit if you would rather keep it separate.Left alone:
.dark .btn-link:focus, which only keeps the background transparent and cannot cause a pressed look.How did you test this code?
Not yet, which is why this is a draft. It touches every button on every screen, so it wants a visual-regression run and a look at the two cases most likely to clip: icon buttons inside table cells, and buttons in tight flex rows where
outline-offsetmay overlap a neighbour.Found while reviewing #8044, where an icon-only remove button appeared to be missing from the tab order.