search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.84k stars 1.81k forks source link

[a11y]: `<div class='bx--data-table-content'>` is scrollable but not tabbable #14575

Closed s100 closed 1 year ago

s100 commented 1 year ago

Package

carbon-components-react

Browser

Chrome, Edge

Operating System

Windows

Package version

7.59.13

React version

16.14.0

Automated testing tool and ruleset

https://www.ibm.com/able/toolkit/tools/

Assistive technology

No response

Description

The scrollable element <div class='bx--data-table-content'> is scrollable but not tabbable. This is part of <DataTable>:

https://github.com/carbon-design-system/carbon/blob/0d49a9c3120c0185184c0148d450b6a3ec391ea9/packages/react/src/components/DataTable/Table.js#L38

The CSS which makes this element scrollable is here:

https://github.com/carbon-design-system/carbon/blob/v10/packages/components/src/components/data-table/_data-table-core.scss#L27

WCAG 2.1 Violation

WCAG technique G202: Ensuring keyboard control for all functionality

Reproduction/example

https://stackblitz.com/edit/github-gbmmdk?file=src%2FApp.jsx

Steps to reproduce

Inspect the element document.querySelector('.bx--data-table-content'). You'll find that it is horizontally scrollable. However, it is not possible to tab to this element.

This is important content that the designer decided to make scrollable and not always display *all the content at the same time when the area is restricted in a relatively small space. When scrollbars appear, the developer needs to ensure the element will be scrollable via the arrow keys.

Ensure scrollable elements that contain visible non-tabbable elements are not excluded from the tab-order by adding a tabindex attribute value greater than or equal to ”0” to the container element.

Code of Conduct

s100 commented 1 year ago

@tw15egan May I ask when a new version of carbon-components-react will be released with this fix in it?

tw15egan commented 1 year ago

@s100 this was for v11, I can backport it to v10 as well.

s100 commented 1 year ago

@tw15egan I see that the Carbon 10 fix for this was merged, thank you! Can I ask when a new version of carbon-components-react@7 with this fix in is likely to appear?

tw15egan commented 1 year ago

I'll push out an update to get this fix released 👍🏻

tw15egan commented 1 year ago

@s100 v10.59.15 is out and includes this PR

s100 commented 1 year ago

Wonderful! Looking forward to picking this up :) Thank you!