Editable Datagrid, Part two

[jalexy12]

Hey all,

Following up to this discussion from a bit ago: #3188

We're working with design partners on migrating this same component to paste, and had a couple of follow up questions regarding the structure and behavior.

There are two interactions that I'm not sure are structured within datagrid, and am wondering if there are opinions on either redesign or implementing the components ourselves.

Taking a look at the following:

The Tracking plan editor is a nested collection of events and their properties. Properties can be nested N levels deep inside of each other, so properties can contain more properties, etc etc. This is represented in the UI by various indentation levels.

Two questions:

1. The 'collapsible' that contains the event represents the hierarchy - ie the event (Another Event in the screenshot) . Not necessarily expecting implementation from the paste library, but any suggestions on this pattern and if this is advisable with Paste?
2. (Lesser of an issue) I'm assuming we can manually pad the TDs that contain indented properties ourselves? For example, we might have a Text element inside of the table column with indentation that varies based on the nesting level?

Thanks!

[nkrantz]

Hi @jalexy12 - sorry for the delayed response. Chatting with the team and we'll answer these questions shortly!

[nkrantz]

@jalexy12 - the collapsible/nested Data Grid rows don't currently exist in Paste, but you can build an almost fully accessible version using existing components. Our guidance would be to add a first column to the Data Grid which houses the buttons to expand the expandable rows. It'll be important to communicate the hierarchy of each row and nested row using aria attributes, as simply adding left padding doesn't achieve that clearly for screen readers and other assistive technologies. Be sure to follow the Treegrid Pattern, adhering to the aria attributes and keyboard navigation rules as closely as possible.

• role="treegrid" on the Data Grid Note: we don't currently allow you to override the role on Data Grid. I'm going to add a patch to allow it this week.
• aria-expanded on the DataGridRow to communicate the current state of the row.
• aria-level on the DataGridRow to define the level of the row in the hierarchical treegrid structure.
• aria-setsize on the DataGridRow to define the number of rows that are at the same hierarchical level.
• aria-posinset on the DataGridRow to communicate the order of the current row within the set of rows at the same hierarchical level.

Here's a helpful treegrid example that can be used as reference and to further understand how these attributes are applied.

Feel free to share what you've built in this thread or sign up for Office Hours to have it reviewed by the DSYS team.

[nkrantz]

Here's an example of how you might build it accessibly using the Paste Data Grid:

<DataGrid aria-label="Events tracking table" role="treegrid"> {/* Add role to DataGrid */}
  <DataGridHead>
    <DataGridRow>
      <DataGridHeader><ScreenReaderOnly>expand row buttons</ScreenReaderOnly></DataGridHeader>
      <DataGridHeader>Name</DataGridHeader>
      <DataGridHeader>Source</DataGridHeader>
    </DataGridRow>
  </DataGridHead>
  <DataGridBody>
    <DataGridRow aria-expanded={showNestedRows} aria-level={1} aria-setsize={2} aria-posinset={1}> {/* aria-level=1 because the row is top level, setsize=2 because there are 2 top level rows, posinset=1 because this is the first top level row out of the 2 in the Data Grid */}
      <DataGridCell><Button onClick={toggleShowNestedRows}>Expand</Button></DataGridCell>
      <DataGridCell>Another event</DataGridCell>
      <DataGridCell>Manually added</DataGridCell>
    </DataGridRow>
    {showNestedRows && <DataGridRow aria-level={2}>
      <DataGridCell><Button onClick={toggleShowNestedRows} aria-setsize={1} aria-posinset={1}>Expand</Button></DataGridCell>
      <DataGridCell>Another event</DataGridCell>
      <DataGridCell>Manually added</DataGridCell>
    </DataGridRow>
  </DataGridBody> }
    <DataGridRow aria-expanded={showNestedRows} aria-level={1} aria-setsize={2} aria-posinset={2}>
      <DataGridCell><Button onClick={toggleShowNestedRows}>Expand</Button></DataGridCell>
      <DataGridCell>Another event</DataGridCell>
      <DataGridCell>Manually added</DataGridCell>
    </DataGridRow>
</DataGrid>

[nkrantz]

PR for allowing role override to "treegrid": #3541

[jalexy12]

Thanks! I'll take a look at the treegrid spec and try and model that.

[SiTaggart]

Ability to override the role went out in Core v20.5