From 8f0502d8ddcb2113235fd30191bafcae267433e1 Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Wed, 18 Dec 2024 17:22:46 +0100
Subject: [PATCH] feat(Collapse): set a11y attributes and props

---
 .../src/Collapse/Collapse.stories.tsx         |  6 ++++++
 .../src/Collapse/__tests__/index.test.tsx     | 21 ++++++++++++-------
 .../orbit-components/src/Collapse/index.tsx   | 10 ++-------
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/orbit-components/src/Collapse/Collapse.stories.tsx b/packages/orbit-components/src/Collapse/Collapse.stories.tsx
index ab49aae7e0..a4513f2ca8 100644
--- 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
index 5da88c6b8c..4378251df8 100644
--- a/packages/orbit-components/src/Collapse/__tests__/index.test.tsx
+++ b/packages/orbit-components/src/Collapse/__tests__/index.test.tsx
@@ -4,10 +4,7 @@ import userEvent from "@testing-library/user-event";
 import { render, screen } from "../../test-utils";
 import Collapse from "..";
 
-const toggleButtons = [
-  [0, "label"],
-  [1, "icon button"],
-];
+const toggleTriggers = ["group", "button"];
 
 describe("Collapse", () => {
   const user = userEvent.setup();
@@ -31,26 +28,34 @@ describe("Collapse", () => {
     expect(screen.getByText("customLabel")).toBeInTheDocument();
   });
 
-  it.each(toggleButtons)("should trigger click handler when clicking on %s", async buttonIndex => {
+  it.each(toggleTriggers)("should trigger click handler when clicking on %s", async trigger => {
     const onClick = jest.fn();
     render(
       <Collapse label="Collapse" onClick={onClick}>
         <div>children</div>
       </Collapse>,
     );
-    const toggleButton = screen.getAllByRole("button", { name: "Collapse" })[buttonIndex];
+
+    const toggleButton = screen.getByRole(trigger, {
+      name: "Collapse",
+    });
+
     await user.click(toggleButton);
     expect(onClick).toHaveBeenCalled();
   });
 
   describe("uncontrolled", () => {
-    it.each(toggleButtons)("should expand/collapse when clicking on %s", async buttonIndex => {
+    it.each(toggleTriggers)("should expand/collapse when clicking on %s", async trigger => {
       render(
         <Collapse label="Collapse">
           <article>children</article>
         </Collapse>,
       );
-      const toggleButton = screen.getAllByRole("button", { name: "Collapse" })[buttonIndex];
+
+      const toggleButton = screen.getByRole(trigger, {
+        name: "Collapse",
+      });
+
       // with ByRole we can test whether the content is visible because of aria-hidden
       expect(screen.queryByRole("article")).not.toBeInTheDocument();
       await user.click(toggleButton);
diff --git a/packages/orbit-components/src/Collapse/index.tsx b/packages/orbit-components/src/Collapse/index.tsx
index d344cde17e..70ccf88f24 100644
--- a/packages/orbit-components/src/Collapse/index.tsx
+++ b/packages/orbit-components/src/Collapse/index.tsx
@@ -64,14 +64,8 @@ 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}
-      >
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
+      <div className="block w-full cursor-pointer" id={labelID} onClick={handleClick} role="group">
         <Stack justify="between" align="center">
           {label && !customLabel && <Heading type="title4">{label}</Heading>}
           {customLabel}