Merge pull request #1191 from nsbno/radio-card-uu

Radio card accessibility
nsbno · Jun 12, 2024 · 4a546dd · 4a546dd
2 parents c5f30bf + 89889cc
commit 4a546dd
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 64 deletions.
diff --git a/.changeset/orange-coats-taste.md b/.changeset/orange-coats-taste.md
@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": patch
+---
+
+RadioCard: Fix accessibility features
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "0.0.35",
+  "version": "0.0.36",
   "name": "@vygruppen/docs",
   "description": "The Spor documentation",
   "license": "MIT",

diff --git a/packages/spor-react/src/layout/RadioCard.tsx b/packages/spor-react/src/layout/RadioCard.tsx
@@ -5,7 +5,7 @@ import {
   forwardRef,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
-import React, { useContext, useEffect, useId } from "react";
+import React, { useContext, useEffect, useId, useState } from "react";
 import { RadioCardGroupContext } from "./RadioCardGroup";
 
 /**
@@ -38,7 +38,7 @@ export type RadioCardProps = BoxProps & {
 };
 
 export const RadioCard = forwardRef(
-  ({ children, value = "base", isDisabled, ...props }: RadioCardProps, ref) => {
+  ({ children, value, isDisabled, ...props }: RadioCardProps, ref) => {
     const context = useContext(RadioCardGroupContext);
 
     if (!context) {
@@ -51,57 +51,69 @@ export const RadioCard = forwardRef(
 
     const styles = useMultiStyleConfig("RadioCard", { variant });
 
+    const [isKeyboardUser, setKeyboardUser] = useState(false);
+    const [isFocused, setFocus] = useState(false);
+
     const isChecked = selectedValue === value;
 
-    const radioCardId = `radio-card-${useId()}`;
+    useEffect(() => {
+      const handleMouseDown = () => setKeyboardUser(false);
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === " ") {
+          setFocus(false);
+        } else {
+          setKeyboardUser(true);
+        }
+      };
+
+      window.addEventListener("mousedown", handleMouseDown);
+      window.addEventListener("keydown", handleKeyDown);
+
+      return () => {
+        window.removeEventListener("mousedown", handleMouseDown);
+        window.removeEventListener("keydown", handleKeyDown);
+      };
+    }, []);
 
     useEffect(() => {
-      if (isChecked && typeof ref !== "function" && ref?.current) {
-        ref.current.focus();
+      if (isKeyboardUser && isChecked) {
+        setFocus(true);
+      } else {
+        setFocus(false);
       }
-    }, [isChecked]);
+    }, [isKeyboardUser, isChecked]);
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "Enter" || event.key === " ") {
-        onChange(value);
-      }
-      if (
-        event.key === "ArrowRight" ||
-        event.key === "ArrowDown" ||
-        event.key === "ArrowLeft" ||
-        event.key === "ArrowUp"
-      ) {
-        const nextRadioCard = event.currentTarget
-          .nextElementSibling as HTMLElement;
-        if (nextRadioCard) {
-          nextRadioCard.focus();
-        }
-      }
-    };
+    const inputId = `radio-card-${useId()}`;
 
     return (
-      <Box as="label" aria-label={String(children)} onKeyDown={handleKeyDown}>
+      <Box
+        onFocus={() => isKeyboardUser && setFocus(true)}
+        onBlur={() => setFocus(false)}
+      >
         <chakra.input
           type="radio"
-          id={radioCardId}
-          ref={ref}
-          value={value}
+          id={inputId}
           name={name}
+          ref={ref}
           checked={isChecked}
           onChange={() => onChange(value)}
           disabled={isDisabled}
           __css={styles.radioInput}
         />
         <Box
-          {...props}
-          tabIndex={0}
-          ref={ref}
-          role="radio"
+          as="label"
+          name={name}
+          htmlFor={inputId}
           aria-checked={isChecked}
-          aria-labelledby={radioCardId}
-          __css={{ ...styles.container, ...(isChecked && styles.checked) }}
           data-checked={isChecked}
           data-disabled={isDisabled}
+          {...props}
+          __css={{
+            ...styles.container,
+            ...(isChecked && styles.checked),
+            ...(isFocused && !isChecked && styles.focused),
+            ...(isChecked && isFocused && styles.focusedChecked),
+          }}
         >
           {children}
         </Box>

diff --git a/packages/spor-react/src/layout/RadioCardGroup.tsx b/packages/spor-react/src/layout/RadioCardGroup.tsx
@@ -1,7 +1,6 @@
 import { BoxProps, Stack } from "@chakra-ui/react";
 import React, { useState } from "react";
 import { FormLabel } from "../input";
-import { RadioCard } from "./RadioCard";
 
 /**
  * RadioCardGroupContext is used to pass down the state and handlers to the RadioCard components.
@@ -15,6 +14,7 @@ type RadioGroupContextProps = {
   onChange: (value: string) => void;
   variant?: "base" | "floating";
   defaultValue?: string;
+  value?: string;
 };
 
 export const RadioCardGroupContext =
@@ -59,14 +59,7 @@ export const RadioCardGroup: React.FC<RadioCardGroupProps> = ({
         defaultValue: defaultValue || "",
       }}
     >
-      <Stack
-        as="fieldset"
-        direction={direction}
-        aria-labelledby={groupLabel || name}
-        role="radiogroup"
-        tabIndex={0}
-        {...props}
-      >
+      <Stack as="fieldset" direction={direction} {...props}>
         {groupLabel && (
           <FormLabel as="legend" id={groupLabel}>
             {groupLabel}

diff --git a/packages/spor-react/src/theme/components/radio-card.ts b/packages/spor-react/src/theme/components/radio-card.ts
@@ -1,25 +1,29 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
 import { floatingBackground, floatingBorder } from "../utils/floating-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { anatomy, mode } from "@chakra-ui/theme-tools";
+import { anatomy } from "@chakra-ui/theme-tools";
 import { outlineBorder } from "../utils/outline-utils";
 
-const parts = anatomy("radio-card").parts("container", "checked", "radioInput");
+const parts = anatomy("radio-card").parts(
+  "container",
+  "checked",
+  "radioInput",
+  "focused",
+  "focusedChecked",
+);
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
 const config = helpers.defineMultiStyleConfig({
   baseStyle: (props: any) => ({
     container: {
-      border: "none",
       overflow: "hidden",
       fontSize: "inherit",
       display: "block",
       cursor: "pointer",
       borderRadius: "sm",
-      ...focusVisibleStyles(props),
       transitionProperty: "common",
       transitionDuration: "fast",
+
       _disabled: {
         pointerEvents: "none",
         ...baseBackground("disabled", props),
@@ -53,9 +57,6 @@ const config = helpers.defineMultiStyleConfig({
           ...baseBackground("active", props),
           ...baseBorder("active", props),
         },
-        _focus: {
-          ...outlineBorder("focus", props),
-        },
       },
       checked: {
         _hover: {
@@ -65,11 +66,22 @@ const config = helpers.defineMultiStyleConfig({
           ...baseBackground("active", props),
           ...baseBorder("active", props),
         },
-        _focus: {
-          outline: "4px solid",
-          outlineStyle: "double",
-          ...outlineBorder("focus", props),
-          outlineOffset: "-1px",
+      },
+      focusedChecked: {
+        outline: "4px solid",
+        outlineStyle: "double",
+        ...outlineBorder("focus", props),
+        outlineOffset: "-1px",
+      },
+      focused: {
+        outline: "2px solid",
+        ...outlineBorder("focus", props),
+        outlineOffset: "1px",
+        boxShadow: `inset 0 0 0 1px rgba(0, 0, 0, 0.40)`,
+        _hover: {
+          ...baseBorder("hover", props),
+          boxShadow: "none",
+          outlineOffset: "0px",
         },
       },
     }),
@@ -87,9 +99,6 @@ const config = helpers.defineMultiStyleConfig({
           ...floatingBackground("active", props),
           ...floatingBorder("active", props),
         },
-        _focus: {
-          ...outlineBorder("focus", props),
-        },
       },
       checked: {
         _hover: {
@@ -100,11 +109,22 @@ const config = helpers.defineMultiStyleConfig({
           ...floatingBackground("active", props),
           ...floatingBorder("active", props),
         },
-        _focus: {
-          outline: "4px solid",
-          outlineStyle: "double",
-          ...outlineBorder("focus", props),
-          outlineOffset: "-1px",
+      },
+      focusedChecked: {
+        outline: "4px solid",
+        outlineStyle: "double",
+        ...outlineBorder("focus", props),
+        outlineOffset: "-1px",
+      },
+      focused: {
+        outline: "2px solid",
+        ...outlineBorder("focus", props),
+        outlineOffset: "1px",
+        boxShadow: `inset 0 0 0 1px rgba(0, 0, 0, 0.10)`,
+        _hover: {
+          ...floatingBorder("hover", props),
+          boxShadow: "md",
+          outlineOffset: "0px",
         },
       },
     }),