diff --git a/packages/react/accordion/src/accordion.test.tsx b/packages/react/accordion/src/accordion.test.tsx
index 93a816198..a6f419f67 100644
--- a/packages/react/accordion/src/accordion.test.tsx
+++ b/packages/react/accordion/src/accordion.test.tsx
@@ -291,6 +291,51 @@ describe('given a single Accordion', () => {
});
});
+describe('given a controlled single collapsible Accordion', () => {
+ let rendered: RenderResult;
+
+ afterEach(cleanup);
+
+ beforeEach(() => {
+ rendered = render();
+ });
+
+ describe('when opening an item and then clicking the same trigger', () => {
+ let trigger: HTMLElement;
+ let contentOne: HTMLElement;
+
+ beforeEach(() => {
+ trigger = rendered.getByText('Trigger One');
+ fireEvent.click(trigger);
+ contentOne = rendered.getByText('Content One');
+ });
+
+ it('should show the content after the first click', () => {
+ expect(contentOne).toBeVisible();
+ });
+
+ describe('then clicking the trigger again to close', () => {
+ beforeEach(() => {
+ fireEvent.click(trigger);
+ });
+
+ it('should hide the content after the second click', () => {
+ expect(contentOne).not.toBeVisible();
+ });
+
+ describe('then clicking the trigger a third time to re-open', () => {
+ beforeEach(() => {
+ fireEvent.click(trigger);
+ });
+
+ it('should show the content again', () => {
+ expect(rendered.getByText('Content One')).toBeVisible();
+ });
+ });
+ });
+ });
+});
+
describe('given a multiple Accordion', () => {
let handleValueChange: Mock;
let rendered: RenderResult;
@@ -412,3 +457,22 @@ function AccordionTest(props: React.ComponentProps) {
);
}
+
+function ControlledAccordionSingle() {
+ const [value, setValue] = React.useState(undefined);
+ return (
+ setValue(v || undefined)}
+ >
+
+
+ Trigger One
+
+ Content One
+
+
+ );
+}
diff --git a/packages/react/accordion/src/accordion.tsx b/packages/react/accordion/src/accordion.tsx
index 36dbdc686..ba4f63328 100644
--- a/packages/react/accordion/src/accordion.tsx
+++ b/packages/react/accordion/src/accordion.tsx
@@ -106,8 +106,14 @@ const AccordionImplSingle = React.forwardRef