BlockVariationTransforms: Improve clarity and labeling

[afercia]

Description

The BlockVariationTransforms component of the block editor is used to show variations of a block, for example for the Group block. It conditionally renders 3 different UIs, depending on some conditions:

• By default, it renders a radio buttons group labeled 'Transform to variation'.
• If the variations are more than 5, it renders icon buttons within a fieldset with a visually hidden legend 'Transform to variation'.
• If the variation icons are not unique, it renders a button labeled 'Transform to variation' with a dropdown menu labeled 'Transform to variation'.

Screenshot:

All these three UIs can be improved fo rbetter clarity and labeling.

Radio group

• As a user, looking at this Ui, I don't understand what it is about. There is no visible text to explain these are variations of the block. I only see four icons that don't even look like buttons. These four controls are wrapped within a role=radiogroup with an aria-label 'Transform to variation'. That'e the equivalent of a native fieldset <legend> element. The hidden group name is less than ideal. It should be visible to clearly indicate what these controls are. Worth also noting that all the other settings sections do have a visible title.
• Under the hood, these four buttons have a `role=radio'. They are the equivalent of native radio buttons. In fact, they also behave like radio buttons where keyboard selection works with arrow keys. However, the keyboard interaction isn't predictable because the visuals doesn't really clarify these work like radio buttons.
• The labeling of the radio buttons is less than ideal. Each label changes dynamically depending on the checked state. For example, 'Transform to Row' changes to only 'Row' when checked. Labels provide the accessible name of a control and they should never change dynamically/ To illustrate visually, in an equivalent group of native radio buttons this would be a weird behavior also visually, where the labels change depending on the state. Not the best way to use labels. Screenshot:

Icon buttons

• As above, there's no visible text to clarify what these buttons are about.
• The buttons use both a label prop and an aria-label and they mismatch. Looking at the code, this seems intentional but it's less than ideal. For example, while the tooltip text shows 'Transform to Row', the actual accessible name is aria-label="Row". A mismatch between visible label and accessible name is a barrier for assistive technology users, for example sighted screen reader users or speech recognition software users.

Dropdown menu

• This is the only case where some visible text clarifies what this control is about: 'Transform to variation'. However, the toggle button also shows a tooltip that just repeats the button visible text:

• In the dropdown menu, each menu item is a button. These buttons also show the variation description. However, the description is placed within the button text so that it contributes to compute the button accessible name, which is less than ideal. A button text that says, for example Group Gather blocks in a container. is just confusing. Accessible name and description should always be separated. This appears to be a more general problem with the MenuItem component, where the prop info just adds text to the button content. To illustrate visually, this would be the equivalent of a native button element with some really confusing text like in this example screenshot:

(literally with no space between Group and Gather)

Step-by-step reproduction instructions

• Go to the site editor and select a Group block.
• Observe the variations in the block inspector.
• Observe all the issues pointed out in this issue description above.
• Alter the Group block variations and add a few more variations so that they are more than 5. Build and refresh the editor.
• Observe the variations are now icon buttons.
• Observe all the issues pointed out in this issue description above.
• Alter again the variations and make at least two of them use the same icon. Build and refresh the editor.
• Observe the variations are now a dropdown menu.
• Observe all the issues pointed out in this issue description above.

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

[afercia]

While working on this, I noticed a visual issue that'd be nice to address. When the variations are rendered with a dropdown menu, the gap between the menu toggle button and the menu is too large. This isn't the expected gap and hte menu feels too disconnected from its toggle:

I think this needs to be fixed by making sure all three components that render the variations are placed within the same wrapper that uses the same CSS class and padding.

[afercia]

Noting that even after recent changes from #60220 the 'selected' and 'focused' states are still based on color only. As pointed out several tims in the history of this project, color only is not sufficient. The states must be distinguished with a different shape.

For users with color perception impairments or environments where there's no color e.g. Windows High Contrast more, the two outlines are identical.

Screenshot sfrom latest trunk: