Lists do not contain only `li` elements and script supporting elements

[pdehaan]

https://stage.experimenter.nonprod.dataops.mozgcp.net/nimbus/pdehaan-2021-02-18-lighthouse-audit/edit/overview

Lists do not contain only <li> elements and script supporting elements (<script> and <template>).

Screen readers have a specific way of announcing lists. Ensuring proper list structure aids screen reader output. Learn more.

Failing Elements
--
Experiments Overview Branches Metrics Audience Review & Launch Missing detail…<ul class="flex-column font-weight-semibold nav">

I believe this is referring to the application sidebar where we have a <ul> tag with some nested <div>s which are outside of an <li>:

<ul class="flex-column font-weight-semibold nav">
  <li class="mx-1 my-2 mb-3 small font-weight-bold nav-item">
    <a data-sb-kind="pages/Home"
      class="text-secondary d-flex align-items-center"
      data-testid="nav-home"
      href="/nimbus"
      ><svg ... />Experiments</a>
  </li>
  <li class="mx-1 my-2 nav-item">
    <a aria-current="page"
      data-sb-kind="pages/EditOverview"
      class="text-primary d-flex align-items-center"
      data-testid="nav-edit-overview"
      href="/nimbus/pdehaan-2021-02-18-lighthouse-audit/edit/overview"
      ><svg ... />Overview<svg ... /></a>
  </li>
  <li class="mx-1 my-2 nav-item">
    <a data-sb-kind="pages/EditBranches"
      class="text-dark d-flex align-items-center"
      data-testid="nav-edit-branches"
      href="/nimbus/pdehaan-2021-02-18-lighthouse-audit/edit/branches"
      ><svg ... />Branches<svg ... /></a>
  </li>
  <li class="mx-1 my-2 nav-item">
    <a data-sb-kind="pages/EditMetrics"
      class="text-dark d-flex align-items-center"
      data-testid="nav-edit-metrics"
      href="/nimbus/pdehaan-2021-02-18-lighthouse-audit/edit/metrics"
      ><svg ... />Metrics</a>
  </li>
  <li class="mx-1 my-2 nav-item">
    <a data-sb-kind="pages/EditAudience"
      class="text-dark d-flex align-items-center"
      data-testid="nav-edit-audience"
      href="/nimbus/pdehaan-2021-02-18-lighthouse-audit/edit/audience"
      ><svg ... />Audience<svg ... /></a>
  </li>

  <div
    class="mx-1 my-2 d-flex text-muted font-weight-normal"
    data-testid="missing-details">
    <svg ... />
    <div>
      <p class="mb-1">Review &amp; Launch</p>
      <p class="mt-0 small">
        Missing details in:
        <a data-sb-kind="pages/EditOverview"
          data-testid="missing-detail-link-overview"
          href="/nimbus/pdehaan-2021-02-18-lighthouse-audit/edit/overview?show-errors"
          >Overview</a>,
        <a data-sb-kind="pages/EditBranches"
          data-testid="missing-detail-link-branches"
          href="/nimbus/pdehaan-2021-02-18-lighthouse-audit/edit/branches?show-errors"
          >Branches</a>,
        <a data-sb-kind="pages/EditAudience"
          data-testid="missing-detail-link-audience"
          href="/nimbus/pdehaan-2021-02-18-lighthouse-audit/edit/audience?show-errors"
          >Audience</a>
      </p>
    </div>
  </div>
</ul>

┆Issue is synchronized with this Jira Task ┆Issue Number: EXP-975

[pdehaan]

This seems to be the only real warning I found (at least during the first 4 pages of the Draft intake forms). There was a red herring about missing charset and missing meta description and the page being blocked from indexing, but not sure we care about those.