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?