feat(Card): refactor component for improved accessibility

kiwicom · Jan 14, 2025 · 7343393 · 7343393
1 parent a3bf812
commit 7343393
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 23 deletions.
diff --git a/packages/orbit-components/src/Card/Card.stories.tsx b/packages/orbit-components/src/Card/Card.stories.tsx
@@ -269,7 +269,7 @@ export const CardWithDefaultExpanded: Story = {
         }
         onClose={action("onClose")}
         header={
-          <Stack inline justify="end">
+          <Stack inline justify="end" align="center">
             <Text type="secondary">Trip length: 1h55m</Text>
             <Badge icon={<Clock />} type="warningSubtle">
               Unavailable

diff --git a/packages/orbit-components/src/Card/CardSection/index.tsx b/packages/orbit-components/src/Card/CardSection/index.tsx
@@ -9,6 +9,13 @@ 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>
+);
 
 export default function CardSection({
   title,
@@ -68,24 +75,40 @@ export default function CardSection({
       onKeyDown={onClick == null ? undefined : handleKeyDown(onClick)}
     >
       {(title != null || header != null) && expandable && (
-        <button
-          type="button"
-          className="p-400 lm:p-600 hover:bg-white-normal-hover w-full"
-          aria-expanded={opened}
-          aria-controls={slideID}
-          onClick={handleClick}
+        <div
+          className={cx(
+            "hover:bg-white-normal-hover relative flex w-full cursor-pointer items-center",
+            actions && "pr-400 lm:pr-600",
+            actions &&
+              "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",
+          )}
         >
-          <Header
-            title={title}
-            titleAs={titleAs}
-            description={description}
-            expandable={expandable}
-            header={header}
-            expanded={opened}
-            actions={actions}
-            isSection
-          />
-        </button>
+          <button
+            type="button"
+            className={cx(
+              "orbit-card-header-button",
+              "p-400 lm:p-600 w-full",
+              actions && "lm:pr-200 pr-300 focus:outline-none",
+              actions &&
+                "before:absolute before:inset-0 before:box-content before:focus:outline before:focus:outline-4",
+            )}
+            aria-expanded={opened}
+            aria-controls={slideID}
+            onClick={handleClick}
+          >
+            <Header
+              title={title}
+              titleAs={titleAs}
+              description={description}
+              expandable={expandable}
+              header={header}
+              expanded={opened}
+              actions={actions}
+              isSection
+            />
+          </button>
+          {actions && <Actions actions={actions} />}
+        </div>
       )}
 
       {(title != null || header != null) && !expandable && (
@@ -100,6 +123,7 @@ export default function CardSection({
             actions={actions}
             isSection
           />
+          {actions && <Actions actions={actions} />}
         </div>
       )}
 

diff --git a/packages/orbit-components/src/Card/components/Header.tsx b/packages/orbit-components/src/Card/components/Header.tsx
@@ -68,11 +68,6 @@ const Header = ({
         color="secondary"
       />
     )}
-    {actions && (
-      <Stack inline grow={false} justify="end">
-        {actions}
-      </Stack>
-    )}
     {onClose && !actions && (
       <div className="absolute end-0 top-0">
         <ButtonLink