carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://ibm-products.carbondesignsystem.com
Apache License 2.0
98 stars 138 forks source link

Improve screenreader interpretation of Datagrid #4769

Closed elycheea closed 4 weeks ago

elycheea commented 7 months ago

Reported by @kristastarr in the Datagrid review from the accessibility audit.

Screenreader testing

(Reported using macOS VoiceOver.)

  1. This is related to Comment A above, regarding the base component. In this variation, the table headers contain multiple titles, and also since the <input> element is inside the <th>, the aria label for it ("resize-column") is being read out as part of the title header in addition to the title of "Row index" (which doesn't really make sense if you're not visually looking at the table) and then the actual cell contents are read out so we hear it for a third time Example of what the screenreader is reading out:
Screenreader Code
image image
  1. Let's look into how we can use aria-label to specify what the slider input is tied to — like what column name. Currently it just says you are inside a column header, but not which one

image

### Tasks
- [ ] https://github.com/carbon-design-system/ibm-products/issues/4799
ljcarot commented 4 weeks ago

Since we are moving to TanStack Table, closing this issue as not planned.