diff --git a/src/components/Pagination/Pagination.test.tsx b/src/components/Pagination/Pagination.test.tsx
index 29104654e..168a7b208 100644
--- a/src/components/Pagination/Pagination.test.tsx
+++ b/src/components/Pagination/Pagination.test.tsx
@@ -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(
)
@@ -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',
@@ -56,7 +56,7 @@ describe('Pagination component', () => {
it('only renders the maximum number of slots', () => {
render(
@@ -67,7 +67,7 @@ describe('Pagination component', () => {
it('renders pagination when the first page is current', () => {
render(
@@ -83,24 +83,25 @@ describe('Pagination component', () => {
it('renders pagination when the last page is current', () => {
render(
)
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(
)
@@ -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',
@@ -142,7 +142,7 @@ describe('Pagination component', () => {
it('renders overflow at the end when at the beginning of the pages', () => {
render(
@@ -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',
@@ -190,7 +191,7 @@ describe('Pagination component', () => {
it('renders overflow at the beginning when at the end of the pages', () => {
render(
@@ -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',
@@ -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', () => {
@@ -251,7 +254,7 @@ describe('Pagination component', () => {
const { getByTestId, getAllByTestId } = render(
{
describe('for fewer pages than the max slots', () => {
it('renders pagination with no overflow 1', () => {
render(
-
+
)
expect(screen.getAllByRole('listitem')).toHaveLength(5)
expect(screen.queryAllByText('…')).toHaveLength(0)
@@ -286,11 +285,7 @@ describe('Pagination component', () => {
it('renders pagination with no overflow 2', () => {
render(
-
+
)
expect(screen.getAllByRole('listitem')).toHaveLength(9)
expect(screen.queryAllByText('…')).toHaveLength(0)
@@ -301,7 +296,7 @@ describe('Pagination component', () => {
it('only renders the maximum number of slots', () => {
render(
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,
page: number
) => void
-}) => {
+}
+const PaginationPage = ({
+ page,
+ isCurrent,
+ isLastPage,
+ pathname,
+ onClickPageNumber,
+}: PaginationPageProps) => {
const linkClasses = classnames('usa-pagination__button', {
'usa-current': isCurrent,
})
@@ -40,6 +43,9 @@ const PaginationPage = ({
'text-underline'
)
+ const ariaLabel = isLastPage ? `Last page, page ${page}` : `Page ${page}`
+ const ariaCurrent = isCurrent ? 'page' : undefined
+
return (
{
onClickPageNumber(event, page)
}}>
@@ -60,8 +66,8 @@ const PaginationPage = ({
+ aria-label={ariaLabel}
+ aria-current={ariaCurrent}>
{page}
)}
@@ -226,6 +232,7 @@ export const Pagination = ({
page={pageNum}
pathname={pathname}
isCurrent={pageNum === currentPage}
+ isLastPage={totalPages !== undefined && pageNum === totalPages}
onClickPageNumber={onClickPageNumber}
/>
)