MenuItem: split content and info prop into accessible name and accessible description

[afercia]

Description

The MenuItem component conent is actuall determined by its children and the value of the info prop.

As such, both the content and the info end up being the actual label of this UI control, i.e. the accessible name.

This is less than ideal because the info is typically used to provide a visual descriotion of the control label. However, thie description is part of the name of the control, thus labeling the control with extraneous information. Generally:

• A control's should be short and sufficiently meaningful.
• An additional description may be provided separately from the accessible name. It should be rendered into a separate element with an ID that is referenced via aria-describedby.

Puttint together the name and description provides users with a label that is semantically too long and confusing. Asssistive technologies use the label (name) which in many cases is just too long and may even be a barrier for some users.

Examples:

The URL input UI for images shows some preset suggestions in a menu with menuitems. The 'Expand on click` last item was added in https://github.com/WordPress/gutenberg/pull/57608

Visually, the label 'Expand on click' and the description 'Scale the image with a lightbox effect.' are separated and style differently:

However, that's only visuals. Both strings are the actual content of the MenuItem button. As such, the accessible name of the menu item is:

Expand on click Scale the image with a lightbox effect.

Aside: I don't think a descriptive text in the menu item should end with a period.

That string is less than ideal:

• Too noisy for screen reader users.
• Too long to be easily activated with a voice command for speech recognition software users.
• Semantically not ideal as it adds a description into the name.

There are many other cases where a menu item has descriptions that are actually rendered as part of the name. For example: block alignment controls:

Options menu items, etc.:

Also in these cases, such long accessible names are less than ideal, e.g.:

Top toolbar Access all block and document tools in a single place

Looking at the code, it appears the only purpose of the info tet is to provide additional text that looks like a description. There's no semantics at all.

https://github.com/WordPress/gutenberg/blob/1fb5110da6444424202bcfe4d8c611aaa9594ba7/packages/components/src/menu-item/index.tsx#L42-L45

Originally introduced in https://github.com/WordPress/gutenberg/pull/10802

Step-by-step reproduction instructions

• Inspect in your browser dev tools one of these menu items with descriptions.
• Observe the visual description is avtually part of the item label (its content) thus determining the accessible name

Screenshots, screen recording, code snippet

More screenshots of how these long accessible names are announced by a screen reader:

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]

Disabling CSS helps understand also visually these MenuItems (under the hood they are button elements) have too long labels. I'm not sure no one would ever craft buttons with such long text: