-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Preferences Modal: Fix double focus outline in tab item #48996
Merged
Merged
Conversation
This file contains 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
t-hamano
commented
Mar 10, 2023
Comment on lines
+27
to
+28
// Windows high contrast mode. | ||
outline: 2px solid transparent; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This style is required for high contrast mode.
high-contrast.mp4
Size Change: +69 B (0%) Total Size: 1.34 MB
ℹ️ View Unchanged
|
t-hamano
added
[Feature] UI Components
Impacts or related to the UI component system
[Package] Components
/packages/components
CSS Styling
Related to editor and front end styles, CSS-specific issues.
labels
Mar 10, 2023
jasmussen
approved these changes
Mar 13, 2023
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
mirka
added
[Package] Interface
/packages/interface
and removed
[Package] Components
/packages/components
labels
Mar 13, 2023
Thanks for the review, @jasmussen! |
priethor
added
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
and removed
[a11y] Keyboard & Focus
labels
Jul 24, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
CSS Styling
Related to editor and front end styles, CSS-specific issues.
[Feature] UI Components
Impacts or related to the UI component system
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
[Package] Interface
/packages/interface
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.
Related to: #46276, #46796
What?
This PR fixes the double outline when keyboard focus is applied to a tab item in the settings modal.
Why?
The
:focus-visible
pseudo-element style added by #46276 is having an effect.https://github.com/WordPress/gutenberg/pull/46276/files#diff-cff33c80017b395c324705c767723d3c51ebaf23b6c9c1d74ecb674052329a24R72-R74
In the preferences modal, I think this outline should not be intended.
Screenshots or screencast
Before
before.mp4
After
after.mp4