[EuiPagination][A11y] Prevent duplicate aria-label

[mgadewoll]

Description

relates to elastic/kibana#214104

Currently EuiPagination uses the same aria-label for it's nav (code) and ul (code) elements due to spreading the props to nav. This results in a duplicated output in screen readers.

We should instead limit the aria-label to the nav element or check if we need to support a standalone aria-label for nav and ul.

[weronikaolejniczak]

I looked into how the pagination is constructed in different places, including:

• mdn web docs - CSS Layout cookbook
• The Component Gallery
• A11Y Style Guide
• MaterialUI
• ChakraUI
• Grommet

In majority, they use nav (with aria-label that says "pagination"), ul and a / button (wrapped in li) tags. Some skip ul in case plain buttons are used. Some use spans for the current page. Some even skip the nav element and add the aria-label and role="navigation" to the ul element which is incorrect as outlined here.

Looking at the common requirements:

• has to be wrapped with nav element
• has a meaningful aria-label to the nav element to distinguish it from other types of navigation (e.g. main navigation, breadcrumbs)
• adds the aria-current="page" to the list item that represents the current page (it's common to exclude the link here)
• adds an accessible label to all list items (e.g. using aria-label)

Code example:

<nav aria-label="Pagination">
  <ul>
    <li><a href="/blog">1</a></li>
    <li aria-current="page">2</li>
    <li><a href="/blog?p=3">3</a></li>
  </ul>
</nav>

Markup examples

MUI

ChakraUI

Grommet

EUI markup

<nav>
  <span aria-atomic="true" aria-relevant="additions text" role="status">Page 6 of 10</span>
  <button type="button" aria-label="Previous page" title="Previous page" data-test-subj="pagination-button-previous">
    <svg />
  </button>
  <ul>
    <li>
      <button type="button" aria-label="Page 1 of 10" data-test-subj="pagination-button-0">
        <span>
          <span>1</span>
        </span>
      </button>
    </li>
    <li aria-label="Skipping pages 2 to 3">…</li>
    <li>
      <button type="button" aria-label="Page 4 of 10" data-test-subj="pagination-button-3">
        <span>
          <span>4</span>
        </span>
      </button>
    </li>
    <li>
      <button type="button" aria-label="Page 5 of 10" data-test-subj="pagination-button-4">
        <span>
          <span>5</span>
        </span>
      </button>
    </li>
    <li>
      <button disabled type="button" aria-label="Page 6 of 10" data-test-subj="pagination-button-5" aria-current="true">
        <span>
          <span>6</span>
        </span>
      </button>
    </li>
    <li>
      <button type="button" aria-label="Page 7 of 10" data-test-subj="pagination-button-6">
        <span>
          <span>7</span>
        </span>
      </button>
    </li>
    <li>
      <button type="button" aria-label="Page 8 of 10" data-test-subj="pagination-button-7">
        <span>
          <span>8</span>
        </span>
      </button>
    </li>
    <li>
      <button type="button" aria-label="Page 9 of 10" data-test-subj="pagination-button-8">
        <span>
          <span>9</span>
        </span>
      </button>
    </li>
    <li>
      <button type="button" aria-label="Page 10 of 10" data-test-subj="pagination-button-9">
        <span>
          <span>10</span>
        </span>
      </button>
    </li>
  </ul>
  <button type="button" aria-label="Next page" title="Next page" data-test-subj="pagination-button-next">
    <svg />
  </button>
</nav>

Proposed solution:

Remove aria-label from the ul element, only spread to the nav element. Use aria-current="page".

[mgadewoll]

@weronikaolejniczak Great detailed summary of your research!
Let's go ahead with your proposed solution 👍