[tabs] `aria-controls` not applied to the first tab if no `value` is set

[ciampo]

Bug report

Current behavior

When the first tab (and respective tabpanel) are not given ane explicit value, the first tab doesn't not get the aria-controls attribute — even though clicking on the tab correctly shows the associated tabpanel.

Expected behavior

Each tab should have the aria-controls attribute, referencing the ID of the associated tabpanel.

Reproducible example

Link to a CodeSandbox, StackBlitz, or other IDE.

Base UI version

1.0.0-beta.0

Which browser are you using?

Chrome

Which OS are you using?

Mac OS

Which assistive tech are you using (if applicable)?

N/A

Additional context

N/A

[mj12albert]

Hmm another little issue that could be fixed by requiring the value; wonder what your thoughts on this are: https://github.com/mui/base-ui/issues/1880 @ciampo

[ciampo]

Left a comment there, thank you for linking to that issue!

[ciampo]

@mj12albert @michaldudak @oliviertassinari Hello there! I'm seeing some activity re. moving this issue in and out of the public roadmap, could you share whether you intend to fix it before the stable v1 release? It seems like a relatively important one in terms of a11y compliance. Thank you !

[mj12albert]

We discussed this and decided to use useId to generate a fallback to avoid the problems with using the numerical index

So the component would still work without value, but to set the initial open tab it must be specified

For sure it will be fixed before v1, likely in the next release @ciampo

[github-actions[bot]]

This fix will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui-components/react@3373