fix(DataTable): fix duplicate expanded row id for multiple tables

[Rudra1402]

Issue:

• Partially Addresses: [a11y]: Many violations when there's more than one table with expansions #19366

Changelog

Changed

• Refactored the way the id and aria-controls attributes are set for expanded rows when multiple tables with expandable rows are present.
• Appended the instanceId to each row’s id to ensure uniqueness within the DOM.
• Appended the instanceId to the aria-controls attribute to correctly associate it with the corresponding row id.

Testing / Reviewing

Before making changes:

• Use multiple tables with row expansion.
• Inspect the elements and search for expanded-row-a. You’ll notice that multiple rows have the same id value.

After making changes:

• You’ll notice that appending the instanceId makes each id unique.

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

• Reviewed every line of the diff
• Updated documentation and storybook examples
• Wrote passing tests that cover this change
• Addressed any impact on accessibility (a11y)
• Tested for cross-browser consistency
• Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

[github-actions]

All contributors have signed the DCO.
_{Posted by the DCO Assistant Lite bot.}

[Rudra1402]

I have read the DCO document and I hereby sign the DCO.

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	db9c0aa
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/6832125a7a35400008f4bddc
😎 Deploy Preview	https://deploy-preview-19416--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	db9c0aa
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/6832125a20ff77000805615c
😎 Deploy Preview	https://deploy-preview-19416--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[tay1orjones]

Please do not remove checklist items from the pr template. If some do not apply, just ~strike out the text with tildes~

[jinhua-ibm]

Thanks for submitting the PR! Since I initially reported the issue, I wanted to point out that the problem isn’t limited to just id attributes—there are also violations related to headers attributes. I'm not entirely sure how Carbon performs its checks, but I'd recommend running an IBM Equal Access Accessibility Checker scan to catch and address all remaining violations comprehensively.

[Rudra1402]

Thanks for submitting the PR! Since I initially reported the issue, I wanted to point out that the problem isn’t limited to just id attributes—there are also violations related to headers attributes. I'm not entirely sure how Carbon performs its checks, but I'd recommend running an IBM Equal Access Accessibility Checker scan to catch and address all remaining violations comprehensively.

Thanks for the note! I actually had a local fix ready for the specific id attribute issue, so I submitted that as a starting point. I agree that a full scan would be helpful to catch broader violations like headers attributes, but I’d suggest treating those as a separate effort to keep the changes focused. Happy to help where I can!

[adamalston]

Suggestion to store this ID in a variable to keep the implementation DRY and ensure consistency.

[Rudra1402]

Good catch! I’ve updated to use a variable for the expanded row ID.

[Gururajj77]

Hey @Rudra1402 , could you please add the steps to test this PR

[Rudra1402]

Hey @Rudra1402 , could you please add the steps to test this PR

Hello, create 2 DataTables with expandable rows for comparative analysis use case. Run the IBM A11y Checker, you'll notice duplicate id violations.
After the fix, run the IBM scanner again, the instanceId will never allow 2 rows from 2 different tables with same id even if they use the same dataset.