From 62f4b0ddcc6abf7389be9f91200840f978286716 Mon Sep 17 00:00:00 2001
From: Lennart Bank <contact@lencodes.com>
Date: Mon, 16 Oct 2023 14:38:18 +0200
Subject: [PATCH] REFACTOR Pagination ariaLabels

---
 README.md                                   |  1 +
 package.json                                |  2 +-
 src/components/Pagination/Pagination.tsx    | 20 +++++++++++++++++---
 src/components/formFields/input.tsx         |  2 +-
 src/components/formFields/select/select.tsx |  2 +-
 src/components/formFields/textarea.tsx      |  2 +-
 6 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 3a2d032..a3d73c7 100644
--- a/README.md
+++ b/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.
diff --git a/package.json b/package.json
index 7d5dfa8..1cd5b7f 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 0ffaae8..ea4fa74 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/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>
       }
diff --git a/src/components/formFields/input.tsx b/src/components/formFields/input.tsx
index ed63a51..4a769f2 100644
--- a/src/components/formFields/input.tsx
+++ b/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;
diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx
index ed6de4a..2bf4df4 100644
--- a/src/components/formFields/select/select.tsx
+++ b/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;
diff --git a/src/components/formFields/textarea.tsx b/src/components/formFields/textarea.tsx
index f6aea00..83c23f2 100644
--- a/src/components/formFields/textarea.tsx
+++ b/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;