@conduction/components 2.2.56 → 2.2.57

package/README.md

@@ -4,6 +4,10 @@
 
 - **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.

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.56",
+  "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/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 })}
     />
   );
 };