Datagrid design review: Batch actions

[elycheea]

Design review

• Component epic Data table component #1607 Datagrid design review #2499
• Designers/reviewers:
• Links: PAL guidance / Storybook / Storybook

---

Standards

• All pattern updates/changes/iterations have been discussed with the
  component developer
• Patterns have been approved by either DSAG or another approving entity

Pattern and behavior

• The component behaves according to the guidelines set by the pattern
  maintainer
• The component’s UI matches the pattern specifications set by the pattern
  maintainer
• The component’s motion matches the specifications set by the pattern
  maintainer(s)
• The UI produced is responsive, cross-browser, and responds to the
  currently set Carbon theme.
• Colors, themes, sizes and additional props are true and correct, aligning
  with Carbon set tokens (unless otherwise specified by the pattern)
• Paddings/margins/spacings are true and correct, in both desktop and mobile
  views

Storybook

• A functioning component renders in Storybook
• The Storybook displays multiple scenarios that show how the component can
  be used
• Changing props in the Storybook updates the component

[stale]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[elycheea]

@vsnichols 💪

[elycheea]

@kristastarr to review for accessibility.
Feel free to remove any checks that don’t apply.

---

Accessibility review

Keyboard

Level 1

• Properly code the navigation order
  • Ensure interactive elements are reachable with the keyboard
  • Where possible, achieve the desired tab order by adjusting the DOM,
    rather than overriding the tabindex
  • When overriding the default focus indicator, confirm focus is highly
    visible
• Implement established keyboard conventions
  • Use standard HTML elements where possible, using CSS to alter appearance
    not behavior
  • Be familiar with established keyboard conventions
  • Implement keyboard operation for custom elements - see comments

Level 2

• Ensure keyboard access to complex interactions - see comments

Dynamic updates

Level 2

• Make content accessible that appears on hover or focus
  • If content appears on hover, the new content needs to remain visible
    until dismissed
  • Moving the pointer away from the trigger should not be the action that
    dismisses the new content
  • Ensure custom tooltips and similar hover text can be triggered by
    keyboard
  • Discuss alternatives to hover text
• Code cancellation actions accessibly
  • Provide accessible ways of cancelling pointer interaction

Text and non-text

Level 3

• Achieve necessary reading order
  • Order content appropriately in the DOM
  • Only use CSS to alter text position without altering meaning

User input

Level 1

• Associate labels with inputs
  • Programmatically associate inputs with labels
  • Add accessible names for inputs lacking visible labels
• Provide correct name, role, and value

Level 3

• Indicate the purpose of common inputs

[kristastarr]

Keyboard accessibility:

1. When you are on Primary button, and press tab with the intention of moving to the checkbox in the first table row, you have to press tab 3 extra times before you end up there. Voiceover reads out "Duplicate" "Add" "Options" so looks like the "X items selected" button is in tab order even when it is hidden. Similar behavior is documented in Datagrid design review: Toolbar #3117 as well.

2. The checkboxes on the table items can successfully be checked/selected using space bar. Is there a reason they cannot be selected by pressing enter as well? If no, might be something to consider.

3. I love the micro-animation of this blue "X items selected" bar that appears when you select an item! 🙌 However, voiceover gives no indication that it appears appears and offers additional actions. Could look at using aria-live to provide live updates that new content has been added to the screen. (This behavior is also noted in Horizontal scrolling and responsiveness Datagrid design review: Horizontal scrolling and responsiveness #2509)

[kristastarr]

Voiceover testing using Mac voiceover:

1. When initially entering the table, you are given the option to "Select" or "Deselect" all. It is not clear until you move L/R across the table header to find out what the contents of the table header are. It would be nice if we could have a description or some kind of label to make it more clear. Maybe a table description, label, or caption would help with clarification. Although I recognize this is something that the developer implementing would probably be responsible for adding. So maybe it's something to include in guidelines or make a prop for it?

2. Using voiceover only - When using Tab or Shift+tab within the table to move to next or previous row - the blue outline focus indicator does not reflect the change in focus, but there is a very small white square that becomes the focus indicator. The focus indicator styling is correct when not using voiceover.

3. Once focused on a checkbox, then pressing CNTRL+Option+R arrow once to move through the table row contents, the next item reads out an id. Should be using use aria labels here to avoid having the default label since it is not descriptive.
   This is another case where the content inside a cell is a group, rather than just the desired content, so eliminating the group inside the cell would reduce the number of arrows required to move to the next cell.

[vsnichols]

Design review

This is coming along but there are still some fairly significant visual bugs in the Carbon storybook:

• Batch action options are not vertically center aligned
• "More" option should always use a chevron icon
• Responsive behavior does not act as expected
• Add behavior for actions across multiple pages - show knob/ option in storybook

@elycheea @kristastarr FYI

Batch action options are not vertically center aligned

Actual

Expected

"More" option should always use a chevron icon

Actual vs Expected

Responsive behavior does not act as expected

Actual

Expected
Options should collapse under overflow when they can no longer fit - see guidelines

Add behavior for actions across multiple pages

By default only options on displayed page are selected, but viewer is offered an option to select all items in table

[elycheea]

@vsnichols I believe the misalignment was a bug that was introduced with MenuButton and ComboButton update! We’ll look into this!

Add behavior for actions across multiple pages

This one needs to be handled by Carbon first since it’s currently not possible to implement this without changes to the DataTable. I believe we have a version of this in the More menu here so it’s still possible to achieve, but the button placement in the left is not currently.