bug(MatTooltip): A11y - Screen readers landmark issue with matTooltip
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
#### Reproduction
When using the `matTooltip` screen readers confused about the landmark and duplicate the announcement (e.g. main, list, group etc.).
This can make a lot of confusion for visually impaired users.
https://stackblitz.com/edit/angular-gizwqa?file=src%2Fapp%2Ftooltip-overview-example.html
Steps to reproduce (in the example above):
1. Navigate to the first button with keyboard (using Tab key).
2. Screen reader will announce the new landmark, the button and the tooltip: _My buttons grouping Button1 button Info about the action_
3. Navigate to second and last buttons, in the last button the landmark will be announced again.
4. Navigate only throw 2 last buttons - the screen reader will announce only the button as expected.
5. Navigate to the first button - the landmark will be announced again (and so on the last 3 button).
#### Expected Behavior
Screen readers will announce the landmark only once (when entering to the landmark)
In the example:
- My buttons grouping Button1 button Info about the action
- Button2 button
- Button3 button
#### Actual Behavior
Screen readers duplicated the announcement.
In the example:
- My buttons grouping Button1 button Info about the action
- Button2 button
- My buttons grouping Button3 button
#### Environment
- Angular: 11.0.2 (also in V10)
- CDK/Material: 11.0.1
- Browser(s): Chrome V87
(tested with NVDA in Firefox and worked as expected).
- Screen readers: NVDA V2020.2, JAWS 2020
コントリビューションガイド
調査の方向性
リンクされた StackBlitz を開き、src/app/tooltip-overview-example.html から始めます。記載されたスクリーンリーダーとキーボード操作手順でアナウンスを再現します。landmark のアナウンスに関係する matTooltip の動作を追跡し、その後、例が landmark を一度だけアナウンスし、期待される出力と一致することを確認します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- accessibility, frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100