tabs - accessibility issue when using ul/li semantic
Created by: Lausselloic
Hello,
I just face a small accessibility error on tabs with content when using ul/li semantic and role="tablist"
as explain as default on documentation https://getbootstrap.com/docs/4.4/components/navs/#javascript-behavior
By setting role="tablist"
onto the ul
element, remove it's defaut html5 role list
and so li
's children are now orphan (aXe and other accessibility tools are raising an error)
I've seen the great job about keyboard handler by @patrickhlauke on https://github.com/twbs/bootstrap/pull/28927 but nothing about that semantic warning
There's two options :
- Just replace
ul
andli
bydiv
element and keep the current 3 levels tablist->li->tab in documentation - Clearly simplify tabs usage and keep as simple as possible like the one with nav
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
by the way at time developer can avoid that error by not using ul/li
Let me know if I could help by making a PR on V4 and or V5