♿ #24 - fix: fix missing aria-label on paginator

maykinmedia · Jan 26, 2024 · dc925f6 · dc925f6
1 parent 2dbb4e0
commit dc925f6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git 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
@@ -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<PaginatorProps> = ({
   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<PaginatorProps> = ({
   };
 
   return (
-    <nav className="mykn-paginator" {...props}>
+    <nav
+      className="mykn-paginator"
+      aria-label={formatMessage(labelPagination, context)}
+      {...props}
+    >
       <div className="mykn-paginator__section mykn-paginator__section--form">
         {pageSizeOptions.length > 0 && (
           <>