/
Brief: Pagination [Component]

Brief: Pagination [Component]

Owned by Nick Harris
Last updated: Jun 28, 2022 by Sergiy Nalyvayko (Unlicensed)
2 min read

Component type

Component

Document status

IN PROGRESS

Design source (in Figma)

https://www.figma.com/file/0kGNJaC3xZ66WElO5TWvX3/Chameleon-System-(Phase-2)?node-id=2324%3A44403

Author

@Nick Harris

Responsible

 

Milestone

-

 

Pagination is part of a larger ‘list controls' discussion that hasn’t concluded yet.

 

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Usage

Do’s

  • Use when there are too many results to show on a single page.

  • Your content can be logically split and splitting won’t cause context to be lost

Don’t

  • Paginate small lists

Anatomy

Item

Type

Notes

Item

Type

Notes

1

Link (icon link)

  • Navigates to previous or next page

2

Link

  • Shows page number and acts as the navigation method

3

Truncation

  • Truncates the list of pages based on behaviour below

I’m unsure from Ben’s designs what the behaviour of Truncation and ellipsis are.

Key Content  

Item 

Type 

Notes 

Link

aria-label="Goto Page {X}"

 

Link

aria-label="Current page, Page {X}"

*for the current page

Link

aria-current="true"

 

Button

Alt text

  • Previous and next buttons will need appropriate alt text

Nav

aria-label

  • Needs defining. “Choose a page“ maybe

<nav>

role="navigation"

aria-labe="Pagination Navigation"

 

Behaviour 

  • Pagination should be an <ol> wrapped in <nav>

  • Non JS

    • I don’t think there is a non-JS version of pagination

    • Pagination could the non-JS fallback for other list types.

  • Links will navigate you to a new page

  • Links open in the same window

  • The current page number is highlighted as the active page number

  • Truncation rules:

    • TDB

Editorial 

  • N/A

Accessibility 

  • As a user:

    • I should be able to navigate by keyboard.

    • I should be able to know that there is a pagination navigation when scanning the page with a screen reader.

    • Each navigation item should be read as "Goto Page 1".

    • I need to know which element is currently active.

    • I need to navigate with Next and Previous links.

Source: https://www.a11ymatters.com/pattern/pagination/

Possible update: To make pagination even more accessible, should be consider using “Previous“ and “Next“ labels in stead of chevrons?

Analytics & Data 

  • N/A

Related/Similar Components 

  • List controls

    • Load more

    • Carousel

Future Expansion 

  • N/A

Wider Conversations that may impact this 

  • Lists: Where controls and logic for lists sit

Inspiration from elsewhere 

Examples

Pagination on http://durex.co.uk