@conduction/components 2.2.12 → 2.2.14

package/README.md

@@ -4,6 +4,9 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 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.
   - 2.2.11: Updated Primary and Secondary topnav to NLDS.
   - 2.2.10: Added z-index to tooltip.

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.js

@@ -54,7 +54,7 @@ export const SelectMultiple = ({ id, name, options, errors, control, validation,
                 element.setAttribute("role", "presentation");
             }
         });
-        document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => {
+        document.querySelectorAll('[class*="a11yText"]').forEach((element) => {
             if (element.role !== "presentation") {
                 element.setAttribute("role", "presentation");
             }
@@ -76,7 +76,7 @@ export const SelectCreate = ({ id, name, options, errors, control, validation, d
                 element.setAttribute("role", "presentation");
             }
         });
-        document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => {
+        document.querySelectorAll('[class*="a11yText"]').forEach((element) => {
             if (element.role !== "presentation") {
                 element.setAttribute("role", "presentation");
             }
@@ -98,7 +98,7 @@ export const SelectSingle = ({ id, name, options, errors, control, validation, i
                 element.setAttribute("role", "presentation");
             }
         });
-        document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => {
+        document.querySelectorAll('[class*="a11yText"]').forEach((element) => {
             if (element.role !== "presentation") {
                 element.setAttribute("role", "presentation");
             }

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.12",
+  "version": "2.2.14",
   "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

@@ -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");
       }
@@ -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");
       }
@@ -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");
       }

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