Pagination

WCAG 2.1 AA — release blocker

Keyboard

Screen reader

• The root <nav> has aria-label="Pagination" identifying the navigation region.
• The active page link receives aria-current="page" so screen readers announce the current page.
• PaginationPrevious and PaginationNext have built-in aria-label values: "Go to previous page" / "Go to next page".
• PaginationEllipsis is aria-hidden="true" with a screen-reader-only "More pages" fallback.

Focus management

• Focus order follows the visual left-to-right order.
• Disabled prev/next buttons remain in the focus order but do not activate.
• After selecting a page, focus stays on the clicked link — the page content updates without moving focus.

Color is never the only signal

• Active page uses a distinct background (accent) at 4.5:1 minimum contrast AND aria-current="page".
• Disabled buttons use 50% opacity AND the semantic disabled attribute.
• Minimum touch target of 36 px (md size) on mobile.

Audit checklist

• <nav> with aria-label="Pagination"
• Active page has aria-current="page"
• Prev/next buttons have descriptive aria-label
• Ellipsis hidden from assistive tech
• All links focusable and respond to Enter/Space
• 4.5:1 contrast on active page indicator
• 36 px minimum touch target on mobile