@conduction/components 2.2.11 → 2.2.13

package/README.md

@@ -4,6 +4,10 @@
 
 - **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.
   - 2.2.9: Added CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate to index.

package/lib/components/formFields/input.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import { IReactHookFormProps } from "./types";
 export interface IInputProps {
     name: string;
+    ariaLabel?: string;
     disabled?: boolean;
     defaultValue?: string;
     icon?: JSX.Element;

package/lib/components/formFields/input.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Textbox } from "@utrecht/component-library-react/dist/css-module";
 import { ErrorMessage } from "./errorMessage/ErrorMessage";
-export const InputPassword = ({ disabled, name, validation, register, placeholder, errors, hideErrorMessage, }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "password", ...{ disabled, placeholder }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const InputPassword = ({ disabled, name, validation, register, placeholder, errors, hideErrorMessage, ariaLabel, }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "password", ...{ disabled, placeholder }, ...register(name, { ...validation }), invalid: errors[name], "aria-label": ariaLabel }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
 };
-export const InputText = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "text", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
-export const InputEmail = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "email", required: !!validation?.required, ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
-export const InputURL = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "url", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
-export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "number", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
-export const InputFloat = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "number", step: ".01", ...{ disabled, placeholder, icon, defaultValue }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
-export const InputFile = ({ disabled, name, accept, defaultValue, validation, register, }) => (_jsx("input", { className: "denhaag-Textbox__input", type: "file", ...{ defaultValue, disabled, accept }, ...register(name, { ...validation }) }));
+export const InputText = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, ariaLabel, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "text", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name], "aria-label": ariaLabel }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const InputEmail = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, ariaLabel, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "email", required: !!validation?.required, ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name], "aria-label": ariaLabel }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const InputURL = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, ariaLabel, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "url", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name], "aria-label": ariaLabel }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, ariaLabel, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "number", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name], "aria-label": ariaLabel }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const InputFloat = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, ariaLabel, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "number", step: ".01", ...{ disabled, placeholder, icon, defaultValue }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name], "aria-label": ariaLabel }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const InputFile = ({ disabled, name, accept, defaultValue, validation, register, ariaLabel, }) => (_jsx("input", { className: "denhaag-Textbox__input", type: "file", ...{ defaultValue, disabled, accept }, ...register(name, { ...validation }), "aria-label": ariaLabel }));

package/lib/components/formFields/select/select.d.ts

@@ -9,6 +9,7 @@ interface ISelectProps {
         value: string;
     }[];
     name: string;
+    ariaLabel?: string;
     id?: string;
     defaultValue?: any;
     disabled?: boolean;
@@ -17,7 +18,7 @@ interface ISelectProps {
     menuPlacement?: MenuPlacement;
     placeholder?: string;
 }
-export declare const SelectMultiple: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }: ISelectProps & IReactHookFormProps) => JSX.Element;
-export declare const SelectCreate: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }: ISelectProps & IReactHookFormProps) => JSX.Element;
-export declare const SelectSingle: ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }: ISelectProps & IReactHookFormProps) => JSX.Element;
+export declare const SelectMultiple: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }: ISelectProps & IReactHookFormProps) => JSX.Element;
+export declare const SelectCreate: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }: ISelectProps & IReactHookFormProps) => JSX.Element;
+export declare const SelectSingle: ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }: ISelectProps & IReactHookFormProps) => JSX.Element;
 export {};

package/lib/components/formFields/select/select.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import * as styles from "./select.module.css";
 import { Controller } from "react-hook-form";
 import ReactSelect from "react-select";
@@ -41,18 +42,69 @@ const selectMultiStyles = {
         color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
     }),
 };
-export const SelectMultiple = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
+export const SelectMultiple = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
+    React.useEffect(() => {
+        document.querySelectorAll('[id*="live-region"]').forEach((element) => {
+            if (element?.role !== "presentation") {
+                element.setAttribute("role", "presentation");
+            }
+        });
+        document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => {
+            if (element.role !== "presentation") {
+                element.setAttribute("role", "presentation");
+            }
+        });
+        document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => {
+            if (element.role !== "presentation") {
+                element.setAttribute("role", "presentation");
+            }
+        });
+    }, []);
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
         } }));
 };
-export const SelectCreate = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
+export const SelectCreate = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
+    React.useEffect(() => {
+        document.querySelectorAll('[id*="live-region"]').forEach((element) => {
+            if (element.role !== "presentation") {
+                element.setAttribute("role", "presentation");
+            }
+        });
+        document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => {
+            if (element.role !== "presentation") {
+                element.setAttribute("role", "presentation");
+            }
+        });
+        document.querySelectorAll('[class*="a11yText"]').forEach((element) => {
+            if (element.role !== "presentation") {
+                element.setAttribute("role", "presentation");
+            }
+        });
+    }, []);
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { inputId: id, value: value ?? "", placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
         } }));
 };
-export const SelectSingle = ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
+export const SelectSingle = ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
+    React.useEffect(() => {
+        document.querySelectorAll('[id*="live-region"]').forEach((element) => {
+            if (element.role !== "presentation") {
+                element.setAttribute("role", "presentation");
+            }
+        });
+        document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => {
+            if (element.role !== "presentation") {
+                element.setAttribute("role", "presentation");
+            }
+        });
+        document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => {
+            if (element.role !== "presentation") {
+                element.setAttribute("role", "presentation");
+            }
+        });
+    }, []);
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
         } }));
 };

package/lib/components/formFields/textarea.d.ts

@@ -2,8 +2,9 @@
 import { IReactHookFormProps } from "./types";
 export interface ITextAreaProps {
     name: string;
+    ariaLabel?: string;
     disabled?: boolean;
     defaultValue?: string;
     hideErrorMessage?: boolean;
 }
-export declare const Textarea: ({ name, validation, register, errors, disabled, defaultValue, hideErrorMessage, }: ITextAreaProps & IReactHookFormProps) => JSX.Element;
+export declare const Textarea: ({ name, validation, register, errors, disabled, defaultValue, hideErrorMessage, ariaLabel, }: ITextAreaProps & IReactHookFormProps) => JSX.Element;

package/lib/components/formFields/textarea.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ErrorMessage } from "./errorMessage/ErrorMessage";
 import { Textarea as UtrechtTextarea } from "@utrecht/component-library-react/dist/css-module";
-export const Textarea = ({ name, validation, register, errors, disabled, defaultValue, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(UtrechtTextarea, { ...register(name, { ...validation }), ...{ disabled, defaultValue }, invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const Textarea = ({ name, validation, register, errors, disabled, defaultValue, hideErrorMessage, ariaLabel, }) => (_jsxs(_Fragment, { children: [_jsx(UtrechtTextarea, { ...register(name, { ...validation }), ...{ disabled, defaultValue }, invalid: errors[name], "aria-label": ariaLabel }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));

package/package.json

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

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

package/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"]').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)}

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