angular / angular/components

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

オープン
#32,850 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る
Accessibility area: material/form-field P4
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされた StackBlitz の再現例と MatFormField の実装から始め、報告で説明されている補助要素と matformfieldlineripple セレクターに焦点を当てます。空の hint と error のコンテンツが hint ラッパーを生成する仕組みを確認し、その後 VoiceOver で、寄与しない要素がスキップされ、期待される input と test text が聞こえる状態で残ることを検証します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
accessibility, frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。