Accessibility: Make text alignment items radio menu items. #19233
Conversation
Pass a role from the alignment toolbar to the dropdown menu. Make the dropdown menu aware of this role on each control and set it if present. Also set aria-checked on the active control if the role calls for it. Fixes #18721.
MarcoZehe requested review from ajitbohra, chrisvanpatten, ellatrix, jorgefilipecosta, talldan and youknowriad as code owners
gziolo added [Focus] Accessibility (a11y) 
There was a problem hiding this comment.
It all makes sense. I guess I missed it completely when converting the alignment options to the dropdown. I think we have the same logic covered already in the MenuItem component, so it would be a good idea to use this component rather than the IconButton. The challenge here is that those block alignment toolbar (groups) support isCollapsed flag. When they aren't collapsed, they should be regular IconButton without the role applied. The easiest way to move forward would be to apply menuitemradio role conditionally and move forward with your proposal. What do you think?
Yes, that makes sense. I will add that bit, hoping it will pass. :-) However, I have a problem currently that the conditional role is not yet being applied to those icon buttons. So when I try this PR on gutenberg.run, it is still a normal menu item, and aria-checked is not set at all. So I am not sure why. |
packages/block-editor/src/components/alignment-toolbar/index.js Outdated
Show resolved
Hide resolved
Awesome work, congrats on your first code contribution to Gutenberg 🎉 |
Description
Pass a role from the alignment toolbar to the dropdown menu. Make the dropdown menu aware of this role on each control and set it if present. Also set aria-checked on the active control if the role calls for it. Fixes #18721.
How has this been tested?
Screenshots
Types of changes
Bug fix.
Checklist: