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:
Instantiate multiple tab components on the same page
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.
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:
tab-itemanchors. Both tab instances will have the same ids, e.g.label-1tab-1Expected 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.