angular / angular/components

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

Ouverte
#32,892 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
Accessibility area: material/menu P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et son point d’entrée main.ts, puis suivez l’overlay mat-menu et le comportement du focus dans le code source des composants Angular. Confirmez la reproduction avec un lecteur d’écran et utilisez le parcours de navigation arrière attendu comme critère de fin : le focus revient au Menu button d’origine et l’arrière-plan est inaccessible tant que le menu est ouvert.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
accessibility, frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.