diff --git a/src/components/paginator/paginator.stories.tsx b/src/components/paginator/paginator.stories.tsx index a5294f18..84bb4ef9 100644 --- a/src/components/paginator/paginator.stories.tsx +++ b/src/components/paginator/paginator.stories.tsx @@ -39,6 +39,7 @@ export const PaginatorComponent: Story = { labelCurrentPageRange: "{pageStart} - {pageEnd} of {pageCount}", labelGoToPage: "Go to", labelPageSize: "Show rows", + labelPagination: "Pagination", labelPrevious: "Go to previous page", labelNext: "Go to next page", }, @@ -67,6 +68,7 @@ export const PaginatorComponentWithSpinner: Story = { labelGoToPage: "Go to", labelLoading: "Loading", labelPageSize: "Show rows", + labelPagination: "Pagination", labelPrevious: "Go to previous page", labelNext: "Go to next page", onPageChange: () => new Promise((resolve) => setTimeout(resolve, 1000)), @@ -77,6 +79,7 @@ export const PaginatorComponentWithSpinner: Story = { const previousButton = canvas.getByLabelText("Go to previous page"); const nextButton = canvas.getByLabelText("Go to next page"); canvas.getByRole("navigation"); + canvas.getByLabelText("Pagination"); canvas.getByText("Show rows"); canvas.getByText("Go to"); diff --git a/src/components/paginator/paginator.tsx b/src/components/paginator/paginator.tsx index 85a59edf..21590a82 100644 --- a/src/components/paginator/paginator.tsx +++ b/src/components/paginator/paginator.tsx @@ -26,6 +26,9 @@ export type PaginatorProps = { /** The page size (accessible) label. */ labelPageSize: string; + /** The pagination (accessible) label. */ + labelPagination: string; + /** The go to previous page (accessible) label. */ labelPrevious: string; @@ -82,6 +85,7 @@ export const Paginator: React.FC = ({ labelCurrentPageRange = "{pageStart} - {pageEnd} of {pageCount}", labelGoToPage = "Go to", labelPageSize = "Show rows", + labelPagination = "Pagination", labelPrevious = "Go to previous page", labelNext = "Go to next page", labelLoading, @@ -179,7 +183,11 @@ export const Paginator: React.FC = ({ }; return ( -