angular / angular/components

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

Abierto
#32,892 1 comentario 0 reacciones 0 asignados Ver en GitHub
Accessibility area: material/menu P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### 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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción vinculada de StackBlitz y su punto de entrada main.ts; después, sigue el overlay de mat-menu y el comportamiento del foco en el código fuente de los componentes de Angular. Confirma la reproducción con un lector de pantalla y usa la ruta esperada de navegación hacia atrás como criterio para darlo por terminado: el foco vuelve al Menu button de origen y el fondo es inaccesible mientras el menú está abierto.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
accessibility, frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.