Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Components: Split MenuItem label and description for accessibility #69372

Open
wants to merge 3 commits into
base: trunk
Choose a base branch
from

Conversation

im3dabasia
Copy link
Contributor

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
Screenshot 2025-02-28 at 10 37 46 PM Screenshot 2025-02-28 at 10 45 38 PM

|

Before After
Screenshot 2025-02-28 at 10 41 07 PM Screenshot 2025-02-28 at 10 35 56 PM

Copy link

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.

@shail-mehta shail-mehta added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components labels Mar 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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