-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: Duplicate ids between AccordionItem and Footer #12378
Comments
Hey thanks so much for reporting this!
I don't think so unfortunately. I'll put up a PR to change the inbuilt prefix for v10 so there won't be conflicts between libraries. |
It's worth mentioning that I think this could also be fixed via #11513 but we haven't gotten React 18 support fully baked yet. |
@Properko In thinking about this more - I'm curious, would you prefer a way to customize the prefix used for the ids? I think it might be the best way to keep both v10 and v11 backwards compatible while allowing you control so you can avoid duplicates. I think we could wire up something similar to |
I'm not sure we could make the move to React 18 anytime soon either. But it's nice to hear that it gets fixed eventually.
Yep, that's a perfectly fine solution. Filling an extra property on |
Package
@carbon/react, carbon-components-react
Browser
Chrome, Firefox
Package version
@carbon/react@1.39.0, carbon-components-react@8.15.0
React version
17.0.2
Description
Using AccordionItem from
carbon-components-react
with a Footer element from@carbon/react
on the same page leads to duplicate ids such asaccordion-item-1
.Looks like useId somehow does not have the same context between the libs? Can you expose the id prefix string as an optional prop?
Or is there a fix we can do on our side regarding the usage of AccordionItem?
This also shows up as an accessibility violation.
Suggested Severity
Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.
Reproduction/example
https://codesandbox.io/s/rough-grass-o4drs0?file=/src/App.js
Steps to reproduce
#accordion-item-1
in the elements tab.Alternatively
#accordion-item-11
in the elements tab.Code of Conduct
The text was updated successfully, but these errors were encountered: