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

Tabindex not working for nav links with the tab JS plugin #39688

Open
3 tasks done
dcongrove-td opened this issue Feb 19, 2024 · 2 comments
Open
3 tasks done

Tabindex not working for nav links with the tab JS plugin #39688

dcongrove-td opened this issue Feb 19, 2024 · 2 comments

Comments

@dcongrove-td
Copy link

dcongrove-td commented Feb 19, 2024

Prerequisites

Describe the issue

Unable to use the tab key to navigate the Home Profile Contact tabs. It seems the tab JS plugin is setting the tabindex of all non-active tabs to -1.

https://getbootstrap.com/docs/5.3/components/navs-tabs/#javascript-behavior

Reduced test cases

Even if you manually set the tabindex="0" of the links in the HTML, the script changes them to -1 on init.

https://codepen.io/jdoe1111112/pen/VwRRNRV

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

Windows

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

Chrome, Firefox

What version of Bootstrap are you using?

v5.2.3

@julien-deramond
Copy link
Member

julien-deramond commented Feb 19, 2024

Thanks for reporting this issue @dcongrove-td
As mentioned in the corresponding accessibility section in the same section:

Once the currently active tab has focus, the cursor keys activate the previous/next tab.

Once the "Home" tab has the focus, you can navigate by arrows with left/right (or up/down) keys to focus "Profile" and "Contact" tabs.

@jomarcardoso
Copy link

As you can see in the w3c example the "tab key" only goes to the active tab and then you start to navigate by arrows.

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