Skip to content

react-aria-components Tree is slow to collapse by keyboard #9546

@Sidnioulz

Description

@Sidnioulz

Provide a general summary of the issue here

Keyboard navigation with RAC Tree is slower than strictly necessary, because you can't navigate to a parent quickly by pressing ArrowLeft.

🤔 Expected Behavior?

GitHub Primer and the W3C APG for TreeView both navigate to the nearest parent when collapsing whilst on a leaf node or on an already collapsed branch. This greatly speeds up navigation speed.

😯 Current Behavior

The RAC tree component (and underlying gridlist model) does nothing when pressing the collapse key (ArrowLeft/ArrowRight depending on LTR/RTL) whilst on a non-collapsible item.

So that means a user must ArrowUp all the way to the top of the current tree level in order to collapse it. That is slow, and makes it hard to navigate quickly to completely unrelated parts of a tree.

💁 Possible Solution

I'd like to allow ArrowLeft to navigate to the nearest parent, so that the user can keep pressing ArrowLeft to quickly return to the root of the tree, similarly to the APG and GitHub Primer's implementations.

🔦 Context

ArrowLeft and ArrowRight are also used to navigate to actions on a tree item. This is a fairly different choice to Primer's (who use a keyboard shortcut to trigger a secondary actions menu, on account of screen reader support issues with VoiceOver).

Redefining the behaviour of ArrowLeft would complicate this other form of navigation, so any change could be made behind an opt-in prop to useTreeState and useGridListItem.

🖥️ Steps to Reproduce

  1. Run your own Storybook
  2. Navigate to the RAC Tree stories
  3. Position yourself on a leaf
  4. Press ArrowLeft and notice nothing happens

Version

react-aria-components 1.14.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Linux

🧢 Your Company/Team

Storybookjs/Storybook

🕷 Tracking Issue

storybookjs/storybook#31267

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions