False positive with list containing forbidden tags

[claudiu-cristea]

Product

axe-core

Product Version

4.8.2

Latest Version

• I have tested the issue with the latest version of the product

Issue Description

Expectation

With this HTML chunk:

<ul class="pagination pager__items js-pager__items  justify-content-center">
  <li class="page-item pager__item is-active active">
    <a href="?page=0" title="Current page" aria-current="page"
       class="page-link">
            <span class="visually-hidden">
              Current page
            </span>1</a>
  </li>
  <li class="page-item pager__item">
    <a href="?page=1" title="Go to page 2" class="page-link">
            <span class="visually-hidden">
              Page
            </span>2</a>
  </li>
  <li class="page-item pager__item">
    <a href="?page=2" title="Go to page 3" class="page-link">
            <span class="visually-hidden">
              Page
            </span>3</a>
  </li>
  <li class="page-item pager__item">
    <a href="?page=3" title="Go to page 4" class="page-link">
            <span class="visually-hidden">
              Page
            </span>4</a>
  </li>
  <li class="page-item pager__item">
    <a href="?page=4" title="Go to page 5" class="page-link">
            <span class="visually-hidden">
              Page
            </span>5</a>
  </li>
  <li class="page-item pager__item">
    <a href="?page=5" title="Go to page 6" class="page-link">
            <span class="visually-hidden">
              Page
            </span>6</a>
  </li>
  <li class="page-item pager__item">
    <a href="?page=6" title="Go to page 7" class="page-link">
            <span class="visually-hidden">
              Page
            </span>7</a>
  </li>
  <li class="page-item pager__item">
    <a href="?page=7" title="Go to page 8" class="page-link">
            <span class="visually-hidden">
              Page
            </span>8</a>
  </li>
  <li class="page-item pager__item">
    <a href="?page=8" title="Go to page 9" class="page-link">
            <span class="visually-hidden">
              Page
            </span>9</a>
  </li>


  <li class="page-item pager__item pager__item--ellipsis disabled"
      role="presentation"><span class="page-link">…</span></li>
  <li class="page-item pager__item pager__item--next">
    <a href="?page=1" title="Go to next page" rel="next" class="page-link">
      <span class="visually-hidden">Next page</span>
      <span aria-hidden="true">
              <svg class="bi icon--s">
                <use
                  xlink:href="/joinup/web/themes/ventuno/assets/icons/icons.svg#chevron-right"></use>
              </svg>
            </span>
    </a>
  </li>
  <li class="page-item pager__item pager__item--last">
    <a href="?page=1785" title="Go to last page" class="page-link">
      <span class="visually-hidden">Last page</span>
      <span aria-hidden="true">
              <svg class="bi icon--s">
                <use
                  xlink:href="/joinup/web/themes/ventuno/assets/icons/icons.svg#chevron-bar-right"></use>
              </svg>
            </span>
    </a>
  </li>
</ul>

I should not receive this violation:

ID:          list
Impact:      serious
Description: Ensures that lists are structured correctly
Help:        <ul> and <ol> must only directly contain <li>, <script> or
             <template> elements
See:         https://dequeuniversity.com/rules/axe/4.8/list?application=axeAPI
Tags:        cat.structure, wcag2a, wcag131, EN-301-549, EN-9.1.3.1

Actual

I've received the above violation

Full report:

[
  {
    "id": "list",
    "impact": "serious",
    "tags": [
      "cat.structure",
      "wcag2a",
      "wcag131",
      "EN-301-549",
      "EN-9.1.3.1"
    ],
    "description": "Ensures that lists are structured correctly",
    "help": "\u003Cul\u003E and \u003Col\u003E must only directly contain \u003Cli\u003E, \u003Cscript\u003E or \u003Ctemplate\u003E elements",
    "helpUrl": "https:\/\/dequeuniversity.com\/rules\/axe\/4.8\/list?application=axeAPI",
    "nodes": [
      {
        "any": [],
        "all": [],
        "none": [
          {
            "id": "only-listitems",
            "data": {
              "values": "[role=presentation]"
            },
            "relatedNodes": [
              {
                "html": "\u003Cli class=\u0022page-item pager__item pager__item--ellipsis disabled\u0022 role=\u0022presentation\u0022\u003E\u003Cspan class=\u0022page-link\u0022\u003E\u2026\u003C\/span\u003E\u003C\/li\u003E",
                "target": [
                  ".pager__item--ellipsis"
                ]
              }
            ],
            "impact": "serious",
            "message": "List element has direct children that are not allowed: [role=presentation]",
            
          }
        ],
        "impact": "serious",
        "html": "\u003Cul class=\u0022pagination pager__items js-pager__items  justify-content-center\u0022\u003E",
        "target": [
          ".pagination"
        ],
        "failureSummary": "Fix all of the following:\n  List element has direct children that are not allowed: [role=presentation]",
        
      }
    ]
  }
]

How to Reproduce

Run on https://joinup.ec.europa.eu/search with tags: wcag2a, wcag2aa

Comments

This seems to be the offending part:

<ul class="pagination pager__items js-pager__items  justify-content-center">
  ...
  <li class="page-item pager__item pager__item--ellipsis disabled"
      role="presentation"><span class="page-link">…</span></li>
  ...
</ul>

[straker]

Thanks for the issue. A list element (ul, or ol) can only contain listitem elements (for the most part). Because of the role="presentation" on the li, screen readers will not correctly interpret the list.

In JAWS/Chrome it reads as a list with 1 item missing, but you can navigate to the item and it reads it as part of the list (including using the term "bullet"). In NVDA/Firefox it reads as a list with 1 item missing but the item does not announce as a list item even though it is part of the list (does not announce "bullet"). Because of this you shouldn't use role="presentation" on an element within a list.

[straker]

Closing as a similar issue of #3935.