more WCAG fixes

README.md

@@ -4,11 +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.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": {

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

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

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