Clarify li element role allowances

[scottaohara]

Closes #351

This change is to clarify that if an li is a child of a ul, ol, or menu element, and those elements are exposed as a list, then no other role can be specified on the li.

However, if the parent of the li is no longer exposed as a list, or if someone were to write invalid markup and use an li outside of the expected list > listitem markup pattern, then any role should be allowed on the li (so long as the role is a role allowed by the li's parent element)

For instance,

<ul role=table>
  <li role=button>...</li>
</ul>

is not be allowed as a button cannot be a direct child of a table. However, but a role=row on the li would be allowed in this example.

and

<div>
  <li role=paragraph>...</li>
</div>

is invalid HTML, but as the li is not a child of a list element, it should be allowed to have any role.

test cases

• [ ] HTML Validator
• [x] IBM Equal Access Accessibility Checker
• [ ] axe-Core
• [x] ARC Toolkit

---

Preview | Diff

[scottaohara]

cc @stevefaulkner @patrickhlauke please review

[stevefaulkner]

those elements are exposed as a list, then no other role can be specified on the li.

what about <li role=separator> or <li role=none>

[mitchellevan]

what about <li role=separator> or <li role=none>

I support allowing role="none" on <li>. have seen this in the wild, and I don't think we should discourage it:

<ul>
  <li>Bats</li>
  <li class="purely-decorative" role="none"></li> <!-- this list item has no content -->
  <li>Cats</li>
</ul>

I lean against allowing role="separator" on <li>. Disallowing role="separator" would encourage this reasonable structure:

<ul>
  <li>Bats</li>
  <li><span role="separator"></span></li>
  <li>Cats</li>
</ul>

[mitchellevan]

Or if we want the rules to be more opinionated (in the software sense), say one of the following:

• Allow role="none" on empty <li>, disallow otherwise
• Say role="none" SHOULD NOT be on <li> (but valid reasons may exist)

[scottaohara]

that seems reasonable on its surface, but would make the implementation of the rule more complicated. practically one could do aria-hidden=true on the li to achieve the same effect, and not have to have additional checks to the rule to determine not only if it was empty, but if it did have children that they only equated to white space, or themselves had alt="", or aria-hidden=true or role=none/presentation, as applicable to the element and its children, if any.

re:

I lean against allowing role="separator" on <li>.

if that were actually allowed by ARIA/HTML, then it would be a reasonable allowance. Separately I have tested the current reality of how that works with AT, and while it causes some minor breakages depending on the browser/at combo, I have requested that become an allowance in HTML, which would then make it allowed in ARIA, and subsequently this spec. Until then though, there will be no change here on that matter.

[mitchellevan]

that seems reasonable on its surface, but would make the implementation of the rule more complicated. practically one could do aria-hidden=true on the li to achieve the same effect

I'm convinced. Thanks for the clear explanation.