Pagination

How it works

Focus moves through every interactive element of the pagination with a visible indicator.

Rules

• Make every page a link. Its href carries the page (?page=3) and the current one has aria-current="page".
• Following a link updates the address, so Back and Forward, a new tab and a shared link all land on the same page.
• Group the pagination in a nav with an aria-label that identifies it.
• Give each item aria-setsize (the total number of items) and aria-posinset (its position). ARIA allows them on the listitem, not on the link itself.
• Give each item an aria-label that says which page it goes to.
• Include next and previous links, each with its own label. A link cannot be disabled, so leave them out on the first and the last page.
• Label an ellipsis.
• Every time a page loads, announce which page it is and how many items arrived: “Page 3 loaded. Showing 20 items”.

Implementation

• A reusable hook with a generic type fetches the data from a URL, the current page and a page size.
• The component takes currentPage and totalPages, an hrefFor function that builds the address of each link, and onNavigate for a plain click.
• getPageNumbers keeps five centred items, with an ellipsis after the fourth item and before the last three.