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(
children
,
);
- 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(
children
,
);
- 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..37e859174f 100644
--- a/packages/orbit-components/src/Collapse/index.tsx
+++ b/packages/orbit-components/src/Collapse/index.tsx
@@ -59,49 +59,50 @@ const Collapse = ({
);
return (
-
- {/* 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 */}
-
- {label && !customLabel && {label}}
- {customLabel}
-
- {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
- {
- ev.stopPropagation();
- }}
- >
- {actions}
-
- }
- size="small"
- type="secondary"
- ariaLabelledby={labelID}
- ariaExpanded={expanded}
- ariaControls={slideID}
- />
+
+
+ {label && !customLabel && {label}}
+ {customLabel}
+
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+ {
+ ev.stopPropagation();
+ }}
+ >
+ {actions}
+
+ }
+ size="small"
+ type="secondary"
+ ariaLabelledby={labelID}
+ tabIndex={0}
+ ariaExpanded={expanded}
+ ariaControls={slideID}
+ role="button"
+ />
+
-
-
-
-
- {children}
-
-
+
+
+ {children}
+
+
+
+ >
);
};
diff --git a/packages/orbit-components/src/Collapse/types.d.ts b/packages/orbit-components/src/Collapse/types.d.ts
index 6ea0353eb0..abd06941d0 100644
--- 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;