Skip to content
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

Tabs Component: Duplicate IDs when using multiple instances #150

Open
ncoetzer opened this issue May 30, 2023 · 0 comments
Open

Tabs Component: Duplicate IDs when using multiple instances #150

ncoetzer opened this issue May 30, 2023 · 0 comments
Assignees

Comments

@ncoetzer
Copy link

Describe the bug
When adding multiple instances of the tabs component to the page, their tabs will cause conflicting ids if they have the same titles/labels, leading to a broken UX and possible a11y and SEO issues.

To Reproduce
Steps to reproduce the behavior:

  1. Instantiate multiple tab components on the same page
  2. Inspect the tab-item anchors. Both tab instances will have the same ids, e.g. label-1tab-1

Expected behavior
Each tab instance should receive its own unique id. This could be achieved by using a loop that iterates over the number of instances on the page and using the window.crypto.randomUUID() to generate a number that can be appended to the id string, e.g. tabs36b8f84d-df4e-4d49-b662-bcde71a8764f. Alternatively, one can simply use the index from the loop as well to append.

Additional context
Although the block PHP markup determines the tab and tab content ids, this approach will help automate the process of assigning ids to the tab container elements, which would be difficult to achieve using PHP at the time of rendering the component.

@ncoetzer ncoetzer self-assigned this May 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant