Fix incorrect role and focus order in Pagination component

[joshfarrant]

Summary

Fixed two reported bugs in the Pagination component, as well as an additional bug uncovered during the course of this work.

List of notable changes:

This may look like more of a refactor than it is. Check individual commits for more info, but the key changes are:

• Renamed the usePaginationPages hook to PaginationItem as it was behaving more like a component than a hook; it accepted a props object and returned JSX
• Unified the attribute calculation and component rendering logic by removing buildComponentData from model.ts and instead put that logic inside the PaginationItem component.
• Updated stories to allow controls to be used across all stories
  • While not necessary for this work, this change makes it easier for the component to be manually tested in Storybook.
• Added a load of new tests to better assert the expected behaviour of the component.

The majority of the key logic hasn't changed, it's just been moved around and simplified slightly.

Bonus HTML!

I also grabbed the rendered HTML from the Pagination component before and after these changes and dropped them into a couple of quick diffs so you can more easily see the changes to the rendered markup

• Pagination — Page 4 of 5
• Pagination — Page 100 of 100

Note the following changes:

• Previous & Next buttons both now have role="button"
• tabindex="0" has been removed from all elements as it's not necessary since we're using the browser's default tab order. This also resolves https://github.com/github/primer/issues/3734 by removing tabindex from the ellipsis
• as="span" has been removed from the ellipsis element. This was leaking through to the DOM due to as="span" not being a valid prop on our Link component. The previously described refactor and improved typing will prevent this category of issues from happening in the future.
• When the Previous & Next buttons were disabled, their aria-label was removed. This PR also resolves that bug.

What should reviewers focus on?

• Test the component and make sure it works as expected.
• I've added tests to cover this, but check all of the expected attributes are still in the right place.

Steps to test:

I've added controls to all Pagination stories, so poke around in Storybook to check everything.

Supporting resources (related issues, external links, etc):

• Closes https://github.com/github/primer/issues/3734
• Closes https://github.com/github/primer/issues/3735
• Fixes an additional bug discovered during the course of this work where the Previous/Next buttons would lose their aria-label when disabled.

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

[changeset-bot]

🦋 Changeset detected

Latest commit: d2397f3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-docs	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-config	Patch
@primer/brand-storybook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🟢 No design token changes found

[joshfarrant]

In the previous implementation, this as wasn't working as expected. The element was still rendered as an <a> despite the as prop here.

Note the rendered HTML:

This contributed (along with the tabIndex set here) to them still being focusable, and causing https://github.com/github/primer/issues/3734

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

[Copilot]

Pull Request Overview

This PR refactors the Pagination component to centralize page rendering logic into a new PaginationItem component, fixes accessibility bugs around roles and focus behavior, and updates tests and stories to the StoryObj format.

• Renamed and relocated pagination item logic, removing buildComponentData in favor of an inline PaginationItem
• Fixed role, tabindex, and aria-label issues on ellipsis and prev/next buttons
• Updated tests (added new assertions) and migrated stories to StoryObj API

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/react/src/Pagination/model.ts	Updated PageType definition and buildPaginationModel
packages/react/src/Pagination/Pagination.tsx	Introduced PaginationItem component and removed old hook
packages/react/src/Pagination/Pagination.test.tsx	Added new tests and fixed existing test logic
packages/react/src/Pagination/Pagination.visual.spec.ts	Removed outdated default visual test
packages/react/src/Pagination/Pagination.stories.tsx	Migrated to StoryObj format
packages/react/src/Pagination/Pagination.features.stories.tsx	Migrated to StoryObj and updated meta inheritance
.changeset/nine-cycles-pump.md	Documented accessibility fixes

[Copilot]

The PageType definition is missing the precedesBreak property, but buildPaginationModel includes precedesBreak on NUM pages. Add precedesBreak?: boolean to PageType.

[joshfarrant]

brand/packages/react/src/Pagination/model.ts

Line 6 in 31fe3e8

precedesBreak?: boolean

Come on now , keep up