feat(Card): improve the accessibility and add ariaLabel prop

kiwicom · Jan 22, 2025 · d847976 · d847976
1 parent a693640
commit d847976
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 31 deletions.
diff --git a/packages/orbit-components/src/Card/CardSection/index.tsx b/packages/orbit-components/src/Card/CardSection/index.tsx
@@ -8,8 +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";
+import handleKeyDown from "../../utils/handleKeyDown";
 
 const Actions = ({ actions }) => (
   <Stack inline grow={false} justify="end">
@@ -31,6 +31,7 @@ export default function CardSection({
   onExpand,
   dataTest,
   actions,
+  ariaLabel,
 }: Props) {
   const [opened, setOpened] = React.useState(initialExpanded);
 
@@ -58,23 +59,16 @@ 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 != 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 && (
+      {(title != null || header != null) && (!onClick || expandable) && (
         <div
           className={cx(
             "hover:bg-white-normal-hover p-400 lm:p-600 gap-300 relative z-10 flex cursor-pointer items-center",
@@ -106,7 +100,7 @@ export default function CardSection({
         </div>
       )}
 
-      {(title != null || header != null) && !expandable && (
+      {(title != null || header != null) && !onClick && !expandable && (
         <div className="p-400 lm:p-600 w-full">
           <Header
             title={title}
@@ -122,26 +116,58 @@ export default function CardSection({
         </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">
-              {children}
+      <div className="relative">
+        {children && expandable && (
+          <Expandable expanded={opened} slideID={slideID} labelID={slideID}>
+            <div className="font-base text-normal text-primary-foreground px-400 lm:px-600 relative z-10 w-full leading-normal">
+              {onClick && (
+                // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                <div
+                  role={!expandable || opened ? "button" : undefined}
+                  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                  tabIndex={!expandable || opened ? 0 : undefined}
+                  onKeyDown={!expandable || opened ? handleKeyDown(onClick) : undefined}
+                  className={cx(
+                    "orbit-card-wrapper-button w-full focus:outline-none",
+                    "before:rounded-100 before:absolute before:inset-0",
+                  )}
+                  onClick={!expandable || opened ? onClick : undefined}
+                  aria-label={!expandable || opened ? ariaLabel : undefined}
+                />
+              )}
+              <div className="py-400 lm:py-600 border-elevation-flat-border-color relative z-10 border-t">
+                {children}
+              </div>
             </div>
-          </div>
-        </Expandable>
-      )}
+          </Expandable>
+        )}
 
-      {children && !expandable && (
-        <div
-          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",
-          )}
-        >
-          {children}
-        </div>
-      )}
+        {children && !expandable && (
+          <div
+            className={cx(
+              "font-base text-normal text-primary-foreground px-400 lm:px-600 pb-400 lm:pb-600 relative z-10 w-full leading-normal",
+              title == null && header == null && "pt-400 lm:pt-600",
+            )}
+          >
+            {onClick && (
+              // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+              <div
+                role={!expandable || opened ? "button" : undefined}
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex={!expandable || opened ? 0 : undefined}
+                onKeyDown={!expandable || opened ? handleKeyDown(onClick) : undefined}
+                className={cx(
+                  "orbit-card-wrapper-button w-full focus:outline-none",
+                  "before:rounded-100 before:absolute before:inset-0",
+                )}
+                onClick={!expandable || opened ? onClick : undefined}
+                aria-label={!expandable || opened ? ariaLabel : undefined}
+              />
+            )}
+            <div className="relative z-10">{children}</div>
+          </div>
+        )}
+      </div>
     </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;