Adding label/description to BlockEditor/DuotoneControl#54473
Conversation
There was a problem hiding this comment.
This is testing well at a first glance!
@andrewhayward could you merge/rebase in order to solve conflicts and include changes from #54468 ? That way we'll be able to take a final look at this. Thank you!
Also, it looks like similar improvements could be made to the DuotonePicker in the global styles filters panel and gradient palette's panel
brookewp
left a comment
There was a problem hiding this comment.
I only get the label and unset button via screenreader when opening the duotone dropdown. Is it expected, or should the description be included as well?
chad1008
left a comment
There was a problem hiding this comment.
This looks good to me as well, though I do second @brookewp's question regarding screen readers. I also jump directly to Unset and see that label when navigating into the Duotone picker.
If I then navigate out of the current group (ctrl + option + shift + uparrow in VoiceOver, iirc) the actual ColorPicker is focused by the virtual cursor, and that does read out the correct description. So I suppose for me question would be do we want the virtual cursor to jump right to the first option (i.e. Unset)? Or to the ColorPicker itself, to highlight that description initially?
|
Thanks for the feedback, @brookewp @chad1008.
As @chad1008 pointed out, the description applies to the So...
Good question. Currently, |
…tor_duotonecontrol
Probably a good task to work on as a follow-up (although not urgent). Let's merge this PR in the meantime |
What?
This PR ensures that the main duotone picker found in the image duotone filter panel has an identifying label and relevant description.
Why?
As per #54055, every
DuotonePickerneeds to have an appropriate contextual label.How?
An ID is generated and assigned to the node containing the popup description. This is linked to the
DuotonePickerwith anaria-describedbyprops. Additionally, anaria-labelis applied to theDuotonePickermatching the tooltip display value.The
DuotonePickercomponent is updated to accept the additionalaria-describedbyprop. (And, as a bonus, the 'unset' option gets a label.)Testing Instructions
aria-describedbyattribute, and that this points to the descriptionaria-labelattribute