test: add storybook story for expandOnTileClick and restore handleKey…

…Down Co-Authored-By: Jozef Képesi <[email protected]>
kiwicom · Dec 17, 2024 · 9e66744 · 9e66744
1 parent a62d0e5
commit 9e66744
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 0 deletions.
diff --git a/packages/orbit-components/src/Accordion/Accordion.stories.tsx b/packages/orbit-components/src/Accordion/Accordion.stories.tsx
@@ -264,3 +264,58 @@ export const LoadingAccordion: Story = {
     </Accordion>
   ),
 };
+
+export const MobileFirstInteraction: Story = {
+  render: function Render() {
+    const [expandedSection, setExpandedSection] = React.useState("");
+
+    return (
+      <Stack>
+        <Text>Traditional button-based expansion:</Text>
+        <Accordion
+          expandedSection={expandedSection}
+          onExpand={id => setExpandedSection(String(id))}
+        >
+          <AccordionSection
+            id="traditional"
+            header={
+              <Stack spacing="300">
+                <Text type="primary">Click the button to expand</Text>
+                <Text size="small">Uses traditional button-based expansion</Text>
+              </Stack>
+            }
+          >
+            <Text type="primary">This section uses the traditional button-based expansion.</Text>
+          </AccordionSection>
+        </Accordion>
+
+        <Text spaceAfter="large">Mobile-first tile click expansion:</Text>
+        <Accordion
+          expandedSection={expandedSection}
+          onExpand={id => setExpandedSection(String(id))}
+        >
+          <AccordionSection
+            id="mobile"
+            expandOnTileClick
+            header={
+              <Stack spacing="300">
+                <Text type="primary">Click anywhere on the header to expand</Text>
+                <Text size="small">Uses mobile-first tile click interaction</Text>
+              </Stack>
+            }
+          >
+            <Text type="primary">
+              This section uses the new mobile-first expandOnTileClick interaction.
+            </Text>
+            <Text type="primary">
+              The entire header area is clickable for better mobile usability.
+            </Text>
+            <Text type="primary">
+              Keyboard users can still use Enter or Space to expand/collapse.
+            </Text>
+          </AccordionSection>
+        </Accordion>
+      </Stack>
+    );
+  },
+};
diff --git a/packages/orbit-components/src/Accordion/AccordionSection/components/SectionHeader.tsx b/packages/orbit-components/src/Accordion/AccordionSection/components/SectionHeader.tsx
@@ -32,6 +32,16 @@ const AccordionSectionHeader = ({
     [onExpand],
   );
 
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onExpand?.();
+      }
+    },
+    [onExpand],
+  );
+
   const handleButtonClick = React.useCallback(
     (e: React.SyntheticEvent<HTMLButtonElement | HTMLAnchorElement>) => {
       e.stopPropagation();
@@ -65,6 +75,7 @@ const AccordionSectionHeader = ({
           "hover:bg-cloud-light cursor-pointer",
         )}
         onClick={handleClick}
+        onKeyDown={handleKeyDown}
         data-test={dataTest && `${dataTest}Header`}
         aria-expanded={expanded}
       >