Datagrid design review: Horizontal scrolling and responsiveness

[elycheea]

Design review

• Component epic #1607 #2499
• Designers/reviewers: Virginia Nicholson, Jennifer Jennings (@jjennings7)
• Links: PAL guidance / Storybook v2 / Storybook v1 — for unfrozen rows, see batch actions or actions dropdown

---

Standards

• [x] All pattern updates/changes/iterations have been discussed with the component developer
• [x] 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
• [x] The component’s UI matches the pattern specifications set by the pattern maintainer
• [x] The component’s motion matches the specifications set by the pattern maintainer(s)
• [x] The UI produced is responsive, cross-browser, and responds to the currently set Carbon theme.
• [x] Colors, themes, sizes and additional props are true and correct, aligning with Carbon set tokens (unless otherwise specified by the pattern)
• [x] Paddings/margins/spacings are true and correct, in both desktop and mobile views

Storybook

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

[matthewgallo]

• Rename Sticky column story to Frozen columns • Width of sticky actions column on right is too wide (width should be 48px, in addition column header should also be 48px) • There should not be any white space/margins at end of scrollable column header row • Frozen column border should use $active-light-ui • Investigate control for multi-wrap column property, multiLineWrap, also potential for adding it once for all columns and not on a per column basis • Unfreeze first column at <672px, double check frozen column header not sticking anymore

To think about: • Row index labels to left of selectable row/checkbox

[elycheea]

^ FYI @Ratheeshrajan

[jjennings7]

@matthewgallo @elycheea @Ratheeshrajan I'm unable to check the boxes in the design review section for some reason. Can one of you please check them off for me? With the exception of the following, all the rest can be marked:

• [ ] The component behaves according to the guidelines set by the pattern maintainer

See Matt's comment above with the few small changes needed

• [ ] The Storybook displays multiple scenarios that show how the component can be used

There are no controls or knobs for this component. As we mentioned to Matt, it would be nice to include a control or knob so the storybook user can freeze or unfreeze the first column, or the last column (actions), or both. Currently, both are frozen in the example.

Regarding @matthewgallo 's comment above:

To think about: • Row index labels to left of selectable row/checkbox

Here's an example screenshot of what he's referring to from my product, DataStage:

One last thing I noticed is the title on the table, "click action menu". I don't think that's supposed to be there?

[elycheea]

@jjennings7 We left off the row index changes for now since it caused some unexpected behaviors and felt like it’s out of scope for our first release. We can open a separate issue as an enhancement later. If the current changes look good, feel free to close this out. 🙆‍♀️

[jjennings7]

Sorry for the delay. Everything looks good and I think we can close this, just 2 notes for future:

• Row index changes, as you noted
• Adding controls/knobs to storybook:

There are no controls or knobs for this component. As we mentioned to Matt, it would be nice to include a control or knob so the storybook user can freeze or unfreeze the first column, or the last column (actions), or both. Currently, both are frozen in the example.

[jjennings7]

I don't have the option to close it for some reason, @elycheea can you please close?

[elycheea]

Thank you @jjennings7!!

[elycheea]

@jjennings7 or @vsnichols just reopened so we can double check the behavior in v2 and check for accessibility.

[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

Level 2

• [ ] Ensure keyboard access to complex interactions
  • [ ] Make custom media player and animation controls keyboard accessible

Level 3

• [ ] Code screen updates predictably
  • [ ] Use "activate" rather than "focus" as a trigger
  • [ ] Use an onchange event without disorienting the user

Dynamic updates

Level 1

• [ ] Provide errors accessibly
  • [ ] Use accessible methods to implement error messages
  • [ ] Implement validation and notification to minimize interruptions

Level 2

• [ ] Make content accessible that appears on hover or focus
  • [ ] Ensure Esc dismisses new content
  • [ ] 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
  • [ ] Use caution where interactive controls appear in the hover text
• [ ] Code cancellation actions accessibly
  • [ ] Provide accessible ways of cancelling pointer interaction
• [ ] Properly code status messages
  • [ ] Use role=status to advise on the success or results of an action
  • [ ] Use role=alert or an ARIA live region to convey a suggestion or warning

Level 3

• [ ] Allow reduced motion
  • [ ] Implement motion media queries to reduce user risk

Text and non-text

Level 1

• [ ] Implement text alternatives for meaningful images, sound, and visual data
  • [ ] Give decorative images an ALT attribute with an empty string (alt="")
  • [ ] Use HTML, ARIA, or technology-specific techniques to add short text alternatives
  • [ ] Where relevant text exists in the UI, use aria-labelledby and aria-describedby to reference
  • [ ] Provide an accessible method for exposing long text alternatives
  • [ ] Embed multimedia content that supports closed captions
• [ ] Implement correct structure and metadata
  • [ ] Code headings according to specifications
  • [ ] ~Code the <title> element on every page according to specifications~
  • [ ] ~Set the language for each page~

Level 2

• [ ] Add additional structure where appropriate
  • [ ] Use <figcaption> and <caption> elements where figures and tables are titled
  • [ ] Add additional context to generic link names
  • [ ] Consider adding regions and other ARIA roles to distinguish text groupings

Level 3

• [ ] ~Mark up foreign words and abbreviations~
  • [ ] ~Use the lang attribute for foreign words and phrases~
  • [ ] Use <abbr> elements and title attributes to expand abbreviations
• [ ] 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
  • [ ] If repurposing a standard component, use ARIA to set the correct name and role
  • [ ] On custom components, use ARIA to expose name, role, and value

Level 2

• [ ] Reduce conflict between the visible label and a component's accessible name
  • [ ] Match the accessible name to the visible label
  • [ ] Include the text of the label in the accessible name

Level 3

• [ ] Indicate the purpose of common inputs
  • [ ] Use HTML autocomplete attributes, where appropriate

[kristastarr]

Styling comments:

1. When resizing columns such that the text is truncated in one or more of the columns, on hover, the text in both columns shows and is overlapping

   

2. When hovering the mouse on the table header text, the cursor appears as a text cursor which makes it look editable. The title text does show on hover of the header text, but not on hover of the rest of the cell. Is that the desired behavior?

3. I re-sized the table in various ways and also used browser zoom to simulate a screen enlarger. I didn't investigate exactly when/why but sometimes there is an empty column between the headers, and sometimes the overflow menu column is the incorrect width, as shown here at 200% browser zoom:

   

4. The L/R arrow keys correctly scroll the parts of the table that are not sticky. However, depending on the width of the table, it's possible that it isn't evident that there are more columns than what are shown. To me it's not really clear from a visual standpoint that the table is scrollable in those cases. Example: here, it's not evident that there are 7 more columns in the table

   

Keyboard and Mac Voiceover testing:

5. As discussed in other issues (like Sort https://github.com/carbon-design-system/ibm-products/issues/3118) we have the situation where the contents of each cell are a group, so you have to arrow three times to move to the next cell. In this component, this behavior is present in table header and all table items here. In the Sort component, it is not present in the table header but is there in the table items.

6. Also documented in Sort https://github.com/carbon-design-system/ibm-products/issues/3118, the row splitters are not interactable via keyboard focus, but are interactable via screen reader when navigating using CNTRL+Option+ L/R/Up/Down arrows. But even though you have the option to interact with them, they do not increase or decrease as desired and do not resize the column.

7. 

8. In this component as well as Batch actions, https://github.com/carbon-design-system/ibm-products/issues/2607 when a checkbox is selected, voiceover gives no indication that the blue "X items selected" bar appears and offers additional actions. Could look at using aria-live to provide live updates that new content has been added to the screen

[jjennings7]

In addition to the styling issues Krista noted:

The tooltip for the action button seems to be within the table and not above it, so it gets cut off but you can scroll to see it, causing a white column to appear:

The vertical border to delineate the frozen columns seems to be missing in the header, so the header text looks cut off if it's partially scrolled:

Regarding the scroll bar issue Krista noted, not sure if it would exactly help that issue, but I noticed the scroll bar spans the entire width of the table instead of being contained within the scrollable area. Could/should it be contained?

And lastly, I would still like to see controls or knobs so that people checking out the component know they have a couple choices of which columns to freeze and they can try it out in the storybook.

[davidmenendez]

after reviewing the most up to date version of datagrid it appears that all of these concerns have been addressed with the exception of this note

And lastly, I would still like to see controls or knobs so that people checking out the component know they have a couple choices of which columns to freeze and they can try it out in the storybook.

we've had some initial conversations about providing more sandboxes or codepens with datagrid examples so that users are able to interact more with the code. unfortunately, due to the nature of the mechanisms that datagrid is built on, storybook controls aren't well suited to allow users to turn things on and off.

closing this as complete 🥳