angular / angular/components

Demo bug: expandable row table example is not keyboard or screen reader accessible

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

説明

#### What is the expected behavior?
1. It must be possible to expand and collapse table rows in the example by using only a keyboard
2. Roles, states, and properties must be present so that users of screen reader software are aware that the rows can expand and collapse

#### What is the current behavior?
1. It is not possible to expand and collapse table rows in the example by using only a keyboard
2. Roles, states, and properties are not provided to convey the functionality to users of screen reader software

#### What are the steps to reproduce?
1. Using either of the following screen readers
- NVDA 2018.4.1 + Firefox 64
- VoiceOver for IOS (12.1.3) + Safari
2. Open the [table example page](https://material.angular.io/components/table/examples)
3. Use the screen reader to navigate to a table cell in the 'Table with expandable rows' example
4. Observe that the screen reader does not convey any semantics about the current expanded state, or that it is possible to interact with the row to expand the information
5. Press the 'enter' key or space bar and obverse that the row does not expand or collapse

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
- Angular Material Example 7.2.2 located at https://material.angular.io/components/
- NVDA 2018.4.1 + FireFox 64
- VoiceOver for IOS (12.1.3) + Safari (12.1.3)

#### Is there anything else we should know?

Since rows and cells already have roles, it would be best to add a separate control to expand/collapse each row.

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

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

調査の方向性

Material のテーブル例のページから始め、「Table with expandable rows」の例を調査します。現在どのように行がアクティブ化されているかも確認してください。キーボード入力と、記載されている NVDA/Firefox または VoiceOver/Safari の組み合わせで結果を検証します。キーボードで行を展開および折りたたみでき、スクリーンリーダーが関連するロール、状態、プロパティを読み上げれば完了です。

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

評価

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

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

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