patternfly / patternfly/patternfly-react

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

Open
#10,221 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

A11y PF Team Stale
Dominant language
TypeScript
Stars
862
Forks
392
Avg merge
4d 8h
Merged PRs (30d)
9

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the TreeView examples for separate selection and expansion, checkboxes, and actions, and reproduce the keyboard behavior in the linked CodeSandbox. Trace focus and tabindex changes while using Left, Right, Tab, and Shift+Tab; done means navigation and focus return consistently across all three variants.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.