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.