bug(mat-form-field): VoiceOver reads multiple group, set aria-hidden to supporting elements
- 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
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