Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Horizontal tabs: Down and Up Arrows usage not allowed #39969

Open
3 tasks done
vaiFaW opened this issue May 8, 2024 · 1 comment
Open
3 tasks done

Horizontal tabs: Down and Up Arrows usage not allowed #39969

vaiFaW opened this issue May 8, 2024 · 1 comment

Comments

@vaiFaW
Copy link

vaiFaW commented May 8, 2024

Prerequisites

Describe the issue

According to the W3C tabs pattern:
When a tab list has its aria-orientation set to vertical:
Down Arrow performs as Right Arrow (moves focus to the next tab).
Up Arrow performs as Left Arrow (moves focus to the previous tab).
If the tab list is horizontal, it does not listen for Down Arrow or Up Arrow so those keys can provide their normal browser scrolling functions even when focus is inside the tab list.

These rules aren't supported by Boostrap 5 actually

Reduced test cases

It's possible to check these keyboard interactions in the documentation page https://getbootstrap.com/docs/5.3/components/navs-tabs/

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome, Firefox, Microsoft Edge

What version of Bootstrap are you using?

v5.3

@marwenbenhajhassine
Copy link

A potential fix could involve dynamically adjusting the keydown event handlers based on the aria-orientation attribute of the tab component

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants