angular / angular/components

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

Open
#32,850 2 comments 0 reactions 0 assignees View on GitHub
Accessibility area: material/form-field P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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

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

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and the MatFormField implementation, focusing on the supporting elements and the matformfieldlineripple selector described in the report. Check how empty hint and error content produces the hint wrapper, then verify with VoiceOver that non-contributing elements are skipped and the expected input and test text remain audible.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.