angular / angular/components

[Accessibility] Overlay DOM position breaks screen reader focus order for mat-menu

Open
#32,892 1 comment 0 reactions 0 assignees View on GitHub
Accessibility area: material/menu P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

This bug was reported previously (https://github.com/angular/components/issues/10302
) and it seems that there was a fix made for autocomplete and select (https://github.com/angular/components/issues/10302#issuecomment-3574921653) but the issue still exists for menu.

### Reproduction

StackBlitz link:
https://stackblitz.com/angular/qyybdrnxmyx?file=main.ts

Steps to reproduce:
1. Click "Menu". The screen reader focus is moved to Item 1.
2. Navigate back (ctrl+option+left). This moves to the menu itself (no problem there).
3. Navigate back again. This moves focus to "Current build: ...." instead of the original Menu button. On a larger page, this problem will be made worse by all the other elements in between.

### Expected Behavior

A focus-trap should be applied to the overlay, and the rest of the page should be inaccessible while the overlay is displayed, with or without a screen reader.

### Actual Behavior

If you shift focus backwards in a screen reader when a component like MatMenu creates an overlay, it brings you to the bottom of the page instead of to the flyout origin.

### Environment

- Angular: 19.2.10
- CDK/Material: 19.2.19
- Browser(s): Google Chrome Version 145.0.7632.117 (
- Operating System (e.g. Windows, macOS, Ubuntu): macOS Sequoia 15.6

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and its main.ts entry point, then trace the mat-menu overlay and focus behavior in the Angular components source. Confirm the reproduction with a screen reader and use the expected backward-navigation path as the done criterion: focus returns to the originating Menu button and the background is inaccessible while the menu is open.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.