feat(Card): refactor component for improved accessibility

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

Hide file tree

Showing 3 changed files with 55 additions and 33 deletions.
diff --git a/packages/orbit-components/src/Card/Card.stories.tsx b/packages/orbit-components/src/Card/Card.stories.tsx
@@ -13,6 +13,15 @@ import { ELEMENT_OPTIONS } from "../Heading/consts";
 
 import Card from ".";
 
+const CardSectionHeaderContent = () => (
+  <Stack inline align="center" justify="end">
+    <Text type="secondary">Trip length: 1h55m</Text>
+    <Badge icon={<Clock />} type="warningSubtle">
+      Unavailable
+    </Badge>
+  </Stack>
+);
+
 type CardPropsAndCustomArgs = React.ComponentProps<typeof Card> & {
   expanded: boolean;
   sectionTitle: string;
@@ -245,15 +254,16 @@ export const CardWithControlledWithControls: Story = {
 export const CardWithDefaultExpanded: Story = {
   render: ({ initialExpanded }) => (
     <Card>
+      <CardSection expandable header={<CardSectionHeaderContent />}>
+        Hidden content
+      </CardSection>
       <CardSection
         expandable
-        header={
-          <Stack inline align="center" justify="end">
-            <Text type="secondary">Trip length: 1h55m</Text>
-            <Badge icon={<Clock />} type="warningSubtle">
-              Unavailable
-            </Badge>
-          </Stack>
+        header={<CardSectionHeaderContent />}
+        actions={
+          <ButtonLink compact type="secondary" size="small">
+            Open
+          </ButtonLink>
         }
       >
         Hidden content
@@ -268,14 +278,7 @@ export const CardWithDefaultExpanded: Story = {
           </ButtonLink>
         }
         onClose={action("onClose")}
-        header={
-          <Stack inline justify="end">
-            <Text type="secondary">Trip length: 1h55m</Text>
-            <Badge icon={<Clock />} type="warningSubtle">
-              Unavailable
-            </Badge>
-          </Stack>
-        }
+        header={<CardSectionHeaderContent />}
       >
         By default visible content
       </CardSection>

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,35 @@ 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 p-400 lm:p-600 gap-300 relative z-10 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",
+          )}
         >
-          <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 w-full focus:outline-none",
+              "before:absolute before:inset-0",
+            )}
+            aria-expanded={opened}
+            aria-controls={slideID}
+            onClick={handleClick}
+          >
+            <Header
+              title={title}
+              titleAs={titleAs}
+              description={description}
+              expandable={expandable}
+              header={header}
+              expanded={opened}
+              actions={Boolean(actions)}
+              isSection
+            />
+          </button>
+          {actions && <Actions actions={actions} />}
+        </div>
       )}
 
       {(title != null || header != null) && !expandable && (
@@ -100,6 +118,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,7 +68,7 @@ const Header = ({
         color="secondary"
       />
     )}
-    {actions && (
+    {React.isValidElement(actions) && (
       <Stack inline grow={false} justify="end">
         {actions}
       </Stack>