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

by

0👍

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.

Leave a comment