feat(Card): improve the accessibility of the component

kiwicom · Jan 24, 2025 · c0a5a49 · c0a5a49
1 parent ea6d2cc
commit c0a5a49
Showing 1 changed file with 52 additions and 33 deletions.
diff --git a/packages/orbit-components/src/Card/CardSection/index.tsx b/packages/orbit-components/src/Card/CardSection/index.tsx
@@ -8,13 +8,29 @@ import { ELEMENT_OPTIONS } from "../../Heading/consts";
 import type { Props } from "./types";
 import Header from "../components/Header";
 import Expandable from "./components/Expandable";
-import handleKeyDown from "../../utils/handleKeyDown";
 import Stack from "../../Stack";
+import handleKeyDown from "../../utils/handleKeyDown";
 
-const Actions = ({ actions }) => (
-  <Stack inline grow={false} justify="end">
-    {actions}
-  </Stack>
+const InteractiveWrapper = ({
+  onClick,
+  className,
+  children,
+}: Pick<Props, "onClick"> & { children?: React.ReactNode; className?: string }) => (
+  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+  <div
+    role={onClick ? "button" : undefined}
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex={onClick ? 0 : undefined}
+    onKeyDown={onClick ? handleKeyDown(onClick) : undefined}
+    onClick={onClick || undefined}
+    className={cx(
+      "orbit-card-wrapper-button focus:outline-none",
+      onClick && "before:rounded-100 before:absolute before:inset-0",
+      className,
+    )}
+  >
+    {children}
+  </div>
 );
 
 export default function CardSection({
@@ -58,26 +74,20 @@ export default function CardSection({
 
   return (
     // Needs to capture bubbled click events from the <button> below
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
       className={cx(
-        "duration-fast lm:border-x border-b transition-all ease-in-out",
+        "duration-fast lm:border-x relative border-b transition-all ease-in-out",
         opened && "my-200 rounded-100 shadow-level2 [&+*]:border-t",
-        onClick != null && "hover:bg-white-normal-hover cursor-pointer",
+        onClick && !expandable && "hover:bg-white-normal-hover",
+        onClick != null &&
+          "has-[.orbit-card-wrapper-button:focus]:focus-within:rounded-100 has-[.orbit-card-wrapper-button:focus]:focus-within:outline-blue-normal has-[.orbit-card-wrapper-button:focus]:focus-within:outline has-[.orbit-card-wrapper-button:focus]:focus-within:outline-2",
       )}
       data-test={dataTest}
-      role={onClick == null ? undefined : "button"}
-      // See comment above
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      tabIndex={onClick == null ? undefined : 0}
-      onClick={onClick}
-      // Not needed once we can use <button> or <a> like we should
-      onKeyDown={onClick == null ? undefined : handleKeyDown(onClick)}
     >
       {(title != null || header != null) && expandable && (
         <div
           className={cx(
-            "hover:bg-white-normal-hover p-400 lm:p-600 gap-300 relative z-10 flex cursor-pointer items-center",
+            "hover:bg-white-normal-hover p-400 lm:p-600 gap-300 flex cursor-pointer items-center",
             "has-[.orbit-card-header-button:focus]:focus-within:rounded-100 has-[.orbit-card-header-button:focus]:focus-within:outline-blue-normal has-[.orbit-card-header-button:focus]:focus-within:outline has-[.orbit-card-header-button:focus]:focus-within:outline-2",
           )}
         >
@@ -102,45 +112,54 @@ export default function CardSection({
               isSection
             />
           </button>
-          {actions && <Actions actions={actions} />}
+          {actions && (
+            <Stack inline grow={false} justify="end">
+              {actions}
+            </Stack>
+          )}
         </div>
       )}
 
       {(title != null || header != null) && !expandable && (
-        <div className="p-400 lm:p-600 w-full">
-          <Header
-            title={title}
-            titleAs={titleAs}
-            description={description}
-            expandable={expandable}
-            header={header}
-            expanded={opened}
-            actions={actions}
-            isSection
-          />
-          {actions && <Actions actions={actions} />}
+        <div className="p-400 lm:p-600 ">
+          <InteractiveWrapper onClick={onClick}>
+            <Header
+              title={title}
+              titleAs={titleAs}
+              description={description}
+              expandable={expandable}
+              header={header}
+              expanded={opened}
+              actions={actions}
+              isSection
+            />
+          </InteractiveWrapper>
         </div>
       )}
 
       {children && expandable && (
         <Expandable expanded={opened} slideID={slideID} labelID={slideID}>
           <div className="font-base text-normal text-primary-foreground px-400 lm:px-600 w-full leading-normal">
-            <div className="py-400 lm:py-600 border-elevation-flat-border-color border-t">
+            <InteractiveWrapper
+              onClick={opened ? onClick : undefined}
+              className={cx("py-400 lm:py-600 border-elevation-flat-border-color border-t")}
+            >
               {children}
-            </div>
+            </InteractiveWrapper>
           </div>
         </Expandable>
       )}
 
       {children && !expandable && (
-        <div
+        <InteractiveWrapper
           className={cx(
             "font-base text-normal text-primary-foreground px-400 lm:px-600 pb-400 lm:pb-600 w-full leading-normal",
             title == null && header == null && "pt-400 lm:pt-600",
           )}
+          onClick={onClick}
         >
           {children}
-        </div>
+        </InteractiveWrapper>
       )}
     </div>
   );