feat(Collapse): set a11y attributes and props

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

Hide file tree

Showing 3 changed files with 49 additions and 46 deletions.
diff --git a/packages/orbit-components/src/Collapse/Collapse.stories.tsx b/packages/orbit-components/src/Collapse/Collapse.stories.tsx
@@ -213,6 +213,12 @@ export const Uncontrolled: Story = {
   args: {
     expanded: undefined,
   },
+
+  parameters: {
+    controls: {
+      exclude: "expanded",
+    },
+  },
 };
 
 export const Rtl: Story = {

diff --git a/packages/orbit-components/src/Collapse/__tests__/index.test.tsx b/packages/orbit-components/src/Collapse/__tests__/index.test.tsx
@@ -4,11 +4,6 @@ import userEvent from "@testing-library/user-event";
 import { render, screen } from "../../test-utils";
 import Collapse from "..";
 
-const toggleButtons = [
-  [0, "label"],
-  [1, "icon button"],
-];
-
 describe("Collapse", () => {
   const user = userEvent.setup();
 
@@ -31,32 +26,35 @@ describe("Collapse", () => {
     expect(screen.getByText("customLabel")).toBeInTheDocument();
   });
 
-  it.each(toggleButtons)("should trigger click handler when clicking on %s", async buttonIndex => {
+  it("should trigger click handler when clicking on button", async () => {
     const onClick = jest.fn();
     render(
       <Collapse label="Collapse" onClick={onClick}>
         <div>children</div>
       </Collapse>,
     );
-    const toggleButton = screen.getAllByRole("button", { name: "Collapse" })[buttonIndex];
-    await user.click(toggleButton);
-    expect(onClick).toHaveBeenCalled();
+
+    screen.getAllByRole("button").forEach(async toggleButton => {
+      await user.click(toggleButton);
+      expect(onClick).toHaveBeenCalled();
+    });
   });
 
   describe("uncontrolled", () => {
-    it.each(toggleButtons)("should expand/collapse when clicking on %s", async buttonIndex => {
+    it("should expand/collapse when clicking on button", async () => {
       render(
         <Collapse label="Collapse">
           <article>children</article>
         </Collapse>,
       );
-      const toggleButton = screen.getAllByRole("button", { name: "Collapse" })[buttonIndex];
-      // with ByRole we can test whether the content is visible because of aria-hidden
-      expect(screen.queryByRole("article")).not.toBeInTheDocument();
-      await user.click(toggleButton);
-      expect(screen.getByRole("article")).toBeInTheDocument();
-      await user.click(toggleButton);
-      expect(screen.queryByRole("article")).not.toBeInTheDocument();
+
+      await screen.getAllByRole("button").forEach(async toggleButton => {
+        expect(screen.queryByRole("article")).not.toBeInTheDocument();
+        await user.click(toggleButton);
+        expect(screen.getByRole("article")).toBeInTheDocument();
+        await user.click(toggleButton);
+        expect(screen.queryByRole("article")).not.toBeInTheDocument();
+      });
     });
   });
 

diff --git a/packages/orbit-components/src/Collapse/index.tsx b/packages/orbit-components/src/Collapse/index.tsx
@@ -64,36 +64,35 @@ const Collapse = ({
       data-test={dataTest}
       id={id}
     >
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-      <div
-        className="block w-full cursor-pointer"
-        onClick={handleClick}
-        role="button"
-        tabIndex={-1}
-        id={labelID}
-      >
-        <Stack justify="between" align="center">
-          {label && !customLabel && <Heading type="title4">{label}</Heading>}
-          {customLabel}
-          <Stack inline grow={false} align="center" spacing="300">
-            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-            <div
-              className="flex items-center"
-              onClick={ev => {
-                ev.stopPropagation();
-              }}
-            >
-              {actions}
-            </div>
-            <ButtonLink
-              iconLeft={<AnimatedIcon expanded={expanded} />}
-              size="small"
-              type="secondary"
-              ariaLabelledby={labelID}
-              ariaExpanded={expanded}
-              ariaControls={slideID}
-            />
+      <div className="flex items-center justify-between">
+        <div
+          className="flex w-full self-stretch"
+          id={labelID}
+          role="button"
+          tabIndex={0}
+          onClick={handleClick}
+          onKeyDown={e => {
+            if (e.key === "Enter" || e.key === " ") {
+              handleClick(e);
+            }
+          }}
+        >
+          <Stack justify="between" align="center">
+            {label && !customLabel && <Heading type="title4">{label}</Heading>}
+            {customLabel}
           </Stack>
+        </div>
+        <Stack inline grow={false} align="center" spacing="none">
+          {actions && <div className="mx-300 flex items-center">{actions}</div>}
+          <ButtonLink
+            iconLeft={<AnimatedIcon expanded={expanded} />}
+            size="small"
+            type="secondary"
+            onClick={handleClick}
+            ariaLabelledby={labelID}
+            ariaExpanded={expanded}
+            ariaControls={slideID}
+          />
         </Stack>
       </div>
       <Slide maxHeight={height} expanded={expanded} id={slideID} ariaLabelledBy={labelID}>