@conduction/components 2.2.55 → 2.2.57

package/README.md

@@ -4,10 +4,16 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.57: 
+    - Fixed clear button on SelectSingle not being clickable with keyboard functions.
+    - Fixed Logo not being focusable when being clickable.
+    - Fixed CardWrapper not being clickable with keyboard functions
+  - 2.2.56: Fixed WCAG issue in Pagination by adding aria labels to buttons
   - 2.2.55: 
     - Updated Logo to accept aria-label for accessibility.
     - Fixed bug in DisplaySwitch where layoutClassName is added even when empty.
     - Fixed color of the Select dropdown icon to be WCAG-AA compliant.
+    - Added more WCAG roles and support to Select box.
   - 2.2.54: Updated CardHeader to allow padding-block-end on title.
   - 2.2.53: Updated Pagination and PrimaryTopNav components to allow text-decorations and border-bottoms.
   - 2.2.52: Added hover filter to Logo component.

package/lib/components/Pagination/Pagination.js

@@ -31,5 +31,5 @@ export const Pagination = ({ totalPages, currentPage, setCurrentPage, ariaLabels
         };
         setRoleToPresentation('ul[role*="list"][class*="Pagination"]');
     }, [ariaLabels.pagination]);
-    return (_jsx(ReactPaginate, { className: clsx(styles.container, layoutClassName && layoutClassName), disabledClassName: styles.disabled, activeClassName: styles.currentPage, onPageChange: (e) => setCurrentPage(e.selected + 1), forcePage: currentPage - 1, pageRangeDisplayed: 3, pageCount: totalPages, disableInitialCallback: true, marginPagesDisplayed: 2, breakLabel: "...", nextClassName: styles.next, previousClassName: styles.previous, nextAriaLabel: ariaLabels.nextPage, previousAriaLabel: ariaLabels.previousPage, ariaLabelBuilder: (currentPage) => `${ariaLabels.page} ${currentPage}`, nextLabel: _jsx(Button, { tabIndex: -1, className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }), previousLabel: _jsx(Button, { tabIndex: -1, className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) }));
+    return (_jsx(ReactPaginate, { className: clsx(styles.container, layoutClassName && layoutClassName), disabledClassName: styles.disabled, activeClassName: styles.currentPage, onPageChange: (e) => setCurrentPage(e.selected + 1), forcePage: currentPage - 1, pageRangeDisplayed: 3, pageCount: totalPages, disableInitialCallback: true, marginPagesDisplayed: 2, breakLabel: "...", nextClassName: styles.next, previousClassName: styles.previous, nextAriaLabel: ariaLabels.nextPage, previousAriaLabel: ariaLabels.previousPage, ariaLabelBuilder: (currentPage) => `${ariaLabels.page} ${currentPage}`, nextLabel: _jsx(Button, { tabIndex: -1, className: styles.button, "aria-label": ariaLabels.nextPage, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }), previousLabel: _jsx(Button, { tabIndex: -1, className: styles.button, "aria-label": ariaLabels.previousPage, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) }));
 };

package/lib/components/card/cardWrapper/CardWrapper.js

@@ -1,6 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as styles from "./CardWrapper.module.css";
 export const CardWrapper = (props) => {
-    const _props = { ...props, className: `${props.className} ${styles.container}` };
+    const handleKeyDown = (event) => {
+        if (props.onClick && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            props.onClick(event);
+        }
+    };
+    const _props = {
+        ...props,
+        className: `${props.className} ${styles.container}`,
+        role: props.onClick ? "button" : undefined,
+        tabIndex: props.onClick ? 0 : undefined,
+        ...(props.onClick && { onKeyDown: handleKeyDown }),
+    };
     return _jsx("div", { ..._props, children: props.children });
 };

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

@@ -3,7 +3,7 @@ import * as React from "react";
 import * as styles from "./select.module.css";
 import clsx from "clsx";
 import CreatableSelect from "react-select/creatable";
-import ReactSelect from "react-select";
+import ReactSelect, { components } from "react-select";
 import { Controller } from "react-hook-form";
 import { ErrorMessage } from "../errorMessage/ErrorMessage";
 const selectStyles = {
@@ -95,6 +95,29 @@ const setAttributes = () => {
         });
     }, 100);
 };
+// Custom ClearIndicator component that handles keyboard events for accessibility
+const ClearIndicator = (props) => {
+    const { clearValue, innerProps, children } = props;
+    const handleKeyDown = (event) => {
+        if (event.key === " " || event.key === "Enter") {
+            event.preventDefault();
+            event.stopPropagation();
+            if (clearValue) {
+                clearValue();
+            }
+            if (innerProps?.onClick) {
+                innerProps.onClick(event);
+            }
+        }
+        else if (innerProps?.onKeyDown) {
+            innerProps.onKeyDown(event);
+        }
+    };
+    return (_jsx(components.ClearIndicator, { ...props, innerProps: {
+            ...innerProps,
+            onKeyDown: handleKeyDown,
+        }, children: children }));
+};
 export const SelectMultiple = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
     React.useEffect(() => {
         setAttributes();
@@ -116,7 +139,7 @@ export const SelectSingle = ({ id, name, options, errors, control, validation, i
         setAttributes();
     }, []);
     return (_jsx(Controller, { control, name, defaultValue, rules: validation, render: ({ field: { onChange, value } }) => {
-            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...", formatGroupLabel: (group) => _jsx(GroupLabel, { group }) }), 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...", formatGroupLabel: (group) => _jsx(GroupLabel, { group }), components: isClearable ? { ClearIndicator } : undefined }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name]?.message })] }));
         } }));
 };
 const GroupLabel = ({ group }) => {

package/lib/components/logo/Logo.js

@@ -2,8 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as styles from "./Logo.module.css";
 import clsx from "clsx";
 export const Logo = ({ onClick, layoutClassName, variant = "header", ariaLabel = "logo" }) => {
+    const handleKeyDown = (event) => {
+        if (onClick && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            onClick();
+        }
+    };
     return (_jsx("div", { className: clsx(styles.container, styles[variant], [
             onClick && styles.clickable,
             layoutClassName && layoutClassName,
-        ]), role: "img", "aria-label": ariaLabel, onClick }));
+        ]), role: onClick ? "button" : "img", "aria-label": ariaLabel, tabIndex: onClick ? 0 : undefined, onClick, ...(onClick && { onKeyDown: handleKeyDown }) }));
 };

package/package.json

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

package/src/components/Pagination/Pagination.tsx

@@ -1,87 +1,87 @@
-import * as React from "react";
-import * as styles from "./Pagination.module.css";
-import clsx from "clsx";
-
-import ReactPaginate from "react-paginate";
-import { Button } from "@utrecht/component-library-react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
-
-interface PaginationProps {
-  totalPages: number;
-  currentPage: number;
-  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
-  ariaLabels: {
-    pagination: string;
-    nextPage: string;
-    previousPage: string;
-    page: string;
-  };
-  layoutClassName?: string;
-}
-
-export const Pagination: React.FC<PaginationProps> = ({
-  totalPages,
-  currentPage,
-  setCurrentPage,
-  ariaLabels,
-  layoutClassName,
-}) => {
-  if (totalPages < 1) return <></>; // no pages available
-
-  const setAttributes = (): void => {
-    const setRoleToPresentation = (selector: string) => {
-      document.querySelectorAll(selector).forEach((element) => {
-        if (element.getAttribute("role") !== "list") element.setAttribute("role", "list");
-      });
-    };
-
-    setRoleToPresentation('ul[role*="navigation"][class*="Pagination"][aria-label="Pagination"]');
-  };
-
-  React.useEffect(() => {
-    setAttributes();
-  }, []);
-
-  React.useEffect(() => {
-    const setRoleToPresentation = (selector: string) => {
-      document.querySelectorAll(selector).forEach((element) => {
-        if (element.getAttribute("aria-label") !== ariaLabels.pagination) {
-          element.setAttribute("aria-label", ariaLabels.pagination);
-        }
-      });
-    };
-
-    setRoleToPresentation('ul[role*="list"][class*="Pagination"]');
-  }, [ariaLabels.pagination]);
-
-  return (
-    <ReactPaginate
-      className={clsx(styles.container, layoutClassName && layoutClassName)}
-      disabledClassName={styles.disabled}
-      activeClassName={styles.currentPage}
-      onPageChange={(e: any) => setCurrentPage(e.selected + 1)}
-      forcePage={currentPage - 1}
-      pageRangeDisplayed={3}
-      pageCount={totalPages}
-      disableInitialCallback
-      marginPagesDisplayed={2}
-      breakLabel="..."
-      nextClassName={styles.next}
-      previousClassName={styles.previous}
-      nextAriaLabel={ariaLabels.nextPage}
-      previousAriaLabel={ariaLabels.previousPage}
-      ariaLabelBuilder={(currentPage) => `${ariaLabels.page} ${currentPage}`}
-      nextLabel={
-        <Button tabIndex={-1} className={styles.button}>
-          <FontAwesomeIcon icon={faChevronRight} />
-        </Button>
-      }
-      previousLabel={
-        <Button tabIndex={-1} className={styles.button}>
-          <FontAwesomeIcon icon={faChevronLeft} />
-        </Button>
-      }
-    />
-  );
-};
+import * as React from "react";
+import * as styles from "./Pagination.module.css";
+import clsx from "clsx";
+
+import ReactPaginate from "react-paginate";
+import { Button } from "@utrecht/component-library-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+
+interface PaginationProps {
+  totalPages: number;
+  currentPage: number;
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+  ariaLabels: {
+    pagination: string;
+    nextPage: string;
+    previousPage: string;
+    page: string;
+  };
+  layoutClassName?: string;
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  totalPages,
+  currentPage,
+  setCurrentPage,
+  ariaLabels,
+  layoutClassName,
+}) => {
+  if (totalPages < 1) return <></>; // no pages available
+
+  const setAttributes = (): void => {
+    const setRoleToPresentation = (selector: string) => {
+      document.querySelectorAll(selector).forEach((element) => {
+        if (element.getAttribute("role") !== "list") element.setAttribute("role", "list");
+      });
+    };
+
+    setRoleToPresentation('ul[role*="navigation"][class*="Pagination"][aria-label="Pagination"]');
+  };
+
+  React.useEffect(() => {
+    setAttributes();
+  }, []);
+
+  React.useEffect(() => {
+    const setRoleToPresentation = (selector: string) => {
+      document.querySelectorAll(selector).forEach((element) => {
+        if (element.getAttribute("aria-label") !== ariaLabels.pagination) {
+          element.setAttribute("aria-label", ariaLabels.pagination);
+        }
+      });
+    };
+
+    setRoleToPresentation('ul[role*="list"][class*="Pagination"]');
+  }, [ariaLabels.pagination]);
+
+  return (
+    <ReactPaginate
+      className={clsx(styles.container, layoutClassName && layoutClassName)}
+      disabledClassName={styles.disabled}
+      activeClassName={styles.currentPage}
+      onPageChange={(e: any) => setCurrentPage(e.selected + 1)}
+      forcePage={currentPage - 1}
+      pageRangeDisplayed={3}
+      pageCount={totalPages}
+      disableInitialCallback
+      marginPagesDisplayed={2}
+      breakLabel="..."
+      nextClassName={styles.next}
+      previousClassName={styles.previous}
+      nextAriaLabel={ariaLabels.nextPage}
+      previousAriaLabel={ariaLabels.previousPage}
+      ariaLabelBuilder={(currentPage) => `${ariaLabels.page} ${currentPage}`}
+      nextLabel={
+        <Button tabIndex={-1} className={styles.button} aria-label={ariaLabels.nextPage}>
+          <FontAwesomeIcon icon={faChevronRight} />
+        </Button>
+      }
+      previousLabel={
+        <Button tabIndex={-1} className={styles.button} aria-label={ariaLabels.previousPage}>
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </Button>
+      }
+    />
+  );
+};

package/src/components/card/cardWrapper/CardWrapper.tsx

@@ -2,7 +2,20 @@ import * as React from "react";
 import * as styles from "./CardWrapper.module.css";
 
 export const CardWrapper = (props: React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
-  const _props = { ...props, className: `${props.className} ${styles.container}` };
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (props.onClick && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      props.onClick(event as any);
+    }
+  };
+
+  const _props = {
+    ...props,
+    className: `${props.className} ${styles.container}`,
+    role: props.onClick ? "button" : undefined,
+    tabIndex: props.onClick ? 0 : undefined,
+    ...(props.onClick && { onKeyDown: handleKeyDown }),
+  };
 
   return <div {..._props}>{props.children}</div>;
 };

package/src/components/formFields/select/select.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as styles from "./select.module.css";
 import clsx from "clsx";
 import CreatableSelect from "react-select/creatable";
-import ReactSelect, { MenuPlacement, StylesConfig, GroupBase } from "react-select";
+import ReactSelect, { MenuPlacement, StylesConfig, GroupBase, components } from "react-select";
 import { Control, Controller, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
 import { ErrorMessage } from "../errorMessage/ErrorMessage";
@@ -122,6 +122,38 @@ const setAttributes = (): void => {
   }, 100);
 };
 
+// Custom ClearIndicator component that handles keyboard events for accessibility
+const ClearIndicator = (props: any) => {
+  const { clearValue, innerProps, children } = props;
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (clearValue) {
+        clearValue();
+      }
+      if (innerProps?.onClick) {
+        innerProps.onClick(event);
+      }
+    } else if (innerProps?.onKeyDown) {
+      innerProps.onKeyDown(event);
+    }
+  };
+
+  return (
+    <components.ClearIndicator
+      {...props}
+      innerProps={{
+        ...innerProps,
+        onKeyDown: handleKeyDown,
+      }}
+    >
+      {children}
+    </components.ClearIndicator>
+  );
+};
+
 export const SelectMultiple = ({
   id,
   name,
@@ -251,6 +283,7 @@ export const SelectSingle = ({
               styles={selectStyles}
               placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
               formatGroupLabel={(group) => <GroupLabel {...{ group }} />}
+              components={isClearable ? { ClearIndicator } : undefined}
             />
             {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
           </>

package/src/components/logo/Logo.tsx

@@ -10,15 +10,24 @@ interface LogoProps {
 }
 
 export const Logo: React.FC<LogoProps> = ({ onClick, layoutClassName, variant = "header", ariaLabel = "logo" }) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (onClick && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
   return (
     <div
       className={clsx(styles.container, styles[variant], [
         onClick && styles.clickable,
         layoutClassName && layoutClassName,
       ])}
-      role="img"
+      role={onClick ? "button" : "img"}
       aria-label={ariaLabel}
+      tabIndex={onClick ? 0 : undefined}
       {...{ onClick }}
+      {...(onClick && { onKeyDown: handleKeyDown })}
     />
   );
 };