feat(Card): improve the accessibility of the component

kiwicom · Jan 23, 2025 · 9db2842 · 9db2842
1 parent a693640
commit 9db2842
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 32 deletions.
diff --git a/packages/orbit-components/src/Card/CardSection/index.tsx b/packages/orbit-components/src/Card/CardSection/index.tsx
@@ -8,14 +8,8 @@ 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";
-
-const Actions = ({ actions }) => (
-  <Stack inline grow={false} justify="end">
-    {actions}
-  </Stack>
-);
+import handleKeyDown from "../../utils/handleKeyDown";
 
 export default function CardSection({
   title,
@@ -31,6 +25,7 @@ export default function CardSection({
   onExpand,
   dataTest,
   actions,
+  ariaLabel,
 }: Props) {
   const [opened, setOpened] = React.useState(initialExpanded);
 
@@ -58,26 +53,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,42 +91,82 @@ 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 ">
+          {/* 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}
+            className={cx(
+              "orbit-card-wrapper-button w-full focus:outline-none",
+              onClick && "before:rounded-100 before:absolute before:inset-0",
+            )}
+            onClick={onClick || undefined}
+            aria-label={onClick ? ariaLabel : undefined}
+          >
+            <Header
+              title={title}
+              titleAs={titleAs}
+              description={description}
+              expandable={expandable}
+              header={header}
+              expanded={opened}
+              actions={actions}
+              isSection
+            />
+          </div>
         </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">
+            {/* {onClick && opened && onClickWrapper()} */}
+            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+            <div
+              role={onClick && opened ? "button" : undefined}
+              // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+              tabIndex={onClick && opened ? 0 : undefined}
+              onKeyDown={onClick && opened ? handleKeyDown(onClick) : undefined}
+              className={cx(
+                "orbit-card-wrapper-button w-full focus:outline-none",
+                "py-400 lm:py-600 border-elevation-flat-border-color border-t",
+                onClick && opened && "before:rounded-100 before:absolute before:inset-0",
+              )}
+              onClick={onClick || undefined}
+              aria-label={onClick ? ariaLabel : undefined}
+            >
               {children}
             </div>
           </div>
         </Expandable>
       )}
 
       {children && !expandable && (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         <div
           className={cx(
+            "orbit-card-wrapper-button focus:outline-none",
             "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 && "before:rounded-100 before:absolute before:inset-0",
           )}
+          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}
+          aria-label={onClick ? ariaLabel : undefined}
         >
           {children}
         </div>

diff --git a/packages/orbit-components/src/Card/CardSection/types.d.ts b/packages/orbit-components/src/Card/CardSection/types.d.ts
@@ -29,6 +29,7 @@ interface CardProps extends Common.Globals {
   readonly onExpand?: Common.Callback;
   readonly onClick?: Common.Callback;
   readonly header?: React.ReactNode;
+  readonly ariaLabel?: string;
 }
 
 export type Props = CardProps & ExpandableConditionalProps;