scale-tab-panel tabindex

[nikolab-pn]

Scale Version
@telekom/scale-components 3.0.0-beta.143

Framework and version
@telekom/scale-components-react 3.0.0-beta.143

Current Behavior
scale-tab-panel has tabindex="0", if tabindex is set to -1, then content inside pannel is not reachable with tab key

Expected Behavior
scale-tab-panel should not have tabindex

Code Reproduction
CodeSandbox

[felix-ico]

hi @nikolab-pn, the tab-index is hard coded to 0 in scale-tab-panel. Apparently this was part of an accessibilty fix 8ef111c , i assume it has to do with users being able to reach (text) content within the tab-panel

[nikolab-pn]

Hi @felix-ico, we received this issue from accessibility review. Maybe it can stay as is with an option to disable it. As per WAI it is OK to have tabIndex 0 if there is no focusable elements in tabpanel but it's not needed if there are.

Under Accessibility Features, 2nd bulletpoint.
https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/

[felix-ico]

@nikolab-pn i added a PR here #2215, i had to add a prop tabbablePanel (don't really like that name) that sets tabindex="0"if true, and completely removes tabindex if set to false. Setting tabindex to -1 on the panel made it so that the button would not be focusable at all.

is OK to have tabIndex 0 if there is no focusable elements in tabpanel but it's not needed if there are.

However, just after opening the PR I had another look at the link you posted and i'm not 100% sure this is actually what they are saying there:

it is recommended that all tabpanel elements in a tab set are focusable if there are any panels in the set that contain content where the first element in the panel is not focusable.

So the way i understand it, this new tabbablePanel prop should be set to false only if all panels first child element is a focusable element.

[nikolab-pn]

Good catch. We have both cases so I will need to be carefull.

[felix-ico]

this has just been merged and will be available with beta.144