patternfly / patternfly/patternfly-react
Bug - TreeView - keyboard navigation not working properly for certain variants
まだ誰も着手していません。
- 主要言語
- TypeScript
- スター
- 862
- フォーク
- 392
- 平均マージ
- 4日 8時間
- マージ済み PR(30日)
- 9
説明
Describe the problem
Namely the treeview with separate expansion and selection, treeview with checkboxes, and treeview with actions.
This is tricky because typically Left and Right arrow keys will either expand/collapse a node if it's not expanded, or it'll traverse to the parent/first child if it is expanded. May be difficult to do that when we need to traverse left and right to go to/from the expansion toggle and the node checkbox/button or an action button.
Another issue may be that the tabindexes don't get updated correctly, or at least they don't seem to. Only the expansion toggles get their tabindex updates to or from -1 and 0. I was sort of expecting that pressing Right Arrow to go to the node content in the "separate selection and expansion" example would update the expand toggle to tabIndex of -1, meaning that if I tab out of the tree view then Shift + Tab back into it, the node content recieves focus, not the expanion toggle.
How do you reproduce the problem?
Provide steps to reproduce. A codesandbox demonstrating the problem is appreciated.
Expected behavior
A clear and concise description of the expected behavior.
Is this issue blocking you?
List the workaround if there is one.
Screenshots
If applicable, add screenshots to help explain the issue.
What is your environment?
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
What is your product and what release date are you targeting?
Any other information?
Jira Issue: PF-91
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
選択と展開の分離、チェックボックス、アクションに関する TreeView の例から始め、リンクされている CodeSandbox でキーボード動作を再現します。Left、Right、Tab、Shift+Tab を使用している間のフォーカスと tabindex の変化を追跡します;3 つすべてのバリアントでナビゲーションとフォーカスの復帰が一貫していれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react, typescript
- 領域
- accessibility, frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 静か
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 35/100