Adding label/description to BlockEditor/DuotoneControl

[andrewhayward]

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 DuotonePicker needs 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 DuotonePicker with an aria-describedby props. Additionally, an aria-label is applied to the DuotonePicker matching the tooltip display value.

The DuotonePicker component is updated to accept the additional aria-describedby prop. (And, as a bonus, the 'unset' option gets a label.)

Testing Instructions

• Add an image in the editor
• Open the 'Apply duotone filter' popup
• Confirm that the duotone picker has an aria-describedby attribute, and that this points to the description
• Confirm that the duotone picker has an aria-label attribute

[ciampo]

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]

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]

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?

[andrewhayward]

Thanks for the feedback, @brookewp @chad1008.

...should the description be included as well?

As @chad1008 pointed out, the description applies to the listbox control, rather than the individual options, so won't show up when navigating through them. If you focus the listbox, it does then get announced.

So...

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?

Good question. Currently, Popover (used by Dropdown), which renders this, defaults to focusing the first relevant element when it opens. Because the CircularOptionPicker itself isn't currently focusable, this means that focus goes to the first/selected option within it. We could change that, but probably not in this PR.

[ciampo]

Good question. Currently, Popover (used by Dropdown), which renders this, defaults to focusing the first relevant element when it opens. Because the CircularOptionPicker itself isn't currently focusable, this means that focus goes to the first/selected option within it. We could change that, but probably not in this PR.

Probably a good task to work on as a follow-up (although not urgent).

Let's merge this PR in the meantime