Tabindex not working for nav links with the tab JS plugin

[dcongrove-td]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

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]

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]

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.

[dcongrove-td]

Upon reviewing the W3C example, I agree that the tab key behavior within the tabbed interface is functioning as expected. Given this, I propose closing the GitHub issue.