feat(Tree): Aria tree items should support separate expansion and selection

[nathonius]

Feature Description

I'll refer to the multiselect example in the Aria docs: https://angular.dev/guide/aria/tree#multi-selection

Clicking on an item with children (a folder) both selects it and toggles its collapsed/expanded state. This behavior makes it very difficult to select an item inside a folder without also selecting the folder. To see the issue, attempt to select src/main.ts in the multiselect example without also selecting the src directory:

1. Click src to open the src directory, which also selects the directory (not what I was trying to do)
2. Click main.ts to select it
3. Click src again to de-select it, which also collapses it (an extra step to accomplish what I was trying to do)
4. Now main.ts is not visible, but is still selected. The only way to see that it is selected is to re-expand the src directory, which also selects it.

This is counterintuitive; there should be a way to select an item without also expanding its group and a way to expand a group without selecting it. This is possible using the keyboard (right/left arrow keys expand without selecting), but not a mouse.

Use Case

1. A basic file explorer with multiselection.
2. A select all / deselect all / some selected checkbox pattern for folders

[ok7sai]

For mouse use case, it is possible to make the chevron icons separate buttons that triggers the expansion state of a tree node, so that it does not select the tree node when clicking on the node item.

Adev Aria examples are mostly built for showcasing a11y for keyboard usage, so the UX for mouse use might not be the best. We should polish those examples for mouse use cases as well to avoid the confusion. Thanks for the feedback!

[nathonius]

That makes sense. I can use a separate button for collapsing/expanding and disable items I don't want selected. But yes, better documentation is always appreciated. 🙌

[ok7sai]

FYI ngTreeItem also supports [selectable], so for parent nodes that are not supposed to be selected, you can set [selectable]="false" instead of disabling them.

[nathonius]

Oh really? This isn't documented. 👀 https://angular.dev/guide/aria/tree#treeitem

[ok7sai]

Not listed in the guide but in API reference https://angular.dev/api/aria/tree/TreeItem

Maybe instead of listing APIs in the guide, the guide should give a link to the API reference page. Good catch.