Live code examples for CdrPagination can be found on CodeSandbox.
Pagination @ SM, MD, LG
At the SM, MD, and LG breakpoints, pagination displays as a list of number text links with Prev and Next links when applicable.
Pagination @ XS
At the XS breakpoint, pagination adapts to a Select component using the native UI dropdown menu.
For use when only prev and next data is available.
To ensure that usage of this component complies with accessibility guidelines:
- Wrap the pagination links in a
<nav>element to let screen readers recognize the pagination controls
role=navigationif the pagination component is not wrapped in a
aria-label="pagination"to describe the type of navigation
- Indicate the active page by adding
aria-current="page"to the link that points to the current page
- View these videos at a11ymattters, Accessible Pagination. They demonstrate before and after pagination tests using a screen reader voiceover
This component has compliance WCAG guidelines by:
- WCAG 2.4.8: Information about the user's location within a set of Web pages is available
- WCAG 3.2.3: Navigation patterns follow a consistent pattern. Only position pagination component at the bottom of the page
- WCAG 2.4.3: Focus state receives focus in an order that preserves meaning
- WCAG 2.4.7: Focus is visible
- WCAG 2.5.5: Target size for pagination links are large enough for users to easily activate them