[a11y]: The 'headers' attribute value "expand" does not reference a valid 'id' in this document

[betty7zhang]

Package

carbon-components-react

Browser

Chrome

Operating System

MacOS

Package version

v7.48.1

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker - Latest Deployment

Assistive technology

No response

Description

The 'headers' attribute should refer to a valid cell in the same table. The 'headers' attribute specifies one or more header cells related to a table cell in a complex table. It has no visual effect on the table, but it provides a programmatic way for assistive technology such as screen readers to describe visual relationships between header and data cells. When a table has multi-level headers, it can become difficult to convey which header text applies to any one cell using only elements and 'scope' attributes. The 'headers' attribute allows for the concatenation of multiple text into an accurate descriptor for an individual data cell.

WCAG 2.1 Violation

No response

CodeSandbox example

https://cloud.ibm.com/unifiedsupport/supportcenter

Steps to reproduce

1. Open https://cloud.ibm.com/unifiedsupport/supportcenter
2. Login with IBM ID & password
3. Click View all
4. Check accessibility

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[abbeyhrt]

Looks like there was a fix contributed for this! Closing since it was resolved in #10214

[tay1orjones]

Notified in slack, this issue still exists. It's present in storybook here.

[TannerS]

Let me take a look, the issue was fixed when passing in the proper props but i think a prop was missed in the story book demo

[TannerS]

@tay1orjones @betty7zhang here is a fix https://github.com/carbon-design-system/carbon/pull/10547/files