fix(a11y): link panel header to its content with aria-controls

src/Panel.tsx

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import CSSMotion from '@rc-component/motion';
-import { isNonNullable, isReactRenderable, KeyCode } from '@rc-component/util';
+import { isNonNullable, isReactRenderable, KeyCode, useId } from '@rc-component/util';
 import React from 'react';
 import type { CollapsePanelProps } from './interface';
 import PanelContent from './PanelContent';
@@ -32,6 +32,8 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
 
   const ifExtraExist = isNonNullable(extra) && typeof extra !== 'boolean';
 
+  const panelId = useId();
+
   const collapsibleProps = {
     onClick: () => {
       onItemClick?.(panelKey);
@@ -43,6 +45,8 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
     },
     role: accordion ? 'tab' : 'button',
     ['aria-expanded']: isActive,
+    // The panel content is not mounted while collapsed, so only reference it when expanded
+    ['aria-controls']: isActive ? panelId : undefined,
     ['aria-disabled']: disabled,
     tabIndex: disabled ? -1 : 0,
   };
@@ -117,6 +121,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
               styles={styles}
               isActive={isActive}
               forceRender={forceRender}
+              id={panelId}
               role={accordion ? 'tabpanel' : undefined}
             >
               {children}

src/PanelContent.tsx

@@ -13,6 +13,7 @@ const PanelContent = React.forwardRef<
     style,
     children,
     isActive,
+    id,
     role,
     classNames: customizeClassNames,
     styles,
@@ -42,6 +43,7 @@ const PanelContent = React.forwardRef<
         className,
       )}
       style={style}
+      id={id}
       role={role}
     >
       <div className={clsx(`${prefixCls}-body`, customizeClassNames?.body)} style={styles?.body}>

tests/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`collapse props items should work with nested 1`] = `
 <div

tests/index.spec.tsx

@@ -445,6 +445,35 @@ describe('collapse', () => {
     );
   });
 
+  it('should link the header to its panel with aria-controls', () => {
+    const { container } = render(
+      <Collapse defaultActiveKey="1">
+        <Panel header="collapse 1" key="1">
+          first
+        </Panel>
+      </Collapse>,
+    );
+    const panelId = container.querySelector('.rc-collapse-panel')!.id;
+
+    expect(panelId).toBeTruthy();
+    expect(container.querySelector('.rc-collapse-header')).toHaveAttribute(
+      'aria-controls',
+      panelId,
+    );
+  });
+
+  it('should not set aria-controls on a collapsed header', () => {
+    const { container } = render(
+      <Collapse>
+        <Panel header="collapse 1" key="1">
+          first
+        </Panel>
+      </Collapse>,
+    );
+
+    expect(container.querySelector('.rc-collapse-header')).not.toHaveAttribute('aria-controls');
+  });
+
   describe('wrapped in Fragment', () => {
     const expandIcon = () => <span>test{'>'}</span>;
     const element = (