Duplicate IDs when using multiple tabs instances
liamjohnston opened this issue · 4 comments
🐛 Bug report
Current Behavior
When adding more than one instance of @reach/tabs to a page, each instances has clashing IDs. See screenshot:
Expected behavior
When more than one tabs component is used on a page, all IDs should be unique. For accessibility, and for validity.
Suggested solution(s)
Either @reach/tabs should (somehow magically 🤷?) make sure to use unique IDs when mounting another component, or it should let me override the id on the <Tab> myself. I tried the latter, but it gets ignored and replaced with the default tabs--panel--[x].
Your environment
This is a react component in a non-react (static html CMS) site. The CMS user can add as many of these tabs components as needed.
Reach Package: @reach/tabs 0.17.0
React: 18.2.0
Browser: Chrome 103.0.5060.114
Node: 16
npm/yarn: yarn 1.22.19
Operating System: OSX 12.4
Currently Experiencing the same issue
I am having the same issue. I figured others would be experiencing the same thing.
I am having the same issue right now.
Does anyone have a workaround? Thanks in advance