Use u-tabs under the hood of Tabs?

[eirikbacker]

This would ensure good accessibility, provide a go-to-option for non-React-users, as well as remove the need for manually setting value on all tabs subcomponents

[mimarz]

Lets investigate and make a POC PR we can look at.

Aside from finding in #2355 it would be good to document other benefits or lack of support in the current implementation.

[eirikbacker]

Quick example (not implemented controlled state): #2494

Pros:

• I think the biggest benefit is that we have a non-React version ready for those users who need this :)
• u-tabs is thoroughly tested - both by test-code, but also manually across a wide section of screen readers, in a depth that we would not have competence or resources to do in designsystemet.
• Less code to maintain for Designsystemet
• No need for value="" on every panel and every tab
• ...feel free to add more items :)

Cons:

• Needs to run client side to set initial state, but the if the consumer adds props they can fix state on server too:

<Tabs>
  <Tabs.List>
    <Tabs.Tab aria-selected="true">Tab 1</Tabs.Tab> // We can indeed change this to `<Tabs.Tab selected>` if we want
    <Tabs.Tab>Tab 2</Tabs.Tab>
    <Tabs.Tab>Tab 3</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel>Panel 1</Tabs.Panel>
  <Tabs.Panel hidden>Panel 2</Tabs.Panel>
  <Tabs.Panel hidden>Panel 3</Tabs.Panel>
</Tabs>

• ...feel free to add more items :)

[mimarz]

awaiting #2964 for further work on this

[Barsnes]

Our own implementation of tabs is now feature equivalent to u-tabs.
If we don't want the issues we are experiencing with u-tabs in #2944 to affect the release of V1, we can put this issue on hold.

Our implementation of a tabs component has the same DOM structure as u-tabs, and if we update our css to target u-elements, we can still give a non-react option for consumers wanting this.

[Barsnes]

2025.01.25 @Barsnes @mimarz @eirikbacker
We have decided to not implement u-tabs for now, since non-react users have the possibility to use u-tabs. Our css targets our component and u-tabs. Our implementation of this will be released in V1.

Moving this to the backlog, as we might move to u-tabs later on.

PR #2944 had a few issues with rendering in chromatic visual tests. I will close that PR.