Skip to content

Pagination - Recommended markup uses separator ARIA role in invalid location #186

@JoshTumath

Description

@JoshTumath

The GEL Technical Docs recommend the following markup for the pagination:

https://bbc.github.io/gel/components/load-more/#the-pagination-component

  <ol class="gel-pages-numbered">
    <li><a href="?page=1" aria-current="page">1</a></li>
    <li><a href="?page=2">2</a></li>
    <li><a href="?page=3">3</a></li>
    <li><a href="?page=4">4</a></li>
    <li><a href="?page=5">5</a></li>
    <li><a href="?page=6">6</a></li>
    <li><a href="?page=7">7</a></li>
    <li role="separator">&hellip;</li>
    <li><a href="?page=999">999</a></li>
  </ol>

It says the list item in the pagination with the ellipsis ('...') needs to be in a separator role, but changing a list item role to a separator is not allowed, so it gets flagged as invalid markup in tools like the axe automated a11y tests.

Can we change the technical docs to stop recommending that? And what would be an appropriate alternative?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions