[Feature Request]: Support expanding/collapsing TreeNodes without selecting them

[janhassel]

The problem

As of right now, when a user clicks the caret of a TreeNode to expand or collapse it, the node is also automatically selected. This can lead to issues when selecting a TreeNode performs compute-expensive actions, moves elements on a page or opens files.

https://github.com/carbon-design-system/carbon/assets/28265588/92216368-2997-4fee-8067-6dbe998f839a

The solution

It would be great if the selection and toggling could be decoupled, at least optionally with a prop.

Examples

The "navigation" example of the WAI-ARIA Authoring Practices demonstrates this behavior: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/

https://github.com/carbon-design-system/carbon/assets/28265588/57f5dc8a-843d-44ba-9db5-ca03572c615d

Application/PAL

No response

Business priority

None

Available extra resources

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[tay1orjones]

This makes sense to me, the click handlers for the chevron and the node are already separated. I agree that it makes sense for this to be behind a prop.

It might be as easy as calling e.preventDefault() in the chevron click handler if the prop is turned on. This would prevent it from bubbling upwards to the click handler placed on the parent li that controls selection.

[github-actions[bot]]

The Carbon team has accepted this proposal! Our team doesn’t have the cycles to work on this now, so we are requesting community contributors. Please see the labels for roles that are needed. If you are willing to help out, comment below and we will get in touch!

[OddDev]

Remember that the keyboard navigation and the focus game are a bit different on such. The tree is one tab index, and the arrow keys do the movement within. I do not know whether the component is currently built for that. If not, this would add a lot of complexity.

Check out the WAI-ARIA example as provided to understand the implications.

[OddDev]

Remember that the keyboard navigation and the focus game are a bit different on such. The tree is one tab index, and the arrow keys do the movement within. I do not know whether the component is currently built for that. If not, this would add a lot of complexity.

Check out the WAI-ARIA example as provided to understand the implications.

If the keyboard navigation is currently off, I'd propose to create another ticket for that first.

Key	Function
Enter or Space	Performs the default action (e.g. onclick event) for the focused node which is to activate the link, opening its target page. Moves focus to the h1 element in the newly loaded content. Note: Moving focus is optional behavior. Please read the above accessibility feature sections for details.
Down arrow	Moves focus to the next node that is focusable without opening or closing a node. If focus is on the last node, does nothing.
Up arrow	Moves focus to the previous node that is focusable without opening or closing a node. If focus is on the first node, does nothing.
Right Arrow	When focus is on a closed node, opens the node; focus does not move. When focus is on a open node, moves focus to the first child node. When focus is on an end node, does nothing.
Left Arrow	When focus is on an open node, closes the node. When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node. When focus is on a root node that is also either an end node or a closed node, does nothing.
Home	Moves focus to first node without opening or closing a node.
End	Moves focus to the last node that can be focused without expanding any nodes that are closed.
a-z, A-Z	Focus moves to the next node with a name that starts with the typed character. Search wraps to first node if a matching name is not found among the nodes that follow the focused node. Search ignores nodes that are descendants of closed nodes.
* (asterisk)	Expands all closed sibling nodes that are at the same level as the focused node. Focus does not move.

[github-actions[bot]]

The Carbon team has accepted this proposal! Our team doesn't have the capacity to work on this now, so we are requesting community contributors. Please see the labels for roles that are needed. If you are willing to help out, comment below and we will get in touch!