bug(mat-menu-trigger): screen reader reads 2 states (expanded and then collapsed) on menu close for lazy load menus
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Description
When using screen readers and lazy load menu, the menu closes faster than the state (aria-expanded) updates so when the trigger refocuses it has an expanded state. Then it changes to collapsed state, which causes reading 2 states.
### Reproduction
StackBlitz link: https://stackblitz.com/edit/2tyoy4?file=src%2Fexample%2Fmenu-overview-example.html
Steps to reproduce:
Use any menu with matMenuContent
### Expected Behavior
NVDA log:
Menu
menu clickable Item 1 menu item
Menu menu button **collapsed** subMenu
### Actual Behavior
NVDA log:
Menu
menu clickable Item 1 menu item
Menu menu button **expanded** subMenu
**collapsed**
### Environment
- Angular: 18.2.6
- CDK/Material: 18.2.6
- Browser(s): Chrome Version 129.0.6668.72
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11
Contributor guide
Research direction
Open the linked StackBlitz reproduction at src/example/menu-overview-example.html and reproduce the issue with a menu using matMenuContent and NVDA. Start from the mat-menu-trigger behavior during close and refocus; done means the trigger is announced only as collapsed, without the intermediate expanded state.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100