Recommendations for TreeView accessibility

[carmacleod]

Recommendations for improving accessibility for the (experimental) Carbon unstable_Treeview component.

• Add aria-current="true" to the "active" node (PR: feat(TreeNode): set aria-current on current active node #6937)
• Change our Space key behavior to match the Recommended selection model for Selection in multi-select trees in the APG section for keyboard interaction in a TreeView (i.e. Space toggles selection, Enter activates)
• Multi-select contiguous with mouse: Add Shift + click to select contiguous tree nodes from the last selected node to the currently Shift+clicked node (behavior can be tested in Mac Finder tree view, and Windows File Explorer's list view)
  • See also: Add Shift+click selection to Carbon multi-select datatable
• Multi-select contiguous with keyboard: Add Shift + Space to select contiguous tree nodes from the last selected node to the currently focused node
• Disabled items need to take focus (see the APG section on Focusability of disabled controls which specifically mentions Tree items in a Tree View) (PR: feat(TreeView): enable focus on disabled nodes #11402)
• Support Home, End and Ctrl/Cmd+A (See the APG's Keyboard interaction in a TreeView) (PR: feat(TreeView): support additional navigation and selection behavior #11328)
• Support "Type ahead" in TreeView (See the APG's Keyboard interaction in a TreeView) #11859
• Consider also supporting optional keyboard selection shortcuts listed in the Recommended selection model for Selection in multi-select trees in the APG section for keyboard interaction in a TreeView
• Need to have design discussion about these (related) questions:
  • What happens when multiple items are selected and Enter is pressed? In Mac Finder tree view and Windows File Explorer list view, multiple files are opened. Would users expect that behavior?
  • Should "active node" be optional? There are common tree use cases that don't need an "active" node (for example, a tree with no side panel). In these cases, an active node would just be confusing.
• Test Carbon TreeView on mobile. Can parent items be expanded/collapsed by tapping on the triangle? Can items be selected with tap? Can they be multi-selected (if so, how)? Need to write up doc for mobile use of TreeView so that authors know what to expect.

[dakahn]

Regarding click targets from @carmacleod

I agree that we need to do something to increase the click target of expandable treeitems.

I understand that Carbon wants to keep the "don't expand on click" behavior, so here's a suggestion: the Windows Explorer tree expands when you double-click on an expandable treeitem (the Mac Finder kind of does something similar, although double-click "expands" by showing the contents of the folder in a reduced tree). So consider adding "double-click expands" behavior. You might want to make it a prop? i.e. doubleClickExpands or singleClickExpands - depending on which one would be a better default behavior for Carbon use cases. Note that single-click expansion is pretty common for trees, too. Check out these trees:

• https://w3c.github.io/aria-practices/examples/treeview/treeview-1/treeview-1a.html
• https://dequeuniversity.com/library/aria/tree-view
• https://material-ui.com/components/tree-view/