bug(MatTree): MatTree with interactive elements in each row is not keyboard accessible using a screenreader
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
#### Reproduction
Use StackBlitz to reproduce your issue:
- Components: https://angular-p4bmmy-zxpv6j.stackblitz.io
Steps to reproduce:
1. Navigate to StackBlitz link above on a Windows machine
2. Use the keyboard to interact with the tree by tabbing to a node, pressing enter or space to expand it, then tabbing to a nested checkbox and selecting it. Do not use the mouse.
3. Enable JAWS or NVDA screen reader
4. Attempt to repeat step 2, using the keyboard to interact with the tree
5. Manually expand the tree using the mouse then tab through the elements until you get to a nested checkbox. Press space or enter to select the checkbox.

#### Expected Behavior
Enabling a screen reader should not change the behavior when interacting with the tree using a keyboard. With a screen reader enabled, I should be able to expand a row, tab to a nested checkbox, and select the checkbox using only the keyboard.
#### Actual Behavior
Hitting space or enter appears to send the click event to the first encountered input element, rather than the focused element. In the linked example, this can be either the textbox above the tree or an unfocused checkbox, depending on how you tab through the list. Either way, the focused element doesn't seem to receive the event.
#### Environment
JAWS v2021.2102.34 / NVDA v2020.4 (reproducible with both)
Windows 10 Enterprise Version
Chrome Version 89.0.4389.114
Also tested with Firefox Version 87.0, but was not able to reproduce on FF
コントリビューションガイド
調査の方向性
リンクされた StackBlitz の再現手順から始め、JAWS または NVDA を使用して Windows の Chrome でキーボードのみの手順を繰り返します。スクリーンリーダーの有無での動作を比較し、ネストされたチェックボックスとツリーの上にあるテキストボックスも含めます。完了条件は、フォーカスされた要素が Enter または Space を受け取り、スクリーンリーダー使用時にもツリーがキーボードで引き続きアクセス可能であり、報告されている Firefox の動作が維持されることです。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- accessibility, frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100