-
Notifications
You must be signed in to change notification settings - Fork 153
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
ARIA IDs are not unique #217
Comments
nathanhere
added a commit
to nathanhere/react-collapsible
that referenced
this issue
Feb 19, 2022
karltaylor
added a commit
that referenced
this issue
Feb 24, 2022
Adds feature to input custom contentId to address issue #217.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
Successive Collapsable components are using the same
collapsible-trigger
&collapsible-content
id during NextJS static builds. Flagged by Google Lighthouse as accessibility issue: "ARIA IDs are not unique." Note: Not all Collapsible instances are using the same ID, just some. This phenomenon is not always consistent (e.g. Given 3 Collapsible instances, sometimes the first two instances the same ID, but sometimes the last two instances share the same ID).To Reproduce
Steps to reproduce the behavior:
collapsible-trigger
andcollapsible-content
Expected behavior
collapsible-trigger
andcollapsible-content
ids should be unique per Collapsible componentScreenshots
In the screenshot below, note that
id=collapsible-trigger-1645058813832
andaria-controls=collapsible-content-1645058813832
are both present in the components with id'sproduct-card-collapsible-2
andproduct-card-collapsible-3
.product-card-collapsible-1
is unique, but is not shown in this screenshot. It contains the valueid=collapsible-trigger-1645058813831
&aria-controls="collapsible-content-1645058813831"
, which is only a .001 second earlier (2022-02-17T00:46:53.831Z vs 2022-02-17T00:46:53.832Z), seeing that the Id's in this library are generated usingDate.now()
.Additional context
It seems like the assumption in using
Date.now()
to generate unique collapsible id's:react-collapsible/src/Collapsible.js
Line 12 in 73d20a2
react-collapsible/src/Collapsible.js
Line 13 in 73d20a2
was that each instance generated would have enough time apart to be unique, however an exceptionally fast build process would break this assumption, in theory. And somehow I think NextJS may be building the Collapsible instances extremely fast during static builds, so it's not a stretch to find two successive Collapsible instances sharing the same ARIA ID if they are generated via
Date.now()
.If this is indeed the case, the issue could be easily fixed by providing an option to supply our own ID to be appended to
collapsible-trigger
andcollapsible-content
.The text was updated successfully, but these errors were encountered: