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 and li by div 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