angular / angular/components

bug(mat-menu-trigger): screen reader reads 2 states (expanded and then collapsed) on menu close for lazy load menus

Open
#29,844 0 comments 0 reactions 0 assignees View on GitHub
area: material/menu P3
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.