Add Tree Grid component

kwilloughby-sf commented 5 years ago

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

tanhengyeow commented 5 years ago

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

kwilloughby-sf commented 5 years ago

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

interactivellama commented 5 years ago

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 commented 5 years ago

Additional Resources

interactivellama commented 5 years ago

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 treegridto grid?

logoscreative commented 5 years ago

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 commented 5 years ago

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

stale[bot] commented 4 years ago

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.

salesforce / design-system-react