mui / mui/material-ui

[menu] SRs not properly announcing expanded state

Open
#34,074 7 comments 0 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

accessibility scope: menu
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Duplicates
  • I have searched the existing issues
Latest version
  • I have tested the latest version
Current behavior 😯

If you create a menu and apply the proper aria properties, the screen reader does not properly announce when the menu is expanded. The screen reader announces the menu is collapsed however.

I have verified with NVDA (Windows) and the OS X VoiceOver.

Expected behavior 🤔

The screen reader should announce when menu is expanded by clicking the related button or pressing enter via the keyboard.

Steps to reproduce 🕹

Steps:

  1. Go to https://mui.com/material-ui/react-menu/ and observe the Basic Menu example.
  2. Use the CodeSandBox button to run the code associated with the button and menu (https://codesandbox.io/s/u2u8cx?file=/demo.js)
  3. Using a Screen Reader (i.e. NVDA with Windows), you will notice the menu is initially announced as COLLAPSED (which is correct).
  4. Click the button or press enter on the button. You will notice the screen reader does not announce the menu as EXPANDED. However, the aria-expanded property is properly set.
Context 🔦

No response

Your environment 🌎
npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.