bug(react/a11y): Tabs primitive uses malformed id values with spaces in them

[hbuchel]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Primitive components

How is your app built?

Next.js

What browsers are you seeing the problem on?

No response

Which region are you seeing the problem in?

No response

Please describe your bug.

The Tabs primitive generates ids with spaces in them.

The tabs primitive generates id attributes for the TabsPanel and TabsItems elements using the value prop which is the name of the Tab. This leads to the following markup (using the docs demo example): Note that the id for the button has a space in it as does the id it references in the aria-controls. Similarly, the id and aria-labelledby attributes have spaces in their values as well.

<div class="amplify-tabs">
  <div
    role="tablist"
    class="amplify-tabs__list"
    style="justify-content: flex-start"
  >
    <button
      role="tab"
      id="Tab 1-tab"
      aria-selected="true"
      aria-controls="Tab 1-panel"
      class="amplify-tabs__item amplify-tabs__item--active"
    >
      Tab 1</button
    >
    // ... other tab buttons
  </div>
  <div
    role="tabpanel"
    id="Tab 1-panel"
    aria-labelledby="Tab 1-tab"
    class="amplify-tabs__panel amplify-tabs__panel--active"
  >
    Tab content #1
  </div>
  // ... other tab panels
</div>

This can cause issues for assistive tech because then the tabs aren't properly associated to each other, and just generally other issues because they are not valid IDs that can be used with other javascript or CSS correctly. For example you can see in the accessibility tab for this tab panel that it can't find the correct element that aria-labelledby references so instead uses "First":

You could probably:

1. Trim the white space for each instance where the value is used for an id id={${value.trim()}-tab} (just ok)
2. Generate an id for each item using React.useId() to ensure each Tabs usage has unique ids for it's tab elements (probably better than using just the name of the tab)

What's the expected behaviour?

Tabs ids don't have spaces in them and tabs are programmatically linked to each other correctly

Help us reproduce the bug!

Inspect the markup for Tabs on https://ui.docs.amplify.aws/react/components/tabs

Code Snippet

// Put your code below this line.

Console log output

No response

Additional information and screenshots

No response