Skip to content

Tabs Component: Duplicate IDs when using multiple instances #150

@ncoetzer

Description

@ncoetzer

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions