react-arborist icon indicating copy to clipboard operation
react-arborist copied to clipboard

Published 20 hours ago • verified publisher icon brimdata

Add keyboard interaction and ARIA roles

Open angrycat9000 opened this issue 2 years ago • 5 comments

I saw your post on reddit. Nice tree control.

I wanted to give a suggestion that could help take it to the next level. Right now it is very mouse oriented. However, not everyone may prefer to use the mouse. If you look up the the tree role on MDN it documents keyboard interactions for a tree. That way users can operate it without taking their hands off the keyboard if they prefer (similar to Ctrl-C Ctrl-V for copy and paste).

angrycat9000 avatar Mar 21 '22 23:03 angrycat9000

Thank you for your kindly worded suggestion.I plan to work on this very soon. This also came up on hacker news.

jameskerr avatar Mar 21 '22 23:03 jameskerr

If you're looking for prior art which might be helpful, React-Aria has some examples of hook-based aria implementations. Even when just used as implementation guides, it's been useful for me.

esmevane avatar Mar 22 '22 00:03 esmevane

Definitely +1 for this. I haven't found a tree component which would support all the use-cases you have. The a11y is the only missing thing for me. Then I can remove this from my should-do-in-the-future OSS list.

Here is the really good writeup how the tree should behave and what roles it should have: https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView

Pustelto avatar Mar 25 '22 15:03 Pustelto

Thanks @Pustelto! I'll reference that as I work on it.

jameskerr avatar Mar 25 '22 15:03 jameskerr

Here's a todo list for this issue:

Keyboard Events

  • [x] Right Arrow
  • [x] When focus is on a closed node, opens the node; focus does not move.
  • [x] When focus is on a open node, moves focus to the first child node.
  • [x] When focus is on an end node (a tree item with no children), does nothing.
  • [x] Left Arrow
  • [x] When focus is on an open node, closes the node.
  • [x] When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
  • [x] When focus is on a closed tree, does nothing.
  • [x] Down Arrow
  • [x] Moves focus to the next node that is focusable without opening or closing a node.
  • [x] Up Arrow
  • [x] Moves focus to the previous node that is focusable without opening or closing a node.
  • [x] Home
  • [x] Moves focus to the first node in the tree without opening or closing a node.
  • [x] End
  • [x] Moves focus to the last node in the tree that is focusable without opening the node.
  • [x] Enter
  • [x] Edits the focused node
  • [x] Type characters
  • [x] Focus moves to the next node with a name that starts with the typed character.
  • [x] If multiple characters are typed in rapid succession, focus moves to the next node with a name that starts with the string of characters typed.
  • [x] *
  • [x] Expands all siblings that are at the same level as the current node.

Multi Selection

  • [x] Space
  • [x] Toggles the selection state of the focused node.
  • [ ] Shift + Down Arrow
  • [ ] Moves focus to and toggles the selection state of the next node.
  • [ ] Shift + Up Arrow
  • [ ] Moves focus to and toggles the selection state of the previous node.
  • [ ] Shift + Space
  • [ ] Selects contiguous nodes from the most recently selected node to the current node.
  • [ ] Control + Shift + Home
  • [ ] Selects the node with focus and all nodes up to the first node. Optionally, moves focus to the first node
  • [ ] Control + Shift + End
  • [ ] Selects the node with focus and all nodes down to the last node. Optionally, moves focus to the last node.
  • [ ] Control + A
  • [ ] Selects all nodes in the tree. Optionally, if all nodes are selected, it can also unselect all nodes.

ARIA Roles

jameskerr avatar Mar 29 '22 03:03 jameskerr