You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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-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.
The text was updated successfully, but these errors were encountered: