:wheelchair: a11y(tab-component): Keyboard interaction of tabs

[carolabes]

Description of this issue

• Tabs cannot be accessed with the usual keys

How to fix it

• Tab keys should be accessible with usual keys like TAB, Arrows and DELETE (see additional Informations)

Additional Information

Level A https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

Keyboard interaction: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#keyboard_interaction

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[hirsch88]

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#keyboard_interactions

[hirsch88]

@carolabes We need to discuss this in our weekly.

There are 3 cases for the tabs

1. Tabs with only links should work with tab and enter
2. Tabs without any link should work with arrow keys
3. But we also have a mixture like in the main nav bar, would do we there?

Moreover, we get the feeling that we are confusing the end user with multiple solutions

[carolabes]

Hi @hirsch88, the technical implementation is important for people who cannot see the design. Based on the implementation, they can identify the element and know how to access it. By definition, the tab changes parts of the page (see tab role definition). Technically we have only one use case here.

This means:

1. Tabs with links only like our inpage navigation should be implemented as nav with link list.
2. Tabs that change parts of the content such as the tab component or product slider should be implemented as tabs and thus be operable.
3. In main nav bar no tabs are necessary, because it is a navigation. Here buttons and links are enough.

I understand your point that it can be confusing for the users, but still the technical implementation should be correct for the users who don't see the design.

If there are any questions, please do not hesitate to contact me.

[hirsch88]

/cib

[github-actions[bot]]

Branch fix/issue-1425 created!

[carolabes]

Checked on Baloise.ch: Accessing with right&left arrow key not possible

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#keyboard_interactions