Axe devtool error: <ul> and <ol> must only directly contain <li>, <script> or <template> elements

Question

here is the code. As Li is inbuilt in <b-navbar> not sure where to find the li element

<div>
  <b-navbar type="light" variant="light">
    <b-nav-form>
      <b-input-group prepend="@">
        <b-form-input placeholder="Username"></b-form-input>
      </b-input-group>
    </b-nav-form>
  </b-navbar>
</div>

it occurs when I run axe devtool on chrome.

Answer 1

Thanks for posting the code sample but since the sample came from the bootstrap page, it's also helpful to post that as well

https://bootstrap-vue.org/docs/components/navbar#b-nav-form

If you inspect the code for the "username" field, you'll see:

<nav class="navbar navbar-light bg-light navbar-expand">
  <li class="form-inline">
    <form class="form-inline">
      <div role="group" class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" placeholder="Username" class="form-control" id="__BVID__624">
      </div>
    </form>
  </li>
</nav>

Notice the <li> is a child of the <nav> and doesn't have an <ol> or <ul> as a parent. That's invalid HTML so axe will catch it.