list-children-valid

Lists must only directly contain list items

Checks that <ul>/<ol> elements only have <li>, <script>, or <template> as direct children.

Applies to. Applies to <ul>/<ol> elements that have at least one direct element child.

Expectation. Every direct element child is <li>, <script>, or <template>. UNLESS it has an explicit `role` attribute, in which case the explicit role wins over the tag entirely: a child is valid iff that role is "listitem" (so `<li role="presentation">`/`<li role="menuitem">` are invalid despite the <li> tag, and conversely a non-<li> element explicitly given `role="listitem"` is valid). A wrapper <div> used for styling (no role at all) still breaks list semantics the same as before.

Examples

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

<ul>
  <li>Elderberry</li>
  <div>wrapper</div>
</ul>

View source