Duplicate IDs when using multiple tabs instances

[liamjohnston]

🐛 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

[ABStein]

Currently Experiencing the same issue

[ldmcdaniel]

I am having the same issue. I figured others would be experiencing the same thing.

[binhphan009]

I am having the same issue right now.

[binhphan009]

Does anyone have a workaround? Thanks in advance