Что касается вкладок Foundation, у меня возникают некоторые проблемы с tabindex, и я не могу сосредоточиться на вкладках при использовании клавиатуры для навигации по странице.CMS, которую я использую, не позволяет мне иметь класс is-active на первой вкладке.Поэтому я использую JavaScript для динамического применения класса is-active.Однако, когда я это делаю, tabindex на привязке первой вкладки остается установленным как tabindex="-1", и поэтому невозможно перейти к вкладкам с помощью клавиатуры.
Когда класс is-active применяется по умолчанию (в демонстрационном примере), Foundation заботится о настройке tabindex="0", делающей его доступным с клавиатуры.Я настроил демо:
<ul class="tabs" data-tabs="0btzm1-tabs" id="example-tabs" role="tablist">
<li class="tabs-title is-active" role="presentation"><a href="#panel1" aria-selected="false" role="tab" aria-controls="panel1" id="panel1-label" tabindex="-1">Tab 1</a></li>
<li class="tabs-title" role="presentation"><a href="#panel2" role="tab" aria-controls="panel2" aria-selected="false" id="panel2-label" tabindex="-1">Tab 2</a></li>
<li class="tabs-title" role="presentation"><a href="#panel3" role="tab" aria-controls="panel3" aria-selected="false" id="panel3-label" tabindex="-1">Tab 3</a></li>
<li class="tabs-title" role="presentation"><a href="#panel4" role="tab" aria-controls="panel4" aria-selected="true" id="panel4-label" tabindex="-1">Tab 4</a></li>
<li class="tabs-title" role="presentation"><a href="#panel5" role="tab" aria-controls="panel5" aria-selected="false" id="panel5-label" tabindex="-1">Tab 5</a></li>
<li class="tabs-title" role="presentation"><a href="#panel6" role="tab" aria-controls="panel6" aria-selected="false" id="panel6-label" tabindex="-1">Tab 6</a></li>
</ul>
https://codepen.io/benvivo/pen/rQQVmZ
Заранее благодарен за любую помощь.