Contrib.social

Axe error reported on role=presentation in pagination

Open on Drupal.org →
Created on 10 March 2023, almost 2 years ago
Updated 17 March 2023, almost 2 years ago

Problem/Motivation

The pagination uses an ellipsis to truncate the number of pages displayed. Within the HTML this ellipsis is added in the list using <li role="presentation">. This is being flagged in axe devtools:

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

This was also noted in the USWDS pagination component and an issue has been opened there as well: https://github.com/uswds/uswds/issues/5022

Steps to reproduce

  1. Create a view with a pager.
  2. Run axe devtools

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Closed: duplicate

Version

10.1 ✨

Component
Markup  →

Last updated about 2 months ago

No maintainer
Created by

🇺🇸United States flanneryla

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

  • Issue created by @flanneryla
  • Comment almost 2 years ago →
    🇨🇦Canada mgifford Ottawa, Ontario

    Looks like we should pay more attention to the breadcrumbs. From Accessibility Insights:

    Title: WCAG 1.3.1: Ensures that lists are structured correctly (.usa-pagination__list)
    Tags: Accessibility, WCAG 1.3.1, list
    Issue: Ensures that lists are structured correctly (list - https://accessibilityinsights.io/info-examples/web/list)
    Target application: Pagination | U.S. Web Design System (USWDS) - https://designsystem.digital.gov/components/pagination/
    Element path: nav[aria-label=“Pagination”] > .usa-pagination__list
    Snippet: <ul class=“usa-pagination__list”>
    Related paths:

      nav[aria-label=“Pagination”] > .usa-pagination__list > .usa-pagination__overflow.usa-pagination__item[role=“presentation”]:nth-child(3)
  nav[aria-label=“Pagination”] > .usa-pagination__list > .usa-pagination__overflow.usa-pagination__item[role=“presentation”]:nth-child(7)

    How to fix:
    Fix all of the following:
    List element has direct children that are not allowed: [role=presentation]
    Environment: Microsoft Edge version 110.0.1587.57
    ====
    This accessibility issue was found using Accessibility Insights for Web 2.37.3 (axe-core 4.6.3), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

  • Comment almost 2 years ago →
    🇨🇦Canada mgifford Ottawa, Ontario

    Adding related issues.

  • Status changed to Closed: duplicate almost 2 years ago
  • Comment almost 2 years ago →
    🇺🇸United States smustgrave

    Closing as duplicate of 🐛 Ellipsis in pager template fails accessibility tests Needs work

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024