a11y: Apply focus style to revision items #57039
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
added
[Focus] Accessibility (a11y)
|
Size Change: +15 B (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
t-hamano
commented
Dec 14, 2023
| @@ -13,8 +13,6 @@ | |||
|
|
|||
| .edit-site-global-styles-screen-revisions__revision-item { | |||
| position: relative; | |||
| padding-left: $grid-unit-20; | |||
| overflow: hidden; | |||
There was a problem hiding this comment.
I had to turn off overflow:hidden in order to display the focus outline correctly. From what I've tested, there doesn't seem to be any problem with removing this style, but if you have any problems please let me know.
t-hamano
commented
Dec 14, 2023
Comment on lines
+79
to
+80
| z-index: 1; | ||
| position: relative; |
There was a problem hiding this comment.
Without this style, the focus outline would be hidden from the timeline line.
t-hamano
requested review from
jameskoster,
jasmussen,
ramonjd and
andrewserong
|
Flaky tests detected in 7758fdf. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7204277667
|
ramonjd
approved these changes
Dec 14, 2023
jameskoster
approved these changes
Dec 14, 2023
|
Thanks for the review, @ramonjd, @jameskoster! |
bph
added
the
[Focus] Accessibility (a11y)
artemiomorales
pushed a commit
that referenced
this pull request
Jan 4, 2024
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.
What?
This PR applies a focus style to revision items in the Global Style Revisions panel.
Why?
I've noticed that users using only the keyboard can't know which revision they're switching to because revision items don't have a focus style.
How?
I removed the style that canceled out the focus style of the button element, and at the same time adjusted the padding so that the focus outline was displayed correctly.
I also added transparent outlines and borders to help users distinguish between revisions even in Windows' high contrast mode. This approach can be seen by searching the Gutenberg project for the keyword
Windows High Contrast mode..Testing Instructions for Mouse
Testing Instructions for Keyboard
tabkey orshift+tabon your keyboard.Screenshots or screencast
c1dc79c0d0be074bdd42c71536192063.mp4
Widows High Contrast Mode
You should be able to see the revision status just as you would if you were not in high contrast mode.
9933b3fae6085c5c71c8ed6d3cd808b6.mp4