From 0f656a466a030594705dabb325751cb20c15967d Mon Sep 17 00:00:00 2001
From: Remko Huisman <43807324+remko48@users.noreply.github.com>
Date: Mon, 16 Oct 2023 09:09:20 +0200
Subject: [PATCH 1/7] Revert "Revert "feature/XW-87/select-WCAG""

---
 README.md                                   |  1 +
 package.json                                |  2 +-
 src/components/formFields/select/select.tsx | 58 +++++++++++++++++++++
 3 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ab772f4..79eb111 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.12: Updated Select components to WCAG with aria-label and role.
   - 2.2.11: Updated Primary and Secondary topnav to NLDS.
   - 2.2.10: Added z-index to tooltip.
   - 2.2.9: Added CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate to index.
diff --git a/package.json b/package.json
index cc6cd0e..77db6a1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.11",
+  "version": "2.2.12",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx
index 853b833..9646eb7 100644
--- a/src/components/formFields/select/select.tsx
+++ b/src/components/formFields/select/select.tsx
@@ -11,6 +11,7 @@ interface ISelectProps {
   control: Control<FieldValues, any>;
   options: { label: string; value: string }[];
   name: string;
+  ariaLabel?: string;
   id?: string;
   defaultValue?: any;
   disabled?: boolean;
@@ -72,7 +73,25 @@ export const SelectMultiple = ({
   hideErrorMessage,
   menuPlacement,
   placeholder,
+  ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
+  React.useEffect(() => {
+    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
+      if (element?.role !== "presentation") {
+        element.setAttribute("role", "presentation");
+      }
+    });
+    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
+      if (element.role !== "presentation") {
+        element.setAttribute("role", "presentation");
+      }
+    });
+    document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
+      if (element.role !== "presentation") {
+        element.setAttribute("role", "presentation");
+      }
+    });
+  }, []);
   return (
     <Controller
       {...{ control, name, defaultValue }}
@@ -81,6 +100,7 @@ export const SelectMultiple = ({
         return (
           <>
             <ReactSelect
+              aria-label={ariaLabel}
               inputId={id}
               value={value ?? ""}
               className={clsx(styles.select, errors[name] && styles.error)}
@@ -112,7 +132,25 @@ export const SelectCreate = ({
   hideErrorMessage,
   menuPlacement,
   placeholder,
+  ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
+  React.useEffect(() => {
+    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
+      if (element.role !== "presentation") {
+        element.setAttribute("role", "presentation");
+      }
+    });
+    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
+      if (element.role !== "presentation") {
+        element.setAttribute("role", "presentation");
+      }
+    });
+    document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
+      if (element.role !== "presentation") {
+        element.setAttribute("role", "presentation");
+      }
+    });
+  }, []);
   return (
     <Controller
       {...{ control, name, defaultValue }}
@@ -121,6 +159,7 @@ export const SelectCreate = ({
         return (
           <>
             <CreatableSelect
+              aria-label={ariaLabel}
               inputId={id}
               value={value ?? ""}
               placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
@@ -153,7 +192,25 @@ export const SelectSingle = ({
   hideErrorMessage,
   menuPlacement,
   placeholder,
+  ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
+  React.useEffect(() => {
+    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
+      if (element.role !== "presentation") {
+        element.setAttribute("role", "presentation");
+      }
+    });
+    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
+      if (element.role !== "presentation") {
+        element.setAttribute("role", "presentation");
+      }
+    });
+    document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
+      if (element.role !== "presentation") {
+        element.setAttribute("role", "presentation");
+      }
+    });
+  }, []);
   return (
     <Controller
       {...{ control, name, defaultValue }}
@@ -162,6 +219,7 @@ export const SelectSingle = ({
         return (
           <>
             <ReactSelect
+              aria-label={ariaLabel}
               inputId={id}
               value={value ?? ""}
               className={clsx(styles.select, errors[name] && styles.error)}

From 8fae9b5a5cc32661f9663029f2372d10fb7dae7c Mon Sep 17 00:00:00 2001
From: Remko Huisman <43807324+remko48@users.noreply.github.com>
Date: Mon, 16 Oct 2023 09:09:33 +0200
Subject: [PATCH 2/7] Revert "Revert "feature/XW-87/select-WCAG""

---
 README.md                                   |  3 +++
 package.json                                |  2 +-
 src/components/formFields/input.tsx         | 15 +++++++++++++++
 src/components/formFields/select/select.tsx |  2 +-
 src/components/formFields/textarea.tsx      |  9 ++++++++-
 5 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 79eb111..d9ab059 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,9 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.13:
+    - Updated Textarea and all Input components to allow aria-label.
+    - Updated Select components.
   - 2.2.12: Updated Select components to WCAG with aria-label and role.
   - 2.2.11: Updated Primary and Secondary topnav to NLDS.
   - 2.2.10: Added z-index to tooltip.
diff --git a/package.json b/package.json
index 77db6a1..3256455 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.12",
+  "version": "2.2.13",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
diff --git a/src/components/formFields/input.tsx b/src/components/formFields/input.tsx
index 8485e6e..ed63a51 100644
--- a/src/components/formFields/input.tsx
+++ b/src/components/formFields/input.tsx
@@ -5,6 +5,7 @@ import { ErrorMessage } from "./errorMessage/ErrorMessage";
 
 export interface IInputProps {
   name: string;
+  ariaLabel?: string;
   disabled?: boolean;
   defaultValue?: string;
   icon?: JSX.Element;
@@ -20,6 +21,7 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
   placeholder,
   errors,
   hideErrorMessage,
+  ariaLabel,
 }) => {
   return (
     <>
@@ -28,6 +30,7 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
         {...{ disabled, placeholder }}
         {...register(name, { ...validation })}
         invalid={errors[name]}
+        aria-label={ariaLabel}
       />
       {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
     </>
@@ -44,6 +47,7 @@ export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
   placeholder,
   errors,
   hideErrorMessage,
+  ariaLabel,
 }) => (
   <>
     <Textbox
@@ -51,6 +55,7 @@ export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
       {...{ defaultValue, disabled, placeholder, icon }}
       {...register(name, { ...validation })}
       invalid={errors[name]}
+      aria-label={ariaLabel}
     />
     {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
   </>
@@ -66,6 +71,7 @@ export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
   placeholder,
   errors,
   hideErrorMessage,
+  ariaLabel,
 }) => (
   <>
     <Textbox
@@ -74,6 +80,7 @@ export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
       {...{ defaultValue, disabled, placeholder, icon }}
       {...register(name, { ...validation })}
       invalid={errors[name]}
+      aria-label={ariaLabel}
     />
     {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
   </>
@@ -89,6 +96,7 @@ export const InputURL: React.FC<IInputProps & IReactHookFormProps> = ({
   placeholder,
   errors,
   hideErrorMessage,
+  ariaLabel,
 }) => (
   <>
     <Textbox
@@ -96,6 +104,7 @@ export const InputURL: React.FC<IInputProps & IReactHookFormProps> = ({
       {...{ defaultValue, disabled, placeholder, icon }}
       {...register(name, { ...validation })}
       invalid={errors[name]}
+      aria-label={ariaLabel}
     />
     {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
   </>
@@ -111,6 +120,7 @@ export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
   placeholder,
   errors,
   hideErrorMessage,
+  ariaLabel,
 }) => (
   <>
     <Textbox
@@ -118,6 +128,7 @@ export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
       {...{ defaultValue, disabled, placeholder, icon }}
       {...register(name, { ...validation, valueAsNumber: true })}
       invalid={errors[name]}
+      aria-label={ariaLabel}
     />
     {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
   </>
@@ -133,6 +144,7 @@ export const InputFloat: React.FC<IInputProps & IReactHookFormProps> = ({
   placeholder,
   errors,
   hideErrorMessage,
+  ariaLabel,
 }) => (
   <>
     <Textbox
@@ -141,6 +153,7 @@ export const InputFloat: React.FC<IInputProps & IReactHookFormProps> = ({
       {...{ disabled, placeholder, icon, defaultValue }}
       {...register(name, { ...validation, valueAsNumber: true })}
       invalid={errors[name]}
+      aria-label={ariaLabel}
     />
     {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
   </>
@@ -157,11 +170,13 @@ export const InputFile: React.FC<IInputFileProps & IInputProps & IReactHookFormP
   defaultValue,
   validation,
   register,
+  ariaLabel,
 }) => (
   <input
     className="denhaag-Textbox__input"
     type="file"
     {...{ defaultValue, disabled, accept }}
     {...register(name, { ...validation })}
+    aria-label={ariaLabel}
   />
 );
diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx
index 9646eb7..41cf75f 100644
--- a/src/components/formFields/select/select.tsx
+++ b/src/components/formFields/select/select.tsx
@@ -145,7 +145,7 @@ export const SelectCreate = ({
         element.setAttribute("role", "presentation");
       }
     });
-    document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
+    document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
       if (element.role !== "presentation") {
         element.setAttribute("role", "presentation");
       }
diff --git a/src/components/formFields/textarea.tsx b/src/components/formFields/textarea.tsx
index 4f3ea5d..f6aea00 100644
--- a/src/components/formFields/textarea.tsx
+++ b/src/components/formFields/textarea.tsx
@@ -4,6 +4,7 @@ import { Textarea as UtrechtTextarea } from "@utrecht/component-library-react/di
 
 export interface ITextAreaProps {
   name: string;
+  ariaLabel?: string;
   disabled?: boolean;
   defaultValue?: string;
   hideErrorMessage?: boolean;
@@ -17,9 +18,15 @@ export const Textarea = ({
   disabled,
   defaultValue,
   hideErrorMessage,
+  ariaLabel,
 }: ITextAreaProps & IReactHookFormProps): JSX.Element => (
   <>
-    <UtrechtTextarea {...register(name, { ...validation })} {...{ disabled, defaultValue }} invalid={errors[name]} />
+    <UtrechtTextarea
+      {...register(name, { ...validation })}
+      {...{ disabled, defaultValue }}
+      invalid={errors[name]}
+      aria-label={ariaLabel}
+    />
     {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
   </>
 );

From 9d127d636ddc527f58cc746c83190468b4160ebe Mon Sep 17 00:00:00 2001
From: Remko Huisman <43807324+remko48@users.noreply.github.com>
Date: Mon, 16 Oct 2023 09:09:53 +0200
Subject: [PATCH 3/7] Revert "Revert "feature/XW-87/select-WCAG""

---
 README.md                                   | 2 +-
 package.json                                | 2 +-
 src/components/formFields/select/select.tsx | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index d9ab059..2b96420 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
-  - 2.2.13:
+  - 2.2.13/2.2.14:
     - Updated Textarea and all Input components to allow aria-label.
     - Updated Select components.
   - 2.2.12: Updated Select components to WCAG with aria-label and role.
diff --git a/package.json b/package.json
index 3256455..d83e0c7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.13",
+  "version": "2.2.14",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx
index 41cf75f..ed6de4a 100644
--- a/src/components/formFields/select/select.tsx
+++ b/src/components/formFields/select/select.tsx
@@ -86,7 +86,7 @@ export const SelectMultiple = ({
         element.setAttribute("role", "presentation");
       }
     });
-    document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
+    document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
       if (element.role !== "presentation") {
         element.setAttribute("role", "presentation");
       }
@@ -205,7 +205,7 @@ export const SelectSingle = ({
         element.setAttribute("role", "presentation");
       }
     });
-    document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
+    document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
       if (element.role !== "presentation") {
         element.setAttribute("role", "presentation");
       }

From 2c1c5657b153c956a78e1ad24daf5054d55c112b Mon Sep 17 00:00:00 2001
From: Remko Huisman <43807324+remko48@users.noreply.github.com>
Date: Mon, 16 Oct 2023 09:10:07 +0200
Subject: [PATCH 4/7] Revert "Revert "feature/OP-57/pagination""

---
 README.md                                     |  1 +
 package.json                                  |  2 +-
 .../Pagination/Pagination.module.css          | 46 +++++++++++++++++--
 3 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 2b96420..f4b6861 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.15: Added more NLDS options to Pagination.
   - 2.2.13/2.2.14:
     - Updated Textarea and all Input components to allow aria-label.
     - Updated Select components.
diff --git a/package.json b/package.json
index d83e0c7..d5b55f2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.14",
+  "version": "2.2.15",
   "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.module.css b/src/components/Pagination/Pagination.module.css
index dc67974..d521e31 100644
--- a/src/components/Pagination/Pagination.module.css
+++ b/src/components/Pagination/Pagination.module.css
@@ -20,13 +20,30 @@
   --conduction-pagination-item-border-style: unset;
   --conduction-pagination-item-border-color: unset;
 
+  /* --conduction-pagination-navigation-button-background-color: #4376fc; */
+  /* --conduction-pagination-navigation-button-color: #ffffff; */
+  /* --conduction-pagination-navigation-button-border-width: 1px; */
+  /* --conduction-pagination-navigation-button-border-style: solid; */
+  /* --conduction-pagination-navigation-button-border-color: #4376fc; */
+  /* --conduction-pagination-navigation-button-border-radius: 1px; */
   --conduction-pagination-navigation-button-padding-inline-start: 8px;
   --conduction-pagination-navigation-button-padding-inline-end: 8px;
   --conduction-pagination-navigation-button-padding-block-start: 0px;
   --conduction-pagination-navigation-button-padding-block-end: 0px;
 
-  --conduction-pagination-disabled-color: #d1d1d1;
-  --conduction-pagination-disabled-background-color: #fefefe;
+  --conduction-pagination-navigation-button-disabled-color: #d1d1d1;
+  --conduction-pagination-navigation-button-disabled-background-color: #fefefe;
+  /* --conduction-pagination-navigation-button-disabled-border-width: 1px; */
+  /* --conduction-pagination-navigation-button-disabled-border-style: solid; */
+  /* --conduction-pagination-navigation-button-disabled-border-color: #4376fc; */
+  /* --conduction-pagination-navigation-button-disabled-border-radius: 1px; */
+
+  --conduction-pagination-navigation-button-hover-color: #d1d1d1;
+  --conduction-pagination-navigation-button-hover-background-color: #fefefe;
+  /* --conduction-pagination-navigation-button-hover-border-width: 1px; */
+  /* --conduction-pagination-navigation-button-hover-border-style: solid; */
+  /* --conduction-pagination-navigation-button-hover-border-color: #4376fc; */
+  /* --conduction-pagination-navigation-button-hover-border-radius: 1px; */
 
   --conduction-pagination-current-page-background-color: #4376fc;
   --conduction-pagination-current-page-color: #ffffff;
@@ -97,9 +114,22 @@
   cursor: not-allowed;
 }
 
-.container > li.disabled > a {
-  color: var(--conduction-pagination-disabled-color);
-  background-color: var(--conduction-pagination-disabled-background-color);
+.container > li.disabled > a > .button {
+  color: var(--conduction-pagination-navigation-button-disabled-color) !important;
+  background-color: var(--conduction-pagination-navigation-button-disabled-background-color) !important;
+  border-width: var(--conduction-pagination-navigation-button-disabled-border-width, var(--utrecht-button-border-width));
+  border-style: var(--conduction-pagination-navigation-button-disabled-border-style, var(--utrecht-button-border-style));
+  border-color: var(--conduction-pagination-navigation-button-disabled-border-color, var(--utrecht-button-border-color));
+  border-radius: var(--conduction-pagination-navigation-button-disabled-border-radius, var(--utrecht-button-border-radius));
+}
+
+.container > li:hover:not(.disabled) > a > .button {
+  color: var(--conduction-pagination-navigation-button-hover-color) !important;
+  background-color: var(--conduction-pagination-navigation-button-hover-background-color) !important;
+  border-width: var(--conduction-pagination-navigation-button-hover-border-width, var(--utrecht-button-border-width));
+  border-style: var(--conduction-pagination-navigation-button-hover-border-style, var(--utrecht-button-border-style));
+  border-color: var(--conduction-pagination-navigation-button-hover-border-color, var(--utrecht-button-border-color));
+  border-radius: var(--conduction-pagination-navigation-button-hover-border-radius, var(--utrecht-button-border-radius));
 }
 
 .container > li:hover:not(.disabled):not(.currentPage) {
@@ -115,6 +145,12 @@
 }
 
 .button {
+  background-color: var(--conduction-pagination-navigation-button-background-color, var(--utrecht-button-background-color)) !important;
+  color: var(--conduction-pagination-navigation-button-color, var(--utrecht-button-color)) !important;
+  border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width));
+  border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style));
+  border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color));
+  border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius));
   padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
   padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;
   padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important;

From d9112f4b721e0b4c246dd8f06e9dc2ea25f6164f Mon Sep 17 00:00:00 2001
From: Remko Huisman <43807324+remko48@users.noreply.github.com>
Date: Mon, 16 Oct 2023 09:10:22 +0200
Subject: [PATCH 5/7] Revert "Revert "feature/OP-57/pagination""

---
 README.md                                       | 2 +-
 package.json                                    | 2 +-
 src/components/Pagination/Pagination.module.css | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index f4b6861..3a2d032 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
-  - 2.2.15: Added more NLDS options to Pagination.
+  - 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.
     - Updated Select components.
diff --git a/package.json b/package.json
index d5b55f2..7d5dfa8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.15",
+  "version": "2.2.16",
   "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.module.css b/src/components/Pagination/Pagination.module.css
index d521e31..a49c222 100644
--- a/src/components/Pagination/Pagination.module.css
+++ b/src/components/Pagination/Pagination.module.css
@@ -147,9 +147,9 @@
 .button {
   background-color: var(--conduction-pagination-navigation-button-background-color, var(--utrecht-button-background-color)) !important;
   color: var(--conduction-pagination-navigation-button-color, var(--utrecht-button-color)) !important;
-  border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width));
-  border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style));
-  border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color));
+  border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)) !important;
+  border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)) !important;
+  border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)) !important;
   border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius));
   padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
   padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;

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 6/7] 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;

From 8d8ce3a0366154c1ab2b89cfd99e87892640ba96 Mon Sep 17 00:00:00 2001
From: Remko <remkohuisman@hotmail.nl>
Date: Mon, 16 Oct 2023 15:46:06 +0200
Subject: [PATCH 7/7] Refactored select role attribute

---
 README.md                                   |  1 +
 package.json                                |  2 +-
 src/components/formFields/select/select.tsx | 74 ++++-----------------
 3 files changed, 14 insertions(+), 63 deletions(-)

diff --git a/README.md b/README.md
index a3d73c7..32e591f 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.18: Refactored select role attribute.
   - 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:
diff --git a/package.json b/package.json
index 1cd5b7f..4d59877 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.17",
+  "version": "2.2.18",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx
index 2bf4df4..93d3234 100644
--- a/src/components/formFields/select/select.tsx
+++ b/src/components/formFields/select/select.tsx
@@ -41,24 +41,16 @@ const selectStyles: StylesConfig = {
   }),
 };
 
-const selectMultiStyles: StylesConfig = {
-  menuPortal: (base) => ({ ...base, zIndex: 100 }),
-  option: (base) => ({
-    ...base,
-    fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
-    backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
+const setAttributes = (): void => {
+  const setRoleToPresentation = (selector: string, role: string) => {
+    document.querySelectorAll(selector).forEach((element) => {
+      if (element.getAttribute("role") !== "presentation") element.setAttribute("role", role);
+    });
+  };
 
-    "&:hover": {
-      backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
-      color: `var(--conduction-input-select-list-option-hover-color, ${base.color})`,
-      fontFamily: `var(--conduction-input-select-list-option-hover-font-family, var(--conduction-input-select-list-option-font-family, ${base.fontFamily}))`,
-    },
-  }),
-  placeholder: (base) => ({
-    ...base,
-    fontFamily: `var(--conduction-input-select-placeholder-font-family, var(--utrecht-form-input-placeholder-font-family, ${base.fontFamily}))`,
-    color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
-  }),
+  setRoleToPresentation('[id*="live-region"]', "presentation");
+  setRoleToPresentation('[class*="indicatorSeparator"]', "separator");
+  setRoleToPresentation('[class*="a11yText"]', "presentation");
 };
 
 export const SelectMultiple = ({
@@ -76,21 +68,7 @@ export const SelectMultiple = ({
   ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   React.useEffect(() => {
-    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
-      if (element?.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
+    setAttributes();
   }, []);
   return (
     <Controller
@@ -135,21 +113,7 @@ export const SelectCreate = ({
   ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   React.useEffect(() => {
-    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
+    setAttributes();
   }, []);
   return (
     <Controller
@@ -195,21 +159,7 @@ export const SelectSingle = ({
   ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   React.useEffect(() => {
-    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
+    setAttributes();
   }, []);
   return (
     <Controller