Development to main, week 41

README.md

@@ -4,6 +4,13 @@
 
 - **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:
+    - 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.json

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

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)) !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;
   padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important;

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>
       }

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,13 +47,15 @@ export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
   placeholder,
   errors,
   hideErrorMessage,
+  ariaLabel,
 }) => (
   <>
     <Textbox
       type="text"
       {...{ 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,13 +96,15 @@ export const InputURL: React.FC<IInputProps & IReactHookFormProps> = ({
   placeholder,
   errors,
   hideErrorMessage,
+  ariaLabel,
 }) => (
   <>
     <Textbox
       type="url"
       {...{ defaultValue, disabled, placeholder, icon }}
       {...register(name, { ...validation })}
       invalid={errors[name]}
+      aria-label={ariaLabel}
     />
     {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
   </>
@@ -111,13 +120,15 @@ export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
   placeholder,
   errors,
   hideErrorMessage,
+  ariaLabel,
 }) => (
   <>
     <Textbox
       type="number"
       {...{ 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}
   />
 );

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;
@@ -40,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 = ({
@@ -72,7 +65,11 @@ export const SelectMultiple = ({
   hideErrorMessage,
   menuPlacement,
   placeholder,
+  ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
+  React.useEffect(() => {
+    setAttributes();
+  }, []);
   return (
     <Controller
       {...{ control, name, defaultValue }}
@@ -81,6 +78,7 @@ export const SelectMultiple = ({
         return (
           <>
             <ReactSelect
+              aria-label={ariaLabel}
               inputId={id}
               value={value ?? ""}
               className={clsx(styles.select, errors[name] && styles.error)}
@@ -112,7 +110,11 @@ export const SelectCreate = ({
   hideErrorMessage,
   menuPlacement,
   placeholder,
+  ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
+  React.useEffect(() => {
+    setAttributes();
+  }, []);
   return (
     <Controller
       {...{ control, name, defaultValue }}
@@ -121,6 +123,7 @@ export const SelectCreate = ({
         return (
           <>
             <CreatableSelect
+              aria-label={ariaLabel}
               inputId={id}
               value={value ?? ""}
               placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
@@ -153,7 +156,11 @@ export const SelectSingle = ({
   hideErrorMessage,
   menuPlacement,
   placeholder,
+  ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
+  React.useEffect(() => {
+    setAttributes();
+  }, []);
   return (
     <Controller
       {...{ control, name, defaultValue }}
@@ -162,6 +169,7 @@ export const SelectSingle = ({
         return (
           <>
             <ReactSelect
+              aria-label={ariaLabel}
               inputId={id}
               value={value ?? ""}
               className={clsx(styles.select, errors[name] && styles.error)}

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