Components: Split MenuItem label and description for accessibility

[im3dabasia]

What?

Closes #58720

This PR updates the MenuItem component to properly separate its accessible name (children text) and accessible description (info text). Previously, both children and info were combined into the accessible name, leading to overly long and unclear labels for assistive technology users.

Why?

The info text was incorrectly included in the accessible name, causing issues such as:

• Overly long and confusing labels, making screen readers harder to use.
• Difficulties with voice activation, as users had to speak the full label, including the extra info.

How?

• Keeps children as the accessible name and references info via aria-describedby for a separate description.
• Uses aria-hidden="true" to prevent redundancy while preserving the visual design.

Testing Instructions for Keyboard

1. Add a new post in the editor.
2. Insert an image block.
3. Click on the link or alignment options.
4. Using the Tab key, navigate down to a menu item that has both a dark label (the title) and a lighter label (the description).
5. Verify that the screen reader now correctly treats the dark label as the accessible name and the lighter label as the description.
6. Ensure that navigating with Tab and Arrow keys moves focus correctly between menu items.
7. Confirm that the name includes only the children, and the description (info) is announced separately.

Screenshots

Before	After

|

Before	After

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: im3dabasia <[email protected]>
Co-authored-by: afercia <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.