Few pages
<PaginationStateful total={5} />Many pages (ellipsis collapse)
<PaginationStateful total={24} initialPage={7} />Accessibility
How Pagination works with assistive tech
- Role
- navigation
- Keyboard
- Tab + Enter (button); Arrow keys optional (if implemented)
- ARIA attributes
- aria-label="Pagination"; aria-current="page" on active page; aria-label on prev/next ("Previous page"/"Next page")
- Focus behavior
- visible-3px (global outline)
Ellipsis (...) is decorative (aria-hidden). Disabled prev/next use aria-disabled, not disabled attribute, to remain reachable by SR.