Tabs aren't correctly marked for screen reader

[Magsu]

Provide a general summary of the issue here

The tablist is not correctly marked. Screen reader won’t perform as expected and cannot interpret all the necessary information.

Note: This works with VoiceOver, but not with other screen readers due to how it interprets information.

🤔 Expected Behavior?

The tablist is announced correctly by a screen reader, and the common commands for tablist work as expected (e.g. selecting tab in focus mode with left/right or up/down arrow keys with NVDA).

😯 Current Behavior

The tablist is not announced correctly, only the focused tab (in focus mode).
NVDA: User can select the correct tab with reading mode, but this is not the correct behaviour for tablist. User has information for the button being a tab-button, but NVDA does not interpret the tablist correctly.
TalkBack: User has no information about it being a tablist, but can select the correct tab.

💁 Possible Solution

The aria-properties are in the wrong element:

Shadow root delegates focus to the elements below sl-tab, so even though a screen reader can sometimes infer some information from the parent (e.g. it being a tab and being disabled/selected) the actual focus is in the element which is in the shadow root, thus the screen reader cannot perform correctly, and cannot infer the correct information.

Moving the aria-properties and role to the div with class "wrapper" makes the tab work correctly with a screen reader. This div with tabindex in the shadow root is the element that actually receives focus.

🖥️ Steps to Reproduce

1. Open a page with element (e.g. [Tab group Basic](Open https://storybook.sanomalearning.design/?path=/story/navigation-tab-group--basic)
2. Start a screen reader (other than VoiceOver)
3. Focus on the element and use keyboard (e.g. left and right arrow keys) to move between tabs.

What browsers are you seeing the problem on? (only for bugs in code)

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 10

👤 Your name

Valtteri Järvinen

🧢 Your product/team

External

🎨 Your Theme(s)

Sanoma Learning

### Tasks
- [x] Improve and test with NVDA
- [x] Fix keyboard navigation