Add Tree Grid component

[kwilloughby-sf]

Add Tree Grid (https://www.lightningdesignsystem.com/components/tree-grid/).

[tanhengyeow]

@kwilloughby I would be happy to work on this! I have some understanding about the Tree component after working on #1824 😄

[kwilloughby-sf]

Thanks, @tanhengyeow. Please follow the contributing guidelines. Also, I've updated the link I initially posted.

[interactivellama]

Feel free to explore this do a props proposal. This is a large, complicated component and will have features/API from DataTable (such as columns and custom render cells) and from tree (such as nested, normalized data via a getNodes callback)--thankfully those concepts have a precedent in this library, but haven't been tried together yet.

@garygong is working on adding keyboard navigation to DataTable right now, so that logic should be able to be used and brought in once that task is done. #1233

[interactivellama]

Additional Resources

• Lightning tree grid component
• SLDS tree grid blueprint
• ARIA tree grid spec
• ARIA tree grid example

[interactivellama]

The keyboard spec for TreeGrid is undetermined at this time. The follow is background.

Comments from the Accessibility Team

How do you toggle a row?

• Press Tab key to get into the tree grid.
• Optionally, press Up/Down to get into the row that you'd like to toggle.
• If your focus is in a cell, you first have to focus the row, which you can do by pressing the Left arrow key repeatedly until you've moved past the first cell.
• If your focus is on the row itself, it should have a grey background color. Pressing the Left/Right arrow keys should collapse or expand it.

Open Questions (4/24/2019)

• Arrow key navigation - is it weird that it performs an action (expand/collapse) when you get to the start of a row, meanwhile in all other cells it navigates you to other cells?
• Why does expand/collapse only work in Nav mode and not Action mode?
• No visual indicator which mode you’re in
• Not very clear visually when row is focused
• How is the user supposed to know how to interact with this thing?
• “What is the inline edit keyboard patterns for TreeGrid? It does not seem to align with DataTable arrow navigation.”

ARIA spec says

• No separate action and nav modes; row-by-row, then tab through the current row
• Tab takes you through current row’s focusable elements, then out of the data grid Left/Right arrow keys are overloaded
• Flaw: You can’t navigate a row without expanding it, as right arrow key is going to expand it

Salesforce specific features

• Salesforce LWC Bug: shouldn’t have to press Enter twice when in nav mode to activate the one focusable thing
• Should the cell have an action to expand, or should the expand/collapse button be an independently focusable thing in action mode?
• Toggle button should be focusable
• If focus is on cell and there’s no other action in that cell, Enter key should perform the Toggle action
• Our tree grid is a strange combination of the ARIA spec and the data table
• When you press Right arrow key on a collapsed row:
  • Right 1: Expand
  • Right 2: Focus second cell (skips selection column)

What happens if we make treeGrid to be more like dataGrid?

• Make expand/collapse buttons actually focusable
• If I expand a row from a button inside a cell, will the screen reader get enough information? Some screen readers will see the update, some won’t. Then we should keep the row focus option
• Remove ability to focus a whole row; there isn’t a use case for this if we have the expand/collapse button focusable.
• Left/right wouldn’t expand/collapse
• This brings it farther from ARIA treegrid spec
• Should we also change the role from treegrid to grid?

[logoscreative]

Huge +1 to this work—it would be immediately valuable to my teams and me, personally. I'm happy to answer any questions to help!

[kwilloughby-sf]

@interactivellama, this issue has been marked as "stale". Just an FYI.

[stale[bot]]

This issue has been automatically marked as stale, because it has not had recent activity. It will be closed if no further activity occurs. Maintainers are responsible for tech debt and project health. This is most likely a new components or component feature request. Please submit a pull request for or request feedback on this feature. Thank you.