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] 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} />}
   </>
 );