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;