Bootstrap 5.3.3 Nav-Links getting tab-index -1

[Gkat-Riva]

We are using Bootstrap 5.3.3 and have tabbed navigation at the top of our page, it is currently structured as follows:

<div role="navigation">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a id="tabBtn1" class="nav-link active" data-bs-toggle="tab" href="#tab1" role="tab" aria-controls="1" aria-selected="true">
                Tab 1
            </a>
        </li>
        <li class="nav-item">
            <a id="tabBtn2" class="nav-link" data-bs-toggle="tab" href="#tab2" role="tab" aria-controls="2" aria-selected="true">
                Tab 2
            </a>
        </li>
        <li class="nav-item">
            <a id="tabBtn3" class="nav-link" data-bs-toggle="tab" href="#tab3" role="tab" aria-controls="3" aria-selected="true">
                Tab 3
            </a>
        </li>
    </ul>
</div>

When the page renders all but the currently active tab is given a tabindex of "-1" meaning they cannot be reached by keyboard navigation despite being clickable.

Any guidance on what could be causing this issue? I'm working on improving our software's accessibility to meet WCAG standards and this is a bit of a sticking point.

[julien-deramond]

Hello @Gkat-Riva
Would you be able to create a reproducible environment with CodePen or Stackblitz?
Are you using the tab JavaScript plugin?
One thing that immediately stands out in the code you shared is that multiple links have aria-selected="true", which is unusual and could indicate an issue. Only the active one should have this.

[Gkat-Riva]

Hello @julien-deramond,

I'll have a look at creating a reproducible environment but am not certain how to do so and ensure everything is accurate to what we have currently within our script bundles using jquery 3.5.1

The multiple aria-selected attributes was a mistake in creating the example I used, but yest we are including the tab JavaScript plugin as part of the bootstrap.bundle.js file

The tabindex is assigned even if we add the data-bs-toggle="tab" on document ready and I'm not certain where it is coming from.

[Gkat-Riva]

Here is the CodePen: https://codepen.io/Gkat-Riva/pen/bNbgyYV

[Gkat-Riva]

Playing with CodePen, it looks as though the tabs no longer get tabindex="-1" if I completely remove the bootstrap JS files from the script. So it appears to be something within the BS JS files specifically applying this attribute.

https://codepen.io/Gkat-Riva/pen/ZYzLNma