patternfly
feat(TreeView): add support for disabled TreeViewListItems
What: Closes #11893
Still needs some testing and definitely requires a styling update. Functionally the disabled props will work, but they will not look any different.
Preview: https://pf-react-pr-12140.surge.sh
A11y report: https://pf-react-pr-12140-a11y.surge.sh
TLDR of this comment: how we currently have our TreeView component setup, the way this PR goes about disabling stuff might be one of the better ways to handle it.
The longer story:
So I tried testing out with NVDA a bit as well and looking a little more, and at least based on whatever settings I have set in both NVDA and VO, the interaction experiences are fairly different. In NVDA I can use arrow keys alone to navigate the tree view items, i.e. arrow keys will essentially focus the button elements within each tree item (whether it be the entire button that expands, or separately the expand button and selectable button).
VoiceOver from what I can tell I need to use VO keyboard shortcuts to navigate since it's being announced as a table, in which case my previous comment of it being difficult to tell that there are separate expand/select actions still seems to stand (and in that case, the disabled state may not get announced since VO focus i on the tree item, not the button element within the tree item.
Though NVDA can get a bit complicated as well when navigating via their shortcuts; if I use NVDA navigation within the treeview and try to move browser/system focus to the treeitem that has NVDA focus, I still have to press the Tab key to place focus on the actual button element to interact properly. I can't be sure if this is how a user would actually interact/navigate in a treeview, though.
As an addendum to one of my previous comments, making the li[role="treeitem"] element aria-disabled="true", the button elements within that treeitem element inherit that state it looks like (both in VO and NVDA). That could work most of the time, but maybe not always.
FWIW, WCAG has this navigation tree view example that has a separate selection/expansion sort of implementation. Essentially, the caret for expansion isn't in a semantic element, it looks to rely solely on mouse clicking the icon to expand it without selection while keyboard users need to use left/right arrow keys to expand/collapse. Also their expected keyboard interactions can e found on their tree view pattern page.
