role="separator" is not a valid list child

[angelikatyborska]

Elements with role separator are not valid children of lists (ul, ol).

I found this issue while working on #414:

    Expected the HTML found at $('.u-list-none:nth-child(2)') to have no violations:
    <ul class="u-list-none">

    Received:
    <ul> and <ol> must only directly contain <li>, <script> or <template> elements (list)

    Fix all of the following:
      List element has direct children that are not allowed: [role=separator]

    You can find more information on this issue here:
    https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI

I saw that the documentation recommends adding <li role="separator"></li> as list children in dropdown menus. See screenshot:

I believe the semantically correct way of providing a visual separator between list elements would be to split content into two separate lists and style them accordingly, for example:

<div class="list-group">
  <ul>
    <li>..</li>
  </ul>
  <ul>
    <li>..</li>
  </ul>
</div>

.list-group *:is(ul, ol):not(:last-child)::after {
  // add some whitespace and a visual line
}

[planktonic]

Yes, we’d need to update in a few places:

• update the documentation for this component
• fix the HTML examples we give. They are currently not componentized, so we have static HTML repeated, we’d need to update them all
• Update styling to apply the spacing & border currently applied to the separator