Paginator

Paginator with buttons

<Paginator visuallyHiddenText="Pagination">
  <PaginatorButton
    variant="previous"
    href="#"
    visuallyHiddenText="Previous Page"
    disabled
  />
  <PaginatorStep visuallyHiddenText="Page 1">1</PaginatorStep>
  <PaginatorStep active visuallyHiddenText="Page 2">
    2
  </PaginatorStep>
  <PaginatorEllipses />
  <PaginatorStep visuallyHiddenText="Page 27">27</PaginatorStep>
  <PaginatorStep disabled visuallyHiddenText="Page 28">
    28
  </PaginatorStep>
  <PaginatorButton variant="next" href="#" visuallyHiddenText="Next Page" />
</Paginator>

Paginator with input

<Paginator visuallyHiddenText="Pagination">
  <PaginatorButton
    variant="previous"
    href="#"
    visuallyHiddenText="Previous Page"
    disabled
    onClick={() => console.log('Clicked previous')}
  />
  <PaginatorInput
    visuallyHiddenText="Go to page"
    onChange={e => console.log('Changed to page ' + e.target.value)}
  />
  <PaginatorLabel>of 35</PaginatorLabel>
  <PaginatorButton
    variant="next"
    href="#"
    visuallyHiddenText="Next Page"
    onClick={() => console.log('Clicked next')}
  />
</Paginator>

<!-- the aria-label values on all the elements must be localized! -->
<nav class="paginator" role="navigation" aria-label="Pagination">
  <a
    href="someurl"
    class="paginator-button-previous"
    aria-label="Previous Page"
  ></a>
  <!-- can be a <button> tag, if appropriate -->
  <input
    type="number"
    class="stylized-input paginator-input"
    value="NN"
    aria-label="Go to page"
    aria-describedby="examplePaginatorMax"
  />
  <span class="paginator-max" id="examplePaginatorMax">of NN</span>
  <a class="paginator-button-next" aria-label="Next Page"></a>
</nav>

Components

Guidelines

Developer Guidelines

• Paginator is a simple set of controls with no actual pagination logic behind them. The page that uses it will need to:

  • attach the URLs and/or handle any clicks to the Previous and Next buttons

  • attach a change handler to the input field, taking the user to the specified page when the input's value is changed

• Paginator buttons can use either <a> or <button> tags; the React PaginatorButton component will default to <a> tags. Use <a> tags if a click takes the user to a new page; use <button> tags if a click loads new content into the same page.

• If the user is at the first or last page, the Previous or Next button should be disabled accordingly:

  • In React: add the disabled prop to the PaginatorButton.

  • In vanilla JS: if your Paginator use <a> tags, change the Prev/Next button to a <span> tag and add class paginator-button-disabled. If your Paginator uses <button> tags, disable the button as you normally would for a button, by adding the attribute disabled="disabled".

Accessibility Guidelines

The buttons and the text input need additional text to guide the user as to their function.

• In React, use the visuallyHiddenText prop to provide guidance (as shown in the code example above).

• In vanilla JS, use aria-label and aria-describedby attributes (as show in the code example above). Any aria-label values will need to be localized, since they will be presented to the user by screen readers and assistive devices.