Versions Compared

Version Old Version 3 New Version Current
Changes made by

Nick Harris

Sergiy Nalyvayko

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Page Properties

Component type

Component

Document status

Status
colourRedYellow
titleDRAFTIN PROGRESS

Design source (in Figma)

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

Author

Nick Harris

Responsible

Milestone

3-

Note

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

1

Button

Used for previous and next actions.

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

Note

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

Key Content  

Item 

Type 

Notes 

Link

Alt text

Links will need appropriate alt text

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

Behaviour 

...

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 JS version of pagination

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

  • Links will navigate you to a new page of results.

  • Links open in the same window

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

  • Truncation rules:

    • TDB

Editorial 

  • X

  • X

  • X

Accessibility 

...

Key

...

Interaction

  • Aria considerations

  • etcN/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/

Info

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

Analytics & Data 

  • X

  • XN/A

Related/Similar Components 

  • List controls

    • Load more

    • Carousel

Future Expansion 

  • XN/A

  • X

Wider Conversations that may impact this 

  • Item: Description

  • Item: Description 

Inspiration from elsewhere 

  • X

  • X

Examples

Insert here

...

  • Lists: Where controls and logic for lists sit

Inspiration from elsewhere 

...

Examples

...