[Collapsible] Fix trigger aria-controls referencing nonexistent id (

#1028)
mui · Dec 10, 2024 · d6ffbb0 · d6ffbb0
1 parent 3088be4
commit d6ffbb0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/packages/react/src/collapsible/panel/CollapsiblePanel.test.tsx b/packages/react/src/collapsible/panel/CollapsiblePanel.test.tsx
@@ -59,6 +59,9 @@ describe('<Collapsible.Panel />', () => {
       const trigger = getByRole('button');
 
       expect(trigger).to.have.attribute('aria-expanded', 'false');
+      expect(trigger.getAttribute('aria-controls')).to.equal(
+        queryByText(PANEL_CONTENT)?.getAttribute('id'),
+      );
       expect(queryByText(PANEL_CONTENT)).to.not.equal(null);
       expect(queryByText(PANEL_CONTENT)).not.toBeVisible();
       expect(queryByText(PANEL_CONTENT)).to.have.attribute('data-closed');
@@ -76,6 +79,9 @@ describe('<Collapsible.Panel />', () => {
       await flushMicrotasks();
 
       expect(trigger).to.have.attribute('aria-expanded', 'false');
+      expect(trigger.getAttribute('aria-controls')).to.equal(
+        queryByText(PANEL_CONTENT)?.getAttribute('id'),
+      );
       expect(queryByText(PANEL_CONTENT)).not.toBeVisible();
       expect(queryByText(PANEL_CONTENT)).to.have.attribute('data-closed');
     });

diff --git a/packages/react/src/collapsible/panel/useCollapsiblePanel.ts b/packages/react/src/collapsible/panel/useCollapsiblePanel.ts
@@ -76,11 +76,15 @@ export function useCollapsiblePanel(
   const isTransitioningRef = React.useRef(false);
 
   useEnhancedEffect(() => {
-    setPanelId(id);
+    if (!keepMounted && !open) {
+      setPanelId(undefined);
+    } else {
+      setPanelId(id);
+    }
     return () => {
       setPanelId(undefined);
     };
-  }, [id, setPanelId]);
+  }, [id, setPanelId, keepMounted, open]);
 
   const handlePanelRef = useEventCallback((element: HTMLElement) => {
     if (!element) {
@@ -204,6 +208,7 @@ export function useCollapsiblePanel(
     registerCssTransitionListeners,
     runOnceAnimationsFinish,
     setContextMounted,
+    setPanelId,
   ]);
 
   useOnMount(() => {

diff --git a/packages/react/src/collapsible/root/CollapsibleRoot.test.tsx b/packages/react/src/collapsible/root/CollapsibleRoot.test.tsx
@@ -46,6 +46,7 @@ describe('<Collapsible.Root />', () => {
 
       const trigger = getByRole('button');
 
+      expect(trigger).to.not.have.attribute('aria-controls');
       expect(trigger).to.have.attribute('aria-expanded', 'false');
       expect(queryByText(PANEL_CONTENT)).to.equal(null);
 
@@ -62,6 +63,7 @@ describe('<Collapsible.Root />', () => {
       setProps({ open: false });
       await flushMicrotasks();
 
+      expect(trigger).to.not.have.attribute('aria-controls');
       expect(trigger).to.have.attribute('aria-expanded', 'false');
       expect(queryByText(PANEL_CONTENT)).to.equal(null);
     });
@@ -81,6 +83,7 @@ describe('<Collapsible.Root />', () => {
 
       const trigger = getByRole('button');
 
+      expect(trigger).to.not.have.attribute('aria-controls');
       expect(trigger).to.have.attribute('aria-expanded', 'false');
       expect(queryByText(PANEL_CONTENT)).to.equal(null);
 
@@ -94,6 +97,7 @@ describe('<Collapsible.Root />', () => {
 
       await user.pointer({ keys: '[MouseLeft]', target: trigger });
 
+      expect(trigger).to.not.have.attribute('aria-controls');
       expect(trigger).to.have.attribute('aria-expanded', 'false');
       expect(trigger).to.not.have.attribute('data-panel-open');
       expect(queryByText(PANEL_CONTENT)).to.equal(null);
@@ -141,6 +145,7 @@ describe('<Collapsible.Root />', () => {
 
         await user.keyboard(`[${key}]`);
 
+        expect(trigger).to.not.have.attribute('aria-controls');
         expect(trigger).to.have.attribute('aria-expanded', 'false');
         expect(trigger).not.to.have.attribute('data-panel-open');
         expect(queryByText(PANEL_CONTENT)).to.equal(null);