List rule generates false positive when role attribute present

[dedavidson]

Product

axe-core

Product Version

4.8.2

Latest Version

• [X] I have tested the issue with the latest version of the product

Issue Description

Expectation

I would expect no issue to be generated when a properly structured list using <ul> and <li> tags is scanned and an <li> tag has a role attribute.

Actual

The issue <ul> and <ol> must only directly contain <li>, <script> or <template> elements is shown.

How to Reproduce

<ul class="pager__items js-pager__items">
  <li class="pager__item is-active">
    <a href="?page=0" title="Current page" aria-current="page">
      <span class="visually-hidden"> Current page </span>1 </a>
  </li>
  <li class="pager__item">
    <a href="?page=1" title="Go to page 2">
      <span class="visually-hidden"> Page </span>2 </a>
  </li>
  <li class="pager__item">
    <a href="?page=2" title="Go to page 3">
      <span class="visually-hidden"> Page </span>3 </a>
  </li>
  <li class="pager__item">
    <a href="?page=3" title="Go to page 4">
      <span class="visually-hidden"> Page </span>4 </a>
  </li>
  <li class="pager__item">
    <a href="?page=4" title="Go to page 5">
      <span class="visually-hidden"> Page </span>5 </a>
  </li>
  <li class="pager__item">
    <a href="?page=5" title="Go to page 6">
      <span class="visually-hidden"> Page </span>6 </a>
  </li>
  <li class="pager__item">
    <a href="?page=6" title="Go to page 7">
      <span class="visually-hidden"> Page </span>7 </a>
  </li>
  <li class="pager__item">
    <a href="?page=7" title="Go to page 8">
      <span class="visually-hidden"> Page </span>8 </a>
  </li>
  <li class="pager__item">
    <a href="?page=8" title="Go to page 9">
      <span class="visually-hidden"> Page </span>9 </a>
  </li>
  <li class="pager__item pager__item--ellipsis" role="presentation">…</li>
  <li class="pager__item pager__item--next">
    <a href="?page=1" title="Go to next page" rel="next">
      <span class="visually-hidden">Next page</span>
      <span aria-hidden="true">Next ›</span>
    </a>
  </li>
  <li class="pager__item pager__item--last">
    <a href="?page=16" title="Go to last page">
      <span class="visually-hidden">Last page</span>
      <span aria-hidden="true">Last »</span>
    </a>
  </li>
</ul>

it fails because of the role="presentation" attribute.

[straker]

Thanks for the issue. Adding an item with role=presentation (or any other non listitem role really) in a list causes problems for screen readers. In Voiceover / Safari, navigating to the list announces 12 items (but sometimes 11). Furthermore, navigating the list allows you to navigate to the role=presentation child which can cause a lot of confusion as there is a non-listitem element in a list. In VoiceOver / Safari it's announced as a new list, in NVDA / Firefox it's announced without "bullet" which means it's not a listitem, and in JAWS / Chrome it's announced with "bullet" which makes it sound like it's part of the list but not counted in the total number.

[dbjorge]

I agree with @straker that this failure represents a real accessibility issue, so it's probably good/intended for the list rule to give a violation here.

However, I also agree that the message that the rule shows is misleading in this case. We're already tracking a related issue #4294 where we're discussing making the list rule more aware of the impact of role attributes - I think the case you bring up here is something we should consider as we rethink the rule's messaging in #4294.