feat(Card): improve the accessibility of the component

kiwicom · Jan 28, 2025 · 2abcca2 · 2abcca2
1 parent 16af371
commit 2abcca2
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 30 deletions.
diff --git a/packages/orbit-components/src/Card/Card.stories.tsx b/packages/orbit-components/src/Card/Card.stories.tsx
@@ -18,6 +18,7 @@ type CardPropsAndCustomArgs = React.ComponentProps<typeof Card> & {
   sectionTitle: string;
   sectionDescription: string;
   initialExpanded?: boolean;
+  onClick: () => void;
 };
 
 const meta: Meta<CardPropsAndCustomArgs> = {
@@ -312,7 +313,7 @@ export const CardWithDefaultExpanded: Story = {
 };
 
 export const CardWithMixedSections: Story = {
-  render: ({ sectionTitle, sectionDescription, ...args }) => (
+  render: ({ sectionTitle, sectionDescription, onClick, ...args }) => (
     <Card
       {...args}
       actions={
@@ -339,12 +340,19 @@ export const CardWithMixedSections: Story = {
       <CardSection title={sectionTitle} description={sectionDescription}>
         Section Content
       </CardSection>
+      <CardSection onClick={onClick} title={sectionTitle} description={sectionDescription}>
+        Section Content with onClick
+      </CardSection>
     </Card>
   ),
 
+  args: {
+    onClick: action("onClick"),
+  },
+
   parameters: {
     controls: {
-      exclude: ["labelClose", "initialExpanded", "expanded"],
+      exclude: ["labelClose", "initialExpanded", "expanded", "onClick"],
     },
   },
 };

diff --git a/packages/orbit-components/src/Card/CardSection/index.tsx b/packages/orbit-components/src/Card/CardSection/index.tsx
@@ -8,8 +8,30 @@ 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 ContentWrapper = ({
+  onClick,
+  className,
+  children,
+}: Pick<Props, "onClick" | "children"> & { 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 flex-1 focus:outline-none",
+      onClick && "before:rounded-100 before:absolute before:inset-0",
+      className,
+    )}
+  >
+    {children}
+  </div>
+);
 
 const Actions = ({ actions }) => (
   <Stack inline grow={false} justify="end">
@@ -58,26 +80,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 &&
+          "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",
           )}
         >
@@ -105,42 +121,45 @@ export default function CardSection({
           {actions && <Actions actions={actions} />}
         </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
-          />
+        <div className="gap-300 p-400 lm:p-600 flex items-center ">
+          <ContentWrapper onClick={!children ? onClick : undefined}>
+            <Header
+              title={title}
+              titleAs={titleAs}
+              description={description}
+              header={header}
+              expanded={opened}
+              isSection
+            />
+          </ContentWrapper>
           {actions && <Actions actions={actions} />}
         </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">
+            <ContentWrapper
+              onClick={opened ? onClick : undefined}
+              className={cx("py-400 lm:py-600 border-elevation-flat-border-color border-t")}
+            >
               {children}
-            </div>
+            </ContentWrapper>
           </div>
         </Expandable>
       )}
 
       {children && !expandable && (
-        <div
+        <ContentWrapper
           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>
+        </ContentWrapper>
       )}
     </div>
   );