[Accessibility] Overlay DOM position breaks screen reader focus order for mat-menu #32892
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 (#10302
) and it seems that there was a fix made for autocomplete and select (#10302 (comment)) but the issue still exists for menu.
Reproduction
StackBlitz link:
https://stackblitz.com/angular/qyybdrnxmyx?file=main.ts
Steps to reproduce:
- Click "Menu". The screen reader focus is moved to Item 1.
- Navigate back (ctrl+option+left). This moves to the menu itself (no problem there).
- 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