Repository navigation
Focus rings: 1px, with a 1px offset on filled buttons (2.6.1) - #130
Merged
Merged
Conversation
Keyboard focus rings on Button, both ButtonDropdown halves, Capsule, ToggleSwitch, Checkbox, Radio and Badge were 2px with a 2px white offset. They are now 1px, still focus-visible only. Outlined controls put the 1px ring directly on the edge with no offset. Filled buttons (Button primary/danger/warning, Capsule primary/danger, the primary ButtonDropdown trigger) keep a 1px white offset, because a ring in the fill's own colour with no gap is invisible. Bumps the version to 2.6.1. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
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.
Thins the keyboard focus rings from 2.6.0. Version bumped to 2.6.1.
What changes
The focus ring on buttons and other non-text controls was
ring-2 ring-offset-2: a 2px ring with a 2px white gap, which read as a thick double outline. It is now 1px. Rings still show for keyboard focus (focus-visible) only, never on mouse click.Button(secondary, alternative, danger-secondary),Checkbox,Radio,ToggleSwitch,BadgeButton(primary, danger, warning),Capsuleprimary / danger, primaryButtonDropdowntriggerApplies to both
Buttonvariants (<button>andasLink) and both halves ofButtonDropdown.Why filled buttons keep an offset: without a gap, a purple or red ring against a fill of the same colour is invisible, which would fail WCAG 2.4.7. We also tried an inset white ring, but the offset looked better and doesn't need a transparent border that narrows the label area.
Text inputs and select triggers are unchanged: they already focus with a single 1px violet-700 border.
For review
Testing
focus-visiblefocus. Filled buttons render a 1px white offset plus a 1px ring, outlined controls a single 1px ring, and buttons stay 36px tall.yarn test: 109 passed.tsc --noEmit: clean.yarn build: clean.🤖 Generated with Claude Code