The default tab's LI wrapper can receive focus

This issue affects users who use keyboard navigation to move through a page via the TAB key. When tabbing into a set of Quicktabs, the <li> wrapper around the default tab receives focus first. This happens because src/Plugin/TabRenderer/QuickTabs.php sets a tabindex attribute on the <li> with a value of 0. See the following code snippet from QuickTabs.php, lines 149-153:

      if ($default_tab == $index) {
        $wrapper_attributes['class'] = ['active'];
        $wrapper_attributes['aria-selected'] = 'true';
        $wrapper_attributes['tabindex'] = '0';
      }

All other tab list items receive a tabindex of -1.

The result of this is that the tab appears to have focus and be interactable. But the user can't switch between tabs when the <li> is in focus. The wrapped <a> has to be in focus to switch between tabs. Worse, if the user hits the TAB key again, then they focus on the <a>, but receive no visual feedback about it because of the outline: none; style on it. See the related issue at #1904294: Remove the "outline: none;" style from focused tabs. So at first it looks like the tab has focus, then on the next TAB press it looks like the focus goes nowhere. This is very confusing.

Note that this should only occur when the page first loads. After you switch between tabs at least one time, then js/quicktab.js will always set a tabindex value of -1 on every tab.

Unfortunately, I can't provide steps to reproduce the problem. After I started trying to fix the problem I became unable to reproduce it myself on two different dev sites. But you can see from the code that it does set a tabindex of 0 on the default tab.

Proposed Resolution

I don't understand why the tabindex attribute is being set on the <li> elements in the first place. I propose that they be removed and initialized on the <a> elements instead.

Original Report

The tabs on this module are failing WCAG accessibility rules for nested focusable elements. The li and the href have a tabindex, which prevents screen readers from cycling through the tabs:

https://dequeuniversity.com/rules/axe/4.6/nested-interactive?application...

Current module markup:

<li role="tab" aria-controls="quicktabs-tabpage-section_homepage_tabs-0" aria-selected="true" id="quicktabs-tab-section_homepage_tabs-0" tabindex="0" class="contacts active">
                 <a href="#" data-quicktabs-tab-index="0" tabindex="0">Tab</a>
        </li>