feat(Collapse): set a11y attributes and props

kiwicom · Dec 19, 2024 · ae54770 · ae54770
1 parent 288f906
commit ae54770
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 47 deletions.
diff --git 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
@@ -59,49 +59,50 @@ const Collapse = ({
   );
 
   return (
-    <div
-      className="border-b-cloud-normal pb-300 mb-400 block w-full border-b border-solid last:m-0 last:border-none"
-      data-test={dataTest}
-      id={id}
-    >
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+    <>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
       <div
-        className="block w-full cursor-pointer"
+        className="border-b-cloud-normal pb-300 mb-400 block w-full border-b border-solid last:m-0 last:border-none"
+        data-test={dataTest}
+        id={id}
+        aria-label={label}
         onClick={handleClick}
-        role="button"
-        tabIndex={-1}
-        id={labelID}
+        role="group"
       >
-        <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="block w-full cursor-pointer" 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}
+                tabIndex={0}
+                ariaExpanded={expanded}
+                ariaControls={slideID}
+                role="button"
+              />
+            </Stack>
           </Stack>
-        </Stack>
-      </div>
-      <Slide maxHeight={height} expanded={expanded} id={slideID} ariaLabelledBy={labelID}>
-        <div className="my-300 mx-0" ref={node}>
-          {children}
         </div>
-      </Slide>
-    </div>
+        <Slide maxHeight={height} expanded={expanded} id={slideID} ariaLabelledBy={labelID}>
+          <div className="my-300 mx-0" ref={node}>
+            {children}
+          </div>
+        </Slide>
+      </div>
+    </>
   );
 };
 

diff --git a/packages/orbit-components/src/Collapse/types.d.ts b/packages/orbit-components/src/Collapse/types.d.ts
@@ -8,7 +8,7 @@ import type * as Common from "../common/types";
 export interface Props extends Common.Globals {
   readonly initialExpanded?: boolean;
   readonly expanded?: boolean;
-  readonly label?: Common.Translation;
+  readonly label?: string;
   readonly children: React.ReactNode;
   readonly actions?: React.ReactNode;
   readonly customLabel?: React.ReactNode;