patternfly / patternfly/patternfly-react

Bug - TreeView - keyboard navigation not working properly for certain variants

オープン
#10,221 コメント 8 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

A11y PF Team Stale
主要言語
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

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

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

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

選択と展開の分離、チェックボックス、アクションに関する TreeView の例から始め、リンクされている CodeSandbox でキーボード動作を再現します。Left、Right、Tab、Shift+Tab を使用している間のフォーカスと tabindex の変化を追跡します;3 つすべてのバリアントでナビゲーションとフォーカスの復帰が一貫していれば完了です。

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

評価

技術スタック
react, typescript
領域
accessibility, frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
静か
明瞭さ
説明が足りない
初心者へのやさしさ
35/100

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

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