Cover: Fix placeholder color options keyboard accessibility #68662
+86
−33
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
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +44 B (0%) Total Size: 1.84 MB
ℹ️ View Unchanged
|
|
Since any UI in the editor should be operable with the keyboard at least for a basic usage, and this UI isn't, I would appreciate this PR to be considered for the next WordPress release. Cc @WordPress/gutenberg-core |
|
Pinging @WordPress/gutenberg-components as well for feedback. |
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.
Fixes #68639
What?
asButtonsset to true, it would be best for it to have arole=groupand appropriate labeling.Why?
How?
In the fist commit
Setting
asButtonsto true makes the circular options picker render the buttons as a a list of buttons that are all focusable and tabbables. This basically removes the arrow keys navigation that is in use when the options are rendered as a listbox, which conflicts with WritingFlow.In the second commit.
I just wanted to set a
role="group"and a meaningfularia-labelwhenasButtonsis true. This is important because otherwise the options are just a series of buttons. Adding arole="group"to the wrapper makes them logically grouped and thearia-labelcommunicates users what this group of buttons is about.However, I discovered that adding
aria-labeldidn't render an aria-label attribute whenasButtonsis true. Turned out the aria-label and aria-labelledby props were only allowed for theListboxCircularOptionPickerand not forButtonsCircularOptionPicker.I'm not that familiar with TypeScript and I had to make a series of changes to make this work that honestly I don't fully understand. I would greatly appreciate some eyes from contributors more familiar than me with TypeScript.
Note that I had to make changes to the allowed types also for the components that consume
CircularOptionPickerwhich are:ColorPalette,DuotonePickerandGradientPicker.To recap;
on trunk, by default the circular option picker renders:
role="listbox"aria-label="Custom color picker."that cab be passed a custom aria-labelInstead, when rendered as normal buttons via
asButton, it renders:aria-labeldoesn't workI just want the
asButtonsversion have arole=groupand anaria-label.Note: to my understanding, this old issue #54055 was aiming to provide a better labeling mechanism for these components but it seems it still needs to be addressed. It would be nice to consider further improvements in the context of that issue.
Testing Instructions
role="group"and anaria-label="Background color".Testing Instructions for Keyboard
Screenshots or screencast