feat(ui-pagination): add prop to customize screenreader label on buttons

[matyasf]

The new prop, called screenReaderLabelPageButton allows to customize screenreader messages on the page buttons (e.g. 1,2,3,4...)

To test: Add this new prop to some of the new examples, and test with various screenreaders, that the given text is announced not the one on the button

INSTUI-4602

[Copilot]

Pull Request Overview

Adds a new screenReaderLabelPageButton prop to let users customize the aria-label for individual page buttons.

• Defines the new prop in props.ts, updates prop types and allowed props
• Passes the custom label into Pagination.Page and the base button component
• Adds a focused test for the new behavior and updates documentation with examples

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/ui-pagination/src/Pagination/props.ts	Introduce screenReaderLabelPageButton to props
packages/ui-pagination/src/Pagination/index.tsx	Spread screenReaderLabel onto <Pagination.Page>
packages/ui-pagination/src/Pagination/tests/Pagination.test.tsx	Test aria-label behavior for page buttons
packages/ui-pagination/src/Pagination/README.md	Document new prop with usage example
packages/ui-pagination/src/Pagination/PaginationButton/props.ts	Accept screenReaderLabel in button props
packages/ui-pagination/src/Pagination/PaginationButton/index.tsx	Apply aria-label when screenReaderLabel is set

Comments suppressed due to low confidence (4)

packages/ui-pagination/src/Pagination/tests/Pagination.test.tsx:1132

• Remove .only to ensure the full test suite runs and avoid accidentally skipping other tests.

it.only('should add aria-label when screenReaderLabelPageButton is set', async () => {

packages/ui-pagination/src/Pagination/README.md:66

• [nitpick] Avoid using backslashes for line breaks in Markdown; use blank lines or proper paragraph breaks to ensure consistent rendering.

You can set any `totalPageNumber`, the component can handle it easily.\

packages/ui-pagination/src/Pagination/props.ts:100

• [nitpick] The parameter name was changed to totalPageNumber, but the default prop still refers to numberOfPages. Consider aligning naming for consistency.

labelNumberInput?: (totalPageNumber: number) => React.ReactNode

packages/ui-pagination/src/Pagination/tests/Pagination.test.tsx:1143

• [nitpick] The regex match on the button name may miss aria-label comparisons; using getAllByLabelText or asserting directly on aria-label may yield a more robust test.

const paginationButtons = screen.getAllByRole('button', { name: /\d$/ })

[github-actions]

PR Preview Action v1.6.2
Preview removed because the pull request was closed.
2025-07-04 07:28 UTC

[ToMESSKa]

add this please to the functional example too

[matyasf]

done

[HerrTopi]

This would be cleaner if you'd use the ...(predicate?{}:{}) pattern. The current pattern with the && could result in undesirable behaviour.
When the predicate is false, the result will be the boolean false. Which in this case would not matter much, but ...false is not an intended expression

[matyasf]

done

[HerrTopi]

Sorry, I missed one. Could you do the same pred?{}:{} pattern here as well?

[matyasf]

done