Circular option picker: incorrect usage of Tooltip

[afercia]

Description

Similar to #66271, #68591 and #68597 where a Tooltip component wraps a Button that uses an explicit aria-label attribute instead of the label prop.

This is unnecessary and introduces a risk where the visibel tooltip text mismatches the accessible name determined buy the aria-label attribute.

Additionally, the Ariakit-based Tooltip adds a dynamic aria-describedby attribute. As such, the accessible name and description repeat the color name unnecessarily. For example the button would have:

• aria-label="Color: Accent"
• aria-describedby: pointint to a tooltip with text Accent

This way, screen readers would announce the color name twice, the first time as part of the accessible name, the second time as the accessible description:

In this case, an additional accessibility problem is that the visible tooltip text mismatches the actual accessible name, This is a problem for sighted screen reader users and for voice control / speech recognition software users. For example, voice control users would see a tooltip with text Accent and may try to issue a voice command such as click Accent. That won't work because the actual accessible name is Color: Accent.

Worth reminding the tooltip should only be used to visually expose the actual accessible name of an interactive control.

Step-by-step reproduction instructions

• Use a screen reader. Alternatively inspect the DOM.
• Select a Paragraph block and click the text color setting in the settings pane;.
• The color picker opens.
• Navigate to one of the circular color buttons.
• Observe when a color is focused a tooltip appears where the text is the color name.
• Observe the screen reader announces the accessible name e.g. Color: Accent, and then the accessible description e.g. Accent.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure