Skip to content

fix(a11y): Set Pagination's last page aria-label to indicate that it is the last page #3499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brandonlenz merged 4 commits into from
Jun 22, 2026
Merged

fix(a11y): Set Pagination's last page aria-label to indicate that it is the last page #3499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
76719ac
Move PaginationPage props into own type
brandonlenz Jun 9, 2026
16b7bf2
Set aria-label specifically for the last page
brandonlenz Jun 9, 2026
779c5f9
Make isCurrent required (prop was already always set)
brandonlenz Jun 22, 2026
a9b164f
Merge branch 'main' into bl-last-page
brandonlenz Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 40 additions & 45 deletions src/components/Pagination/Pagination.test.tsx
View file
Open in desktop

@brandonlenz brandonlenz Jun 9, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some minor test refactoring can be found in this file

Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,15 @@ import React from 'react'
import { Pagination } from './Pagination'

describe('Pagination component', () => {
const testPages = 24
const testThreePages = 3
const testSevenPages = 7
const totalPages = 24
const testPathname = '/test-pathname'

it('renders pagination for a list of pages', () => {
const currentPageNumber = 10
render(
<Pagination
totalPages={testPages}
currentPage={10}
totalPages={totalPages}
currentPage={currentPageNumber}
pathname={testPathname}
/>
)
Expand All @@ -31,21 +30,22 @@ describe('Pagination component', () => {
'href',
`${testPathname}?page=9`
)
expect(screen.getByLabelText('Page 10')).toHaveAttribute(
const currentPage = screen.getByLabelText(`Page ${currentPageNumber}`)
expect(currentPage).toHaveAttribute(
'href',
`${testPathname}?page=10`
)
expect(screen.getByLabelText('Page 10')).toHaveAttribute(
'aria-current',
'page'
`${testPathname}?page=${currentPageNumber}`
)
expect(currentPage).toHaveAttribute('aria-current', 'page')

expect(screen.getByLabelText('Page 11')).toHaveAttribute(
'href',
`${testPathname}?page=11`
)
expect(screen.getByLabelText('Page 24')).toHaveAttribute(

const lastPage = screen.getByLabelText(`Last page, page ${totalPages}`)
expect(lastPage).toHaveAttribute(
'href',
`${testPathname}?page=24`
`${testPathname}?page=${totalPages}`
)
expect(screen.getByLabelText('Next page')).toHaveAttribute(
'href',
Expand All @@ -56,7 +56,7 @@ describe('Pagination component', () => {
it('only renders the maximum number of slots', () => {
render(
<Pagination
totalPages={testPages}
totalPages={totalPages}
currentPage={10}
pathname={testPathname}
/>
Expand All @@ -67,7 +67,7 @@ describe('Pagination component', () => {
it('renders pagination when the first page is current', () => {
render(
<Pagination
totalPages={testPages}
totalPages={totalPages}
currentPage={1}
pathname={testPathname}
/>
Expand All @@ -83,24 +83,25 @@ describe('Pagination component', () => {
it('renders pagination when the last page is current', () => {
render(
<Pagination
totalPages={testPages}
totalPages={totalPages}
currentPage={24}
pathname={testPathname}
/>
)
expect(screen.queryByLabelText('Previous page')).toBeInTheDocument()
expect(screen.queryByLabelText('Next page')).not.toBeInTheDocument()
expect(screen.getByLabelText('Page 24')).toHaveAttribute(
expect(screen.getByLabelText('Last page, page 24')).toHaveAttribute(
'aria-current',
'page'
)
})

it('renders overflow at the beginning and end when current page is in the middle', () => {
const currentPageNumber = 10
render(
<Pagination
totalPages={testPages}
currentPage={10}
totalPages={totalPages}
currentPage={currentPageNumber}
pathname={testPathname}
/>
)
Expand All @@ -116,21 +117,20 @@ describe('Pagination component', () => {
'href',
`${testPathname}?page=9`
)
expect(screen.getByLabelText('Page 10')).toHaveAttribute(
const currentPage = screen.getByLabelText(`Page ${currentPageNumber}`)
expect(currentPage).toHaveAttribute(
'href',
`${testPathname}?page=10`
)
expect(screen.getByLabelText('Page 10')).toHaveAttribute(
'aria-current',
'page'
`${testPathname}?page=${currentPageNumber}`
)
expect(currentPage).toHaveAttribute('aria-current', 'page')
expect(screen.getByLabelText('Page 11')).toHaveAttribute(
'href',
`${testPathname}?page=11`
)
expect(screen.getByLabelText('Page 24')).toHaveAttribute(
const lastPage = screen.getByLabelText(`Last page, page ${totalPages}`)
expect(lastPage).toHaveAttribute(
'href',
`${testPathname}?page=24`
`${testPathname}?page=${totalPages}`
)
expect(screen.getByLabelText('Next page')).toHaveAttribute(
'href',
Expand All @@ -142,7 +142,7 @@ describe('Pagination component', () => {
it('renders overflow at the end when at the beginning of the pages', () => {
render(
<Pagination
totalPages={testPages}
totalPages={totalPages}
currentPage={3}
pathname={testPathname}
/>
Expand Down Expand Up @@ -176,9 +176,10 @@ describe('Pagination component', () => {
'href',
`${testPathname}?page=5`
)
expect(screen.getByLabelText('Page 24')).toHaveAttribute(
const lastPage = screen.getByLabelText(`Last page, page ${totalPages}`)
expect(lastPage).toHaveAttribute(
'href',
`${testPathname}?page=24`
`${testPathname}?page=${totalPages}`
)
expect(screen.getByLabelText('Next page')).toHaveAttribute(
'href',
Expand All @@ -190,7 +191,7 @@ describe('Pagination component', () => {
it('renders overflow at the beginning when at the end of the pages', () => {
render(
<Pagination
totalPages={testPages}
totalPages={totalPages}
currentPage={21}
pathname={testPathname}
/>
Expand Down Expand Up @@ -224,9 +225,10 @@ describe('Pagination component', () => {
'href',
`${testPathname}?page=23`
)
expect(screen.getByLabelText('Page 24')).toHaveAttribute(
const lastPage = screen.getByLabelText(`Last page, page ${totalPages}`)
expect(lastPage).toHaveAttribute(
'href',
`${testPathname}?page=24`
`${testPathname}?page=${totalPages}`
)
expect(screen.getByLabelText('Next page')).toHaveAttribute(
'href',
Expand All @@ -242,6 +244,7 @@ describe('Pagination component', () => {
'href',
`${testPathname}?page=${randomPage + 1}`
)
expect(screen.queryByLabelText(/^Last page, page/)).not.toBeInTheDocument()
})

it('can click onClickNext, onClickPrevious and onClickPagenumber', () => {
Expand All @@ -251,7 +254,7 @@ describe('Pagination component', () => {

const { getByTestId, getAllByTestId } = render(
<Pagination
totalPages={testPages}
totalPages={totalPages}
currentPage={21}
pathname={testPathname}
onClickPrevious={mockOnClickPrevious}
Expand All @@ -274,23 +277,15 @@ describe('Pagination component', () => {
describe('for fewer pages than the max slots', () => {
it('renders pagination with no overflow 1', () => {
render(
<Pagination
totalPages={testThreePages}
currentPage={2}
pathname={testPathname}
/>
<Pagination totalPages={3} currentPage={2} pathname={testPathname} />
)
expect(screen.getAllByRole('listitem')).toHaveLength(5)
expect(screen.queryAllByText('…')).toHaveLength(0)
})

it('renders pagination with no overflow 2', () => {
render(
<Pagination
totalPages={testSevenPages}
currentPage={4}
pathname={testPathname}
/>
<Pagination totalPages={7} currentPage={4} pathname={testPathname} />
)
expect(screen.getAllByRole('listitem')).toHaveLength(9)
expect(screen.queryAllByText('…')).toHaveLength(0)
Expand All @@ -301,7 +296,7 @@ describe('Pagination component', () => {
it('only renders the maximum number of slots', () => {
render(
<Pagination
totalPages={testPages}
totalPages={totalPages}
currentPage={10}
pathname={testPathname}
maxSlots={10}
Expand Down
31 changes: 19 additions & 12 deletions src/components/Pagination/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,23 @@ export type PaginationProps = {
) => void
} & JSX.IntrinsicElements['nav']

const PaginationPage = ({
page,
isCurrent,
pathname,
onClickPageNumber,
}: {
type PaginationPageProps = {
pathname: string
page: number
isCurrent?: boolean
isCurrent: boolean
isLastPage: boolean
onClickPageNumber?: (
event: React.MouseEvent<HTMLButtonElement>,
page: number
) => void
}) => {
}
const PaginationPage = ({
page,
isCurrent,
isLastPage,
pathname,
onClickPageNumber,
}: PaginationPageProps) => {
const linkClasses = classnames('usa-pagination__button', {
'usa-current': isCurrent,
})
Expand All @@ -40,6 +43,9 @@ const PaginationPage = ({
'text-underline'
)

const ariaLabel = isLastPage ? `Last page, page ${page}` : `Page ${page}`
const ariaCurrent = isCurrent ? 'page' : undefined

return (
<li
key={`pagination_page_${page}`}
Expand All @@ -49,8 +55,8 @@ const PaginationPage = ({
type="button"
data-testid="pagination-page-number"
className={buttonClasses}
aria-label={`Page ${page}`}
aria-current={isCurrent ? 'page' : undefined}
aria-label={ariaLabel}
aria-current={ariaCurrent}
onClick={(event) => {
onClickPageNumber(event, page)
}}>
Expand All @@ -60,8 +66,8 @@ const PaginationPage = ({
<Link
href={`${pathname}?page=${page}`}
className={linkClasses}
aria-label={`Page ${page}`}
aria-current={isCurrent ? 'page' : undefined}>
aria-label={ariaLabel}
aria-current={ariaCurrent}>
{page}
</Link>
)}
Expand Down Expand Up @@ -226,6 +232,7 @@ export const Pagination = ({
page={pageNum}
pathname={pathname}
isCurrent={pageNum === currentPage}
isLastPage={totalPages !== undefined && pageNum === totalPages}
onClickPageNumber={onClickPageNumber}
/>
)
Expand Down
Loading