angular / angular/components

bug(mat-form-field): VoiceOver reads multiple group, set aria-hidden to supporting elements

Abierto
#32,850 2 comentarios 0 reacciones 0 asignados Ver en GitHub
Accessibility area: material/form-field P4
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

related to #32797

Supporting elements in `MatFormField` should have `aria-hidden="true"` here because they do not contribute to accessibility. I suggest the "Ripple" family of components, in this case selector `matformfieldlineripple` but also in all other places, to automatically add `aria-hidden="true"`.

If hints and errors are empty, `MatFormField` still renders a hint wrapper, which then would read as an empty "group". In this case, this wrapper should also be "aria-hidden="true".

### Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-cudkchbv?file=src%2Fmain.ts
Steps to reproduce:
1. enable VoiceOver
2. navigate through elements

### Expected Behavior

At best, it should should skip the first "input", directly read "Input, edit text" and after that "test"

### Actual Behavior

VoiceOver is reading the following at each navigation step:
1. Input
2. Input, edit text
3. group
4. group

### Environment

- Angular: tested with 18 and 20
- CDK/Material: tested with 18 and 20
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS 26

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción enlazada de StackBlitz y la implementación de MatFormField, centrándote en los elementos auxiliares y en el selector matformfieldlineripple descrito en el informe. Comprueba cómo el contenido vacío de hint y error produce el contenedor de hint y, después, verifica con VoiceOver que se omitan los elementos que no contribuyen y que el input y el texto de prueba esperados sigan siendo audibles.

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
Estancado
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.