Merge pull request #132 from ConductionNL/feature/OP-57/pagination-re…

…factor

REFACTOR Pagination ariaLabels

README.md

@@ -4,6 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.17: Refactor Pagination to include aria labels and make aria label required on texarea, input and select components.
   - 2.2.15/2.2.16: Added more NLDS options to Pagination.
   - 2.2.13/2.2.14:
     - Updated Textarea and all Input components to allow aria-label.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.16",
+  "version": "2.2.17",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

src/components/Pagination/Pagination.tsx

@@ -11,10 +11,21 @@ interface PaginationProps {
   totalPages: number;
   currentPage: number;
   setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+  ariaLabels: {
+    nextPage: string;
+    previousPage: string;
+    page: string;
+  };
   layoutClassName?: string;
 }
 
-export const Pagination: React.FC<PaginationProps> = ({ totalPages, currentPage, setCurrentPage, layoutClassName }) => {
+export const Pagination: React.FC<PaginationProps> = ({
+  totalPages,
+  currentPage,
+  setCurrentPage,
+  ariaLabels,
+  layoutClassName,
+}) => {
   if (totalPages < 1) return <></>; // no pages available
 
   return (
@@ -31,13 +42,16 @@ export const Pagination: React.FC<PaginationProps> = ({ totalPages, currentPage,
       breakLabel="..."
       nextClassName={styles.next}
       previousClassName={styles.previous}
+      nextAriaLabel={ariaLabels.nextPage}
+      previousAriaLabel={ariaLabels.previousPage}
+      ariaLabelBuilder={(currentPage) => `${ariaLabels.page} ${currentPage}`}
       nextLabel={
-        <Button className={styles.button}>
+        <Button tabIndex={-1} className={styles.button}>
           <FontAwesomeIcon icon={faChevronRight} />
         </Button>
       }
       previousLabel={
-        <Button className={styles.button}>
+        <Button tabIndex={-1} className={styles.button}>
           <FontAwesomeIcon icon={faChevronLeft} />
         </Button>
       }

src/components/formFields/input.tsx

@@ -5,7 +5,7 @@ import { ErrorMessage } from "./errorMessage/ErrorMessage";
 
 export interface IInputProps {
   name: string;
-  ariaLabel?: string;
+  ariaLabel: string;
   disabled?: boolean;
   defaultValue?: string;
   icon?: JSX.Element;

src/components/formFields/select/select.tsx

@@ -11,7 +11,7 @@ interface ISelectProps {
   control: Control<FieldValues, any>;
   options: { label: string; value: string }[];
   name: string;
-  ariaLabel?: string;
+  ariaLabel: string;
   id?: string;
   defaultValue?: any;
   disabled?: boolean;

src/components/formFields/textarea.tsx

@@ -4,7 +4,7 @@ import { Textarea as UtrechtTextarea } from "@utrecht/component-library-react/di
 
 export interface ITextAreaProps {
   name: string;
-  ariaLabel?: string;
+  ariaLabel: string;
   disabled?: boolean;
   defaultValue?: string;
   hideErrorMessage?: boolean;