diff --git a/packages/fuselage/src/components/Pagination/Pagination.tsx b/packages/fuselage/src/components/Pagination/Pagination.tsx index ecdd3a5e23..362e8aad50 100644 --- a/packages/fuselage/src/components/Pagination/Pagination.tsx +++ b/packages/fuselage/src/components/Pagination/Pagination.tsx @@ -23,6 +23,8 @@ type PaginationProps = ComponentProps & { }) => string; onSetCurrent?: Dispatch>; onSetItemsPerPage?: Dispatch>; + paginationAriaLabel?: string; + pageAriaLabel?: string; }; const defaultItemsPerPageLabel = () => 'Items per page:'; @@ -42,6 +44,17 @@ const defaultShowingResultsLabel = ({ )} of ${count}`; const itemsPerPageOptions = [25, 50, 100] as ItemsPerPage[]; + +function getPageAriaLabel( + pageAriaLabel: string | undefined, + pageNumber: number, +) { + if (pageAriaLabel) { + return `${pageAriaLabel} ${pageNumber}`; + } + return undefined; +} + export const Pagination = ({ count, current = 0, @@ -51,6 +64,8 @@ export const Pagination = ({ onSetItemsPerPage, onSetCurrent, divider, + paginationAriaLabel, + pageAriaLabel, ...props }: PaginationProps) => { const hasItemsPerPageSelection = itemsPerPageOptions.length > 1; @@ -96,7 +111,14 @@ export const Pagination = ({ }; return ( - + {hasItemsPerPageSelection && ( @@ -120,15 +142,24 @@ export const Pagination = ({ )} - + {showingResultsLabel(renderingContext)} - + @@ -143,6 +174,10 @@ export const Pagination = ({ is='button' rcx-pagination__link disabled={currentPage === page} + aria-label={getPageAriaLabel( + pageAriaLabel, + (page as number) + 1, + )} onClick={handleSetPageLinkClick(page as number)} > {(page as number) + 1} @@ -155,6 +190,11 @@ export const Pagination = ({ is='button' rcx-pagination__forward disabled={currentPage === pages - 1} + aria-label={ + currentPage === pages - 1 + ? undefined + : getPageAriaLabel(pageAriaLabel, currentPage + 2) + } onClick={handleSetPageLinkClick(currentPage + 1)} >