dequelabs / dequelabs/axe-core

List rule generates false positive when role attribute present

Open
#4,313 2 comments 0 reactions 0 assignees View on GitHub
rule metadata rules
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 23h
Merged PRs (30d)
17

Description

### 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`

    ` and `
  • ` tags is scanned and an `
  • ` tag has a role attribute.

    #### Actual
    The issue [`

      ` and `
        ` must only directly contain `
      1. `, `` or `<template>` elements](https://dequeuniversity.com/rules/axe/4.8/list) is shown.

        #### How to Reproduce
        ```html
        <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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.