Closed s100 closed 1 year ago
@tw15egan May I ask when a new version of carbon-components-react
will be released with this fix in it?
@s100 this was for v11, I can backport it to v10 as well.
@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?
I'll push out an update to get this fix released 👍🏻
Wonderful! Looking forward to picking this up :) Thank you!
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.Code of Conduct