feat: add a selectable attribute to/in TreeItem

[m4thieulavoie]

More detail here

🙋 Feature Request

My team would like to be able to provide a custom non-selectable item as a child of the TreeItem. In our specific context, we want to use an Empty State component that is custom to our design system.

🤔 Expected Behavior

A new attribute allows for us to disable the selection of a given TreeItem

Here's an example of what we want to be possible

TreeView
  TreeItem
    TreeItem
    TreeItem
    TreeItem
  TreeItem
    EmptyState <----- Should not be toggleable or interactive

😯 Current Behavior

Any kind of TreeItem is selectable no matter what, with the exception of being disabled

💁 Possible Solution

🔦 Context

💻 Examples

[chrisdholt]

Thanks @m4thieulavoie for the feature request. I think it would be great to hear a bit more about your specific scenario. Our current tree view and therefore tree items are built to follow the specification outlined in the ARIA practices documentation, though I do see that the treeitem role inherits aria-disabled - so it seems like there should be something called out in the spec for this.

We may need to do some investigation to see how and if we can light something up like this up in an accessible way.

[m4thieulavoie]

@chrisdholt what my team wants to achieve is have a TreeView for some "groups" of contact. Each item on the root level is effectively a group that expands to contacts under that group. However, there are cases where the contact list is empty and they'd like to show an EmptyState component (effectively an icon/heading/paragraph wrapped in a web component) under the header.

My initial hacking session with the TreeView and TreeItem from FAST made me realize it is absolutely possible to achieve. The only blocker left is the fact that the TreeItem can be selected, which adds styling and triggers an event unnecessarily. Hence this me opening up this issue :) I like the idea @scomea brought (see above discord link) to add a isSelectable attribute to disable this selection behavior at will.

I hope it was a bit clearer!

[chrisdholt]

@chrisdholt what my team wants to achieve is have a TreeView for some "groups" of contact. Each item on the root level is effectively a group that expands to contacts under that group. However, there are cases where the contact list is empty and they'd like to show an EmptyState component (effectively an icon/heading/paragraph wrapped in a web component) under the header.

My initial hacking session with the TreeView and TreeItem from FAST made me realize it is absolutely possible to achieve. The only blocker left is the fact that the TreeItem can be selected, which adds styling and triggers an event unnecessarily. Hence this me opening up this issue :) I like the idea @scomea brought (see above discord link) to add a isSelectable attribute to disable this selection behavior at will.

I hope it was a bit clearer!

I'll take a look at the recommendation - I want to be careful to focus on a solution without yet understanding the implications for AT and keyboard users. For instance, should this rather just utilize aria-disabled as it's an existing and valid property? If so, should focus even fall on the item? I think correctly fixing this stale PR (mine :| ) would likely help solve the issue as well. I think the two may be related

[chrisdholt]

@m4thieulavoie following up on this, I think there's likely two things we need to do to address this scenario:

1. Address the issue called out in Selected item deselects on click in TreeItem.ts #4004
2. Leverage aria-disabled to denote disabled tree items (https://w3c.github.io/aria/#treeitem). I'm going to reach out to a couple a11y folks on our side as I can't find the answer to one important question: "Should focus fall on disabled tree items or not?"

I'll update this with my findings for the second point above!

[chrisdholt]

@eljefe223 can you pick this up? Please take a look at the above comment for scope

[chrisdholt]

Update on 2 above - per the specification, specifically as it pertains to "focusability of disabled controls", we should keep disabled tree items focusable: https://w3c.github.io/aria-practices/#kbd_disabled_controls