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 :)