tabs - accessibility issue when using ul/li semantic

[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 #28927 but nothing about that semantic warning

There's two options :

1. Just replace ul and li by div element and keep the current 3 levels tablist->li->tab in documentation
2. 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

[patrickhlauke]

There's two options

third option: add role="presentation" to the <li> elements

[Lausselloic]

You're right, in my mind role="presentation" also remove children roles but in fact not.
So wich one have your preference to improve the documentation?