[a11y]: Many violations when there's more than one table with expansions

[jinhua-ibm]

Package

@carbon/react

Browser

No response

Operating System

No response

Package version

1.76.0

React version

No response

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker

Assistive technology

No response

Description

While having 2 tables with <TableExpandRow> and <TableExpandHeader>, it will have lots of violations

WCAG 2.1 Violation

No response

Reproduction/example

https://stackblitz.com/edit/github-u7nfga-b9nzyzrg?file=src%2FApp.jsx,package.json

Steps to reproduce

Create 2 tables, with and and perform a scan.
Also, the placement could affect it as well, the demo is showing the case where they are showing on the z-index. But, there could be an issue too when z-index is different, one covers another.

Suggested Severity

None

Code of Conduct

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

[Rudra1402]

Hello @preetibansalui,
The screenshot attached to the issue shows multiple duplicate ID problems, such as The <tr> element has the id "expanded-row-a" that is already in use. I would like to contribute towards fixing them. I have tested the changes locally and am just waiting for approval to make a partial contribution to this issue.

[preetibansalui]

Hi @Rudra1402, Thanks for looking into it! Please go ahead and raise a PR.