Block switcher menu accessibility and labeling improvements

[afercia]

Description

This came into my mind while providing a11y feedback on #60810

The block switcher opens a dropdown menu that is an ARIA menu pattern. ARIA menus can only contain children with role menuitem, menuitemcheckbox, menuitemradio and, optionally, groups with separators.

Visually, the menu is split into two main groups. Semantically, there are two main groups as well. See attached screenshot to compare the visuals with the accessibility tree.

However, while the first group is labeled 'TRANSFORM TO`, the second group is unlabeled.

As a user, I'm not sure I would understand why there's a visual separation in two groups. What the difference between the two groups is?

Semantically, it doesn't make much sense labeling only the first group. Grouping items together makes only sense if the scope and purpose of the group is clear and meaningful. Is there a good reason to have two main groups in the first place? If there is one, than both groups should be visually and semantically labeled,

Note: the third group with the 'this block is connected' information should be removed as pointed out on #60810 (comment)

Step-by-step reproduction instructions

• Select a block.
• Open the block switcher from the block toolbar.
• Note: if the block is connected to external sources via the Bindings API, it will show a third group at the bottom. This is not much relevant for this issue.
• Observe the menu is visually split in two groups;
• Observe the second group is not labeled.
• Optionally, inspect the accessibility tree in your browser dev tools and observe the secodn group is unlabeled.

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

[sarthaknagoshe2002]

@afercia
To improve clarity and accessibility, I recommend labeling the second group in the block switcher dropdown as "Advanced Transformations", complementing the existing "Transform To" label for the first group.

Maintaining this separation is necessary as the groups serve distinct purposes: the first focuses on basic transformations, while the second offers more advanced or specialized options.

Let me know your thoughts!

[afercia]

@sarthaknagoshe2002 thanks, yes I'd totally agree the second group needs a visible title to be properly labeled. This issue is still waiting for some design feedback though. Cc @WordPress/gutenberg-design

[sarthaknagoshe2002]

Umm I feel we can at least add the label as a temporary fix until we get the design feedbacks for this from the design team.

[sarthaknagoshe2002]

Also, I was not able to reproduce this

Note: the third group with the 'this block is connected' information should be removed as pointed out on #60810 (comment)

[jameskoster]

@afercia did you see the latest designs inhttps://github.com//issues/40208, which propose utilising Menu for this UI? Hopefully this would address most of the a11y issues?

[afercia]

@jameskoster thanks, will comment there.

[sarthaknagoshe2002]

@afercia Do you think that we should move ahead with the changes I suggested as a temporary fix until the new design is implemented?

[afercia]

@sarthaknagoshe2002 personally I'd like to move ahead with your PR. As I commented on the issue with the new design, I'm not sure the new designis any read as it mixes together differenc concept sin the same menu and it should be reconsidered IMHO.

[sarthaknagoshe2002]

@afercia Then lets get the PR merged.

[afercia]

@sarthaknagoshe2002 I'm changing my mind. The more I think at it, the more I lean towards showing all transforms within the same group, with no separation. Thanks for your patience 🙏🏻

Looking a bit more into the logic of this menu, so far it shows some 'priority' transforms that are shown at the top only for some text blocks. When there are both priority transforms and other transforms, the 'rest' of the transforms is shown in a separate group.

While I agree to show the priority transforms at the top, I'm not sure it makes sense to visually and semantically separate the two groups. Why they should be separated in the first place? I would argue that this menu may show other transforms that are conceptually different from ordinary transforms, for example: the block variations (e.g. for a Group block) are conceptually different from ordinary transforms, still they are shown together with all the transforms:

In the screenshot below, from the left, the menus of the blocks: Paragraph, Image, Group, Quote.

Basically I'm not sure why we should show a separation for the priority transforms and not for other logically grouped transforms like the cariations.

At this point I'd tend to think it would be best to simplify and render only oneMenuGroup with no separation.
Cc @jameskoster any objection to removing the separation?

The current PR at #67397 adds a label to the second group but I'm not sure it would be ideal in some cases. Screenshot:

[jameskoster]

I tend to agree that the separation doesn't really add much, if anything it creates confusion by suggesting the transforms are different in some way. It's worse when Styles also appear. The most 'helpful' transforms are listed first, and that seems adequate to me.

I'd welcome more feedback from @WordPress/gutenberg-design though.

[sarthaknagoshe2002]

@afercia Thats completely fine.
I am unsure about why we need or do not need separation but I feel that we should either add the label or remove the separation if separation not needed.
Since, you have suggested to remove the separation I feel lets go your way.
Also, should I continue working on this issue or should we wait for the design feedbacks.

[afercia]

I would suggest to wait a couple days for more design feedback, if needed. Personally I'd lean towards removing the separation.
On a procedural note: design feedback can be provided by any contributor, not just by the contributors who belong to the @WordPress/gutenberg-design group, thanks.

[sarthaknagoshe2002]

@afercia Do you mind providing insights on what exactly needs design feedbacks to close this issue.
I would like to suggest design if possible.

[afercia]

As @jameskoster mentioned, It would be good to have the design team have a look at removing the separation between the groups, which seems the most sensible option.