Add a11y support to collapsible content component (#37760)

* Improve a11y support to collapsible content component

* Add changelog file

* Change id pattern to

packages/js/components/changelog/add-37330

@@ -0,0 +1,4 @@
+Significance: minor
+Type: tweak
+
+Improve a11y support to collapsible content component

packages/js/components/src/collapsible-content/collapsible-content.tsx

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
 import { createElement, useState } from '@wordpress/element';
 import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
 
@@ -33,27 +34,46 @@ export const CollapsibleContent: React.FC< CollapsedProps > = ( {
 		return persistRender ? 'visually-hidden' : 'hidden';
 	};
 
+	const collapsibleToggleId = useInstanceId(
+		CollapsibleContent,
+		'woocommerce-collapsible-content__toggle'
+	) as string;
+	const collapsibleContentId = useInstanceId(
+		CollapsibleContent,
+		'woocommerce-collapsible-content__content'
+	) as string;
+
+	const displayState = getState();
+
 	return (
-		<div
-			aria-expanded={ collapsed ? 'false' : 'true' }
-			className={ `woocommerce-collapsible-content` }
-		>
+		<div className="woocommerce-collapsible-content">
 			<button
+				type="button"
+				id={ collapsibleToggleId }
 				className="woocommerce-collapsible-content__toggle"
 				onClick={ () => setCollapsed( ! collapsed ) }
+				aria-expanded={ collapsed ? 'false' : 'true' }
+				aria-controls={
+					displayState !== 'hidden' ? collapsibleContentId : undefined
+				}
 			>
 				<div>
 					<span>{ toggleText }</span>
+
 					<Icon
 						icon={ collapsed ? chevronDown : chevronUp }
 						size={ 16 }
 					/>
 				</div>
 			</button>
-			<DisplayState state={ getState() }>
+
+			<DisplayState state={ displayState }>
 				<div
 					{ ...props }
 					className="woocommerce-collapsible-content__content"
+					id={ collapsibleContentId }
+					role="region"
+					aria-labelledby={ collapsibleToggleId }
 				>
 					{ children }
 				</div>