From 23afe6f5e266877186b81bac2253ab49e24f0465 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 6 Mar 2026 21:22:51 +0100
Subject: [PATCH 01/12] CollapsibleCard: use Collapsible.Trigger instead of
 custom click handler

---
 packages/ui/src/collapsible-card/header.tsx   | 31 +++++--------------
 .../ui/src/collapsible-card/style.module.css  | 20 +++++++++---
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/packages/ui/src/collapsible-card/header.tsx b/packages/ui/src/collapsible-card/header.tsx
index cf4c880bb5aabe..a5c6fdf4cc26d8 100644
--- a/packages/ui/src/collapsible-card/header.tsx
+++ b/packages/ui/src/collapsible-card/header.tsx
@@ -1,6 +1,5 @@
 import clsx from 'clsx';
-import type { MouseEvent } from 'react';
-import { forwardRef, useCallback, useRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { chevronDown, chevronUp } from '@wordpress/icons';
 import * as Card from '../card';
@@ -20,38 +19,24 @@ import type { HeaderProps } from './types';
  */
 export const Header = forwardRef< HTMLDivElement, HeaderProps >(
 	function CollapsibleCardHeader(
-		{ children, className, onClick, ...restProps },
+		{ children, className, ...restProps },
 		ref
 	) {
-		const triggerRef = useRef< HTMLButtonElement >( null );
-
-		const handleHeaderClick = useCallback(
-			( event: MouseEvent< HTMLDivElement > ) => {
-				const trigger = triggerRef.current;
-				if (
-					trigger &&
-					event.target instanceof Node &&
-					! trigger.contains( event.target )
-				) {
-					trigger.click();
-				}
-
-				onClick?.( event );
-			},
-			[ onClick ]
-		);
-
 		return (
 			<Card.Header
 				ref={ ref }
 				className={ clsx( styles.header, className ) }
-				onClick={ handleHeaderClick }
 				{ ...restProps }
 			>
+				<Collapsible.Trigger
+					className={ styles[ 'header-background-trigger' ] }
+					render={ <div /> }
+					nativeButton={ false }
+					tabIndex={ -1 }
+				/>
 				<div className={ styles[ 'header-content' ] }>{ children }</div>
 				<div className={ styles[ 'header-trigger-wrapper' ] }>
 					<Collapsible.Trigger
-						ref={ triggerRef }
 						render={ ( props ) => (
 							<IconButton
 								{ ...props }
diff --git a/packages/ui/src/collapsible-card/style.module.css b/packages/ui/src/collapsible-card/style.module.css
index cc1f8659afc1d5..9a453f8e661e89 100644
--- a/packages/ui/src/collapsible-card/style.module.css
+++ b/packages/ui/src/collapsible-card/style.module.css
@@ -4,6 +4,9 @@
 	.header-content {
 		flex: 1;
 		min-width: 0;
+		position: relative;
+		z-index: 1;
+		pointer-events: none;
 	}
 
 	.header-trigger-wrapper {
@@ -13,6 +16,8 @@
 		   preserving the same metrics between `Card` and `CollapsibleCard`. */
 		max-height: 0;
 		overflow: visible;
+		position: relative;
+		z-index: 1;
 	}
 
 	.header-trigger {
@@ -21,6 +26,16 @@
 		   the vertical center of the header). */
 		transform: translateY(-50%);
 	}
+
+	.header-background-trigger {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+
+		&:not([data-disabled]) {
+			cursor: var(--wpds-cursor-control);
+		}
+	}
 }
 
 @layer wp-ui-compositions {
@@ -29,9 +44,6 @@
 		flex-direction: row;
 		align-items: stretch;
 		gap: var(--wpds-dimension-gap-sm);
-
-		&:has(.header-trigger:not([data-disabled])) {
-			cursor: var(--wpds-cursor-control);
-		}
+		position: relative;
 	}
 }

From cdcd28d3b2b7937fae9a2634c469adcc16590ea9 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 6 Mar 2026 22:13:49 +0100
Subject: [PATCH 02/12] Tweak unit test

---
 packages/ui/src/collapsible-card/test/index.test.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/collapsible-card/test/index.test.tsx b/packages/ui/src/collapsible-card/test/index.test.tsx
index 6c2004807c4229..119bd6c724b4c7 100644
--- a/packages/ui/src/collapsible-card/test/index.test.tsx
+++ b/packages/ui/src/collapsible-card/test/index.test.tsx
@@ -110,12 +110,16 @@ describe( 'CollapsibleCard', () => {
 			).not.toBeInTheDocument();
 		} );
 
+		// In a real browser, clicking anywhere on the header toggles the
+		// card because `pointer-events: none` on the content layer lets
+		// clicks pass through to the background Collapsible.Trigger. jsdom
+		// doesn't apply CSS, so we target the background trigger directly.
 		it( 'toggles content when clicking the header area', async () => {
 			const user = userEvent.setup();
 
 			render(
 				<CollapsibleCard.Root>
-					<CollapsibleCard.Header>
+					<CollapsibleCard.Header data-testid="header">
 						<Card.Title>Header click test</Card.Title>
 					</CollapsibleCard.Header>
 					<CollapsibleCard.Content>
@@ -128,7 +132,9 @@ describe( 'CollapsibleCard', () => {
 				screen.queryByText( 'Header toggled content' )
 			).not.toBeInTheDocument();
 
-			await user.click( screen.getByText( 'Header click test' ) );
+			const header = screen.getByTestId( 'header' );
+			// eslint-disable-next-line testing-library/no-node-access -- The background trigger has no accessible role; it's a visual-only click target.
+			await user.click( header.firstElementChild! );
 
 			expect(
 				screen.getByText( 'Header toggled content' )

From 882ed4943d71d30746f6ad2fc951b60293469709 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Sun, 8 Mar 2026 12:00:23 +0100
Subject: [PATCH 03/12] Try a different approach, with the whole header as a
 collapsible.trigger component

---
 packages/ui/src/collapsible-card/header.tsx   | 32 ++++++++++++-------
 .../ui/src/collapsible-card/style.module.css  | 19 +++--------
 .../src/collapsible-card/test/index.test.tsx  | 10 ++----
 3 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/packages/ui/src/collapsible-card/header.tsx b/packages/ui/src/collapsible-card/header.tsx
index a5c6fdf4cc26d8..ef0abcff947570 100644
--- a/packages/ui/src/collapsible-card/header.tsx
+++ b/packages/ui/src/collapsible-card/header.tsx
@@ -19,23 +19,31 @@ import type { HeaderProps } from './types';
  */
 export const Header = forwardRef< HTMLDivElement, HeaderProps >(
 	function CollapsibleCardHeader(
-		{ children, className, ...restProps },
+		{ children, className, render, ...restProps },
 		ref
 	) {
 		return (
-			<Card.Header
-				ref={ ref }
+			<Collapsible.Trigger
 				className={ clsx( styles.header, className ) }
-				{ ...restProps }
+				render={
+					<Card.Header
+						ref={ ref }
+						render={ render }
+						{ ...restProps }
+					/>
+				}
+				nativeButton={ false }
+				tabIndex={ -1 }
 			>
-				<Collapsible.Trigger
-					className={ styles[ 'header-background-trigger' ] }
-					render={ <div /> }
-					nativeButton={ false }
-					tabIndex={ -1 }
-				/>
 				<div className={ styles[ 'header-content' ] }>{ children }</div>
-				<div className={ styles[ 'header-trigger-wrapper' ] }>
+				{ /* Stop click/keyboard events from bubbling to the outer
+				    Collapsible.Trigger, which would cause a double-toggle. */ }
+				<div
+					className={ styles[ 'header-trigger-wrapper' ] }
+					onClick={ ( event ) => event.stopPropagation() }
+					onKeyDown={ ( event ) => event.stopPropagation() }
+					role="presentation"
+				>
 					<Collapsible.Trigger
 						render={ ( props ) => (
 							<IconButton
@@ -60,7 +68,7 @@ export const Header = forwardRef< HTMLDivElement, HeaderProps >(
 						className={ styles[ 'header-trigger' ] }
 					/>
 				</div>
-			</Card.Header>
+			</Collapsible.Trigger>
 		);
 	}
 );
diff --git a/packages/ui/src/collapsible-card/style.module.css b/packages/ui/src/collapsible-card/style.module.css
index 9a453f8e661e89..a9adbe005aa79f 100644
--- a/packages/ui/src/collapsible-card/style.module.css
+++ b/packages/ui/src/collapsible-card/style.module.css
@@ -4,9 +4,6 @@
 	.header-content {
 		flex: 1;
 		min-width: 0;
-		position: relative;
-		z-index: 1;
-		pointer-events: none;
 	}
 
 	.header-trigger-wrapper {
@@ -16,8 +13,6 @@
 		   preserving the same metrics between `Card` and `CollapsibleCard`. */
 		max-height: 0;
 		overflow: visible;
-		position: relative;
-		z-index: 1;
 	}
 
 	.header-trigger {
@@ -26,16 +21,6 @@
 		   the vertical center of the header). */
 		transform: translateY(-50%);
 	}
-
-	.header-background-trigger {
-		position: absolute;
-		inset: 0;
-		z-index: 0;
-
-		&:not([data-disabled]) {
-			cursor: var(--wpds-cursor-control);
-		}
-	}
 }
 
 @layer wp-ui-compositions {
@@ -45,5 +30,9 @@
 		align-items: stretch;
 		gap: var(--wpds-dimension-gap-sm);
 		position: relative;
+
+		&:not([data-disabled]) {
+			cursor: var(--wpds-cursor-control);
+		}
 	}
 }
diff --git a/packages/ui/src/collapsible-card/test/index.test.tsx b/packages/ui/src/collapsible-card/test/index.test.tsx
index 119bd6c724b4c7..6c2004807c4229 100644
--- a/packages/ui/src/collapsible-card/test/index.test.tsx
+++ b/packages/ui/src/collapsible-card/test/index.test.tsx
@@ -110,16 +110,12 @@ describe( 'CollapsibleCard', () => {
 			).not.toBeInTheDocument();
 		} );
 
-		// In a real browser, clicking anywhere on the header toggles the
-		// card because `pointer-events: none` on the content layer lets
-		// clicks pass through to the background Collapsible.Trigger. jsdom
-		// doesn't apply CSS, so we target the background trigger directly.
 		it( 'toggles content when clicking the header area', async () => {
 			const user = userEvent.setup();
 
 			render(
 				<CollapsibleCard.Root>
-					<CollapsibleCard.Header data-testid="header">
+					<CollapsibleCard.Header>
 						<Card.Title>Header click test</Card.Title>
 					</CollapsibleCard.Header>
 					<CollapsibleCard.Content>
@@ -132,9 +128,7 @@ describe( 'CollapsibleCard', () => {
 				screen.queryByText( 'Header toggled content' )
 			).not.toBeInTheDocument();
 
-			const header = screen.getByTestId( 'header' );
-			// eslint-disable-next-line testing-library/no-node-access -- The background trigger has no accessible role; it's a visual-only click target.
-			await user.click( header.firstElementChild! );
+			await user.click( screen.getByText( 'Header click test' ) );
 
 			expect(
 				screen.getByText( 'Header toggled content' )

From 74b55fa23c66ae663a3d36d172b0f186f8d247ed Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Sun, 8 Mar 2026 12:16:07 +0100
Subject: [PATCH 04/12] stop propagation directly on the trigger itself,
 instead of the wrapper

---
 packages/ui/src/collapsible-card/header.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/collapsible-card/header.tsx b/packages/ui/src/collapsible-card/header.tsx
index ef0abcff947570..c74e95d1ac6ba0 100644
--- a/packages/ui/src/collapsible-card/header.tsx
+++ b/packages/ui/src/collapsible-card/header.tsx
@@ -36,14 +36,10 @@ export const Header = forwardRef< HTMLDivElement, HeaderProps >(
 				tabIndex={ -1 }
 			>
 				<div className={ styles[ 'header-content' ] }>{ children }</div>
-				{ /* Stop click/keyboard events from bubbling to the outer
-				    Collapsible.Trigger, which would cause a double-toggle. */ }
-				<div
-					className={ styles[ 'header-trigger-wrapper' ] }
-					onClick={ ( event ) => event.stopPropagation() }
-					onKeyDown={ ( event ) => event.stopPropagation() }
-					role="presentation"
-				>
+				<div className={ styles[ 'header-trigger-wrapper' ] }>
+					{ /* onClick/onKeyDown stop events from bubbling to the
+					     outer Collapsible.Trigger (the header), which would
+					     cause a double-toggle. */ }
 					<Collapsible.Trigger
 						render={ ( props ) => (
 							<IconButton
@@ -66,6 +62,8 @@ export const Header = forwardRef< HTMLDivElement, HeaderProps >(
 							/>
 						) }
 						className={ styles[ 'header-trigger' ] }
+						onClick={ ( event ) => event.stopPropagation() }
+						onKeyDown={ ( event ) => event.stopPropagation() }
 					/>
 				</div>
 			</Collapsible.Trigger>

From 8fddc0230ea967f99fdd6f44a1dc833a88f462a3 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 13 Mar 2026 16:51:48 +0100
Subject: [PATCH 05/12] Simplify: remove IconButton, replace with icon + fake
 focus-visible styles

---
 packages/ui/src/collapsible-card/header.tsx   | 41 +++++--------------
 .../ui/src/collapsible-card/style.module.css  | 15 ++++++-
 packages/ui/src/utils/css/focus.module.css    |  6 ++-
 3 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/packages/ui/src/collapsible-card/header.tsx b/packages/ui/src/collapsible-card/header.tsx
index c74e95d1ac6ba0..a1dbb0add52878 100644
--- a/packages/ui/src/collapsible-card/header.tsx
+++ b/packages/ui/src/collapsible-card/header.tsx
@@ -1,11 +1,11 @@
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { chevronDown, chevronUp } from '@wordpress/icons';
+import { chevronDown } from '@wordpress/icons';
 import * as Card from '../card';
 import * as Collapsible from '../collapsible';
-import { IconButton } from '../icon-button';
+import { Icon } from '../icon';
 import styles from './style.module.css';
+import focusStyles from '../utils/css/focus.module.css';
 import type { HeaderProps } from './types';
 
 /**
@@ -33,37 +33,18 @@ export const Header = forwardRef< HTMLDivElement, HeaderProps >(
 					/>
 				}
 				nativeButton={ false }
-				tabIndex={ -1 }
 			>
 				<div className={ styles[ 'header-content' ] }>{ children }</div>
 				<div className={ styles[ 'header-trigger-wrapper' ] }>
-					{ /* onClick/onKeyDown stop events from bubbling to the
-					     outer Collapsible.Trigger (the header), which would
-					     cause a double-toggle. */ }
-					<Collapsible.Trigger
-						render={ ( props ) => (
-							<IconButton
-								{ ...props }
-								label={ __( 'Expand or collapse card' ) }
-								// The Collapsible wrapper's `render` prop
-								// uses a single-argument callback (via the
-								// ComponentProps utility), so Base UI's
-								// second `state` argument isn't available
-								// here. We derive the open state from
-								// `aria-expanded` instead of `state.open`.
-								icon={
-									props[ 'aria-expanded' ] === true
-										? chevronUp
-										: chevronDown
-								}
-								variant="minimal"
-								tone="neutral"
-								size="compact"
-							/>
+					<Icon
+						icon={ chevronDown }
+						className={ clsx(
+							styles[ 'header-trigger' ],
+							// While the interactive trigger element is the whole header,
+							// the focus ring will be displayed only on the icon to visually
+							// emulate it being the button.
+							focusStyles[ 'outset-ring--focus-parent-visible' ]
 						) }
-						className={ styles[ 'header-trigger' ] }
-						onClick={ ( event ) => event.stopPropagation() }
-						onKeyDown={ ( event ) => event.stopPropagation() }
 					/>
 				</div>
 			</Collapsible.Trigger>
diff --git a/packages/ui/src/collapsible-card/style.module.css b/packages/ui/src/collapsible-card/style.module.css
index a9adbe005aa79f..07885c0b86c76d 100644
--- a/packages/ui/src/collapsible-card/style.module.css
+++ b/packages/ui/src/collapsible-card/style.module.css
@@ -19,7 +19,19 @@
 		/* Offset by half the button's own height so it visually centers
 		   at the wrapper's midpoint (which `align-self: center` places at
 		   the vertical center of the header). */
-		transform: translateY(-50%);
+		translate: 0 -50%;
+
+		/* For an outline that looks like `IconButton`'s */
+		border-radius: var(--wpds-border-radius-sm);
+	}
+
+	.header[data-panel-open] .header-trigger {
+		rotate: 180deg;
+	}
+
+	/* Simulate disabled button styles */
+	.header[data-disabled] .header-trigger {
+		color: var(--wpds-color-fg-interactive-neutral-disabled);
 	}
 }
 
@@ -30,6 +42,7 @@
 		align-items: stretch;
 		gap: var(--wpds-dimension-gap-sm);
 		position: relative;
+		outline: none;
 
 		&:not([data-disabled]) {
 			cursor: var(--wpds-cursor-control);
diff --git a/packages/ui/src/utils/css/focus.module.css b/packages/ui/src/utils/css/focus.module.css
index 9a48e96826a460..f489eec1d1c597 100644
--- a/packages/ui/src/utils/css/focus.module.css
+++ b/packages/ui/src/utils/css/focus.module.css
@@ -6,7 +6,8 @@
 	.outset-ring--focus-visible,
 	.outset-ring--focus-within,
 	.outset-ring--focus-within-except-active,
-	.outset-ring--focus-within-visible {
+	.outset-ring--focus-within-visible,
+	.outset-ring--focus-parent-visible {
 		@media not ( prefers-reduced-motion ) {
 			transition: outline 0.1s ease-out;
 		}
@@ -24,7 +25,8 @@
 	.outset-ring--focus-visible:focus-visible,
 	.outset-ring--focus-within:focus-within,
 	.outset-ring--focus-within-except-active:focus-within:not(:has(:active)),
-	.outset-ring--focus-within-visible:focus-within:has(:focus-visible) {
+	.outset-ring--focus-within-visible:focus-within:has(:focus-visible),
+	*:has(.outset-ring--focus-parent-visible):focus-visible .outset-ring--focus-parent-visible {
 		outline-width: var(--wpds-border-width-focus);
 		outline-color: var(--wpds-color-stroke-focus-brand);
 	}

From 160e9a3501c8c0030f418cfae5900f63f124cb11 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 13 Mar 2026 17:19:22 +0100
Subject: [PATCH 06/12] Update tests

---
 .../src/collapsible-card/test/index.test.tsx  | 23 ++++++-------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/ui/src/collapsible-card/test/index.test.tsx b/packages/ui/src/collapsible-card/test/index.test.tsx
index 6c2004807c4229..ad9bbad85bf4d2 100644
--- a/packages/ui/src/collapsible-card/test/index.test.tsx
+++ b/packages/ui/src/collapsible-card/test/index.test.tsx
@@ -92,17 +92,13 @@ describe( 'CollapsibleCard', () => {
 			).not.toBeInTheDocument();
 
 			await user.click(
-				screen.getByRole( 'button', {
-					name: 'Expand or collapse card',
-				} )
+				screen.getByRole( 'button', { name: 'Title' } )
 			);
 
 			expect( screen.getByText( 'Toggle content' ) ).toBeVisible();
 
 			await user.click(
-				screen.getByRole( 'button', {
-					name: 'Expand or collapse card',
-				} )
+				screen.getByRole( 'button', { name: 'Title' } )
 			);
 
 			expect(
@@ -151,9 +147,7 @@ describe( 'CollapsibleCard', () => {
 			);
 
 			await user.click(
-				screen.getByRole( 'button', {
-					name: 'Expand or collapse card',
-				} )
+				screen.getByRole( 'button', { name: 'Title' } )
 			);
 
 			expect( onOpenChange.mock.calls[ 0 ][ 0 ] ).toBe( true );
@@ -178,9 +172,7 @@ describe( 'CollapsibleCard', () => {
 			expect( screen.getByText( 'Should stay visible' ) ).toBeVisible();
 
 			await user.click(
-				screen.getByRole( 'button', {
-					name: 'Expand or collapse card',
-				} )
+				screen.getByRole( 'button', { name: 'Title' } )
 			);
 
 			expect( screen.getByText( 'Should stay visible' ) ).toBeVisible();
@@ -188,7 +180,7 @@ describe( 'CollapsibleCard', () => {
 	} );
 
 	describe( 'trigger', () => {
-		it( 'renders a toggle button', () => {
+		it( 'renders the header as a toggle button', () => {
 			render(
 				<CollapsibleCard.Root>
 					<CollapsibleCard.Header>
@@ -198,10 +190,9 @@ describe( 'CollapsibleCard', () => {
 			);
 
 			expect(
-				screen.getByRole( 'button', {
-					name: 'Expand or collapse card',
-				} )
+				screen.getByRole( 'button', { name: 'Title' } )
 			).toBeVisible();
 		} );
 	} );
+
 } );

From e75ef9fd15f979ff28bce7934a8669bce9888f69 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 13 Mar 2026 17:21:00 +0100
Subject: [PATCH 07/12] CHANGELOG

---
 packages/ui/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 1e5bea6e67afa8..7af6d21a72e450 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -19,6 +19,7 @@
 -   `Notice`: Improve narrow layout by letting description and actions span the icon column when a title is present ([#76202](https://github.com/WordPress/gutenberg/pull/76202)).
 -   `Notice`: Use `Text` component for `Title` and `Description` typography ([#75870](https://github.com/WordPress/gutenberg/pull/75870)).
 -   `Card`, `CollapsibleCard`: update padding to match legacy `Card` component ([#76368](https://github.com/WordPress/gutenberg/pull/76368)).
+-   `CollapsibleCard`: move trigger to the header ([#76265](https://github.com/WordPress/gutenberg/pull/76265)).
 
 ## 0.8.0 (2026-03-04)
 

From 041abb08446d15a5ed697b77859077d280b8bc29 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 13 Mar 2026 17:29:14 +0100
Subject: [PATCH 08/12] format

---
 .../ui/src/collapsible-card/test/index.test.tsx | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/collapsible-card/test/index.test.tsx b/packages/ui/src/collapsible-card/test/index.test.tsx
index ad9bbad85bf4d2..adb0110a0c0a1c 100644
--- a/packages/ui/src/collapsible-card/test/index.test.tsx
+++ b/packages/ui/src/collapsible-card/test/index.test.tsx
@@ -91,15 +91,11 @@ describe( 'CollapsibleCard', () => {
 				screen.queryByText( 'Toggle content' )
 			).not.toBeInTheDocument();
 
-			await user.click(
-				screen.getByRole( 'button', { name: 'Title' } )
-			);
+			await user.click( screen.getByRole( 'button', { name: 'Title' } ) );
 
 			expect( screen.getByText( 'Toggle content' ) ).toBeVisible();
 
-			await user.click(
-				screen.getByRole( 'button', { name: 'Title' } )
-			);
+			await user.click( screen.getByRole( 'button', { name: 'Title' } ) );
 
 			expect(
 				screen.queryByText( 'Toggle content' )
@@ -146,9 +142,7 @@ describe( 'CollapsibleCard', () => {
 				</CollapsibleCard.Root>
 			);
 
-			await user.click(
-				screen.getByRole( 'button', { name: 'Title' } )
-			);
+			await user.click( screen.getByRole( 'button', { name: 'Title' } ) );
 
 			expect( onOpenChange.mock.calls[ 0 ][ 0 ] ).toBe( true );
 		} );
@@ -171,9 +165,7 @@ describe( 'CollapsibleCard', () => {
 
 			expect( screen.getByText( 'Should stay visible' ) ).toBeVisible();
 
-			await user.click(
-				screen.getByRole( 'button', { name: 'Title' } )
-			);
+			await user.click( screen.getByRole( 'button', { name: 'Title' } ) );
 
 			expect( screen.getByText( 'Should stay visible' ) ).toBeVisible();
 		} );
@@ -194,5 +186,4 @@ describe( 'CollapsibleCard', () => {
 			).toBeVisible();
 		} );
 	} );
-
 } );

From d6b4cd614c898b78608279448fb6944b479482ed Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 13 Mar 2026 17:39:50 +0100
Subject: [PATCH 09/12] use data attribute for
 .outset-ring--focus-parent-visible

---
 packages/ui/src/collapsible-card/header.tsx | 1 +
 packages/ui/src/utils/css/focus.module.css  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/collapsible-card/header.tsx b/packages/ui/src/collapsible-card/header.tsx
index a1dbb0add52878..3ce6a1ef58cfde 100644
--- a/packages/ui/src/collapsible-card/header.tsx
+++ b/packages/ui/src/collapsible-card/header.tsx
@@ -33,6 +33,7 @@ export const Header = forwardRef< HTMLDivElement, HeaderProps >(
 					/>
 				}
 				nativeButton={ false }
+				data-wp-ui-focus-parent
 			>
 				<div className={ styles[ 'header-content' ] }>{ children }</div>
 				<div className={ styles[ 'header-trigger-wrapper' ] }>
diff --git a/packages/ui/src/utils/css/focus.module.css b/packages/ui/src/utils/css/focus.module.css
index f489eec1d1c597..69e3fb33a4a313 100644
--- a/packages/ui/src/utils/css/focus.module.css
+++ b/packages/ui/src/utils/css/focus.module.css
@@ -26,7 +26,7 @@
 	.outset-ring--focus-within:focus-within,
 	.outset-ring--focus-within-except-active:focus-within:not(:has(:active)),
 	.outset-ring--focus-within-visible:focus-within:has(:focus-visible),
-	*:has(.outset-ring--focus-parent-visible):focus-visible .outset-ring--focus-parent-visible {
+	[data-wp-ui-focus-parent]:focus-visible .outset-ring--focus-parent-visible {
 		outline-width: var(--wpds-border-width-focus);
 		outline-color: var(--wpds-color-stroke-focus-brand);
 	}

From 49e84a61d602563fb7c0f8cfcc0c6e5655bb3a32 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 13 Mar 2026 19:11:08 +0100
Subject: [PATCH 10/12] Remove unneeded position relative

---
 packages/ui/src/collapsible-card/style.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui/src/collapsible-card/style.module.css b/packages/ui/src/collapsible-card/style.module.css
index 07885c0b86c76d..55b0744ebb6532 100644
--- a/packages/ui/src/collapsible-card/style.module.css
+++ b/packages/ui/src/collapsible-card/style.module.css
@@ -41,7 +41,6 @@
 		flex-direction: row;
 		align-items: stretch;
 		gap: var(--wpds-dimension-gap-sm);
-		position: relative;
 		outline: none;
 
 		&:not([data-disabled]) {

From 1a63deafea8e54ba39dfb88085158b0f26b6da9e Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 13 Mar 2026 19:15:15 +0100
Subject: [PATCH 11/12] Update tests: better semantics, no redundancy

---
 .../src/collapsible-card/test/index.test.tsx  | 58 +++++++++----------
 1 file changed, 28 insertions(+), 30 deletions(-)

diff --git a/packages/ui/src/collapsible-card/test/index.test.tsx b/packages/ui/src/collapsible-card/test/index.test.tsx
index adb0110a0c0a1c..445f7e2da5da6e 100644
--- a/packages/ui/src/collapsible-card/test/index.test.tsx
+++ b/packages/ui/src/collapsible-card/test/index.test.tsx
@@ -91,40 +91,25 @@ describe( 'CollapsibleCard', () => {
 				screen.queryByText( 'Toggle content' )
 			).not.toBeInTheDocument();
 
-			await user.click( screen.getByRole( 'button', { name: 'Title' } ) );
+			await user.click(
+				screen.getByRole( 'button', {
+					name: 'Title',
+					expanded: false,
+				} )
+			);
 
 			expect( screen.getByText( 'Toggle content' ) ).toBeVisible();
 
-			await user.click( screen.getByRole( 'button', { name: 'Title' } ) );
-
-			expect(
-				screen.queryByText( 'Toggle content' )
-			).not.toBeInTheDocument();
-		} );
-
-		it( 'toggles content when clicking the header area', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<CollapsibleCard.Root>
-					<CollapsibleCard.Header>
-						<Card.Title>Header click test</Card.Title>
-					</CollapsibleCard.Header>
-					<CollapsibleCard.Content>
-						<p>Header toggled content</p>
-					</CollapsibleCard.Content>
-				</CollapsibleCard.Root>
+			await user.click(
+				screen.getByRole( 'button', {
+					name: 'Title',
+					expanded: true,
+				} )
 			);
 
 			expect(
-				screen.queryByText( 'Header toggled content' )
+				screen.queryByText( 'Toggle content' )
 			).not.toBeInTheDocument();
-
-			await user.click( screen.getByText( 'Header click test' ) );
-
-			expect(
-				screen.getByText( 'Header toggled content' )
-			).toBeVisible();
 		} );
 
 		it( 'calls onOpenChange when toggled', async () => {
@@ -142,7 +127,12 @@ describe( 'CollapsibleCard', () => {
 				</CollapsibleCard.Root>
 			);
 
-			await user.click( screen.getByRole( 'button', { name: 'Title' } ) );
+			await user.click(
+				screen.getByRole( 'button', {
+					name: 'Title',
+					expanded: false,
+				} )
+			);
 
 			expect( onOpenChange.mock.calls[ 0 ][ 0 ] ).toBe( true );
 		} );
@@ -165,7 +155,12 @@ describe( 'CollapsibleCard', () => {
 
 			expect( screen.getByText( 'Should stay visible' ) ).toBeVisible();
 
-			await user.click( screen.getByRole( 'button', { name: 'Title' } ) );
+			await user.click(
+				screen.getByRole( 'button', {
+					name: 'Title',
+					expanded: true,
+				} )
+			);
 
 			expect( screen.getByText( 'Should stay visible' ) ).toBeVisible();
 		} );
@@ -182,7 +177,10 @@ describe( 'CollapsibleCard', () => {
 			);
 
 			expect(
-				screen.getByRole( 'button', { name: 'Title' } )
+				screen.getByRole( 'button', {
+					name: 'Title',
+					expanded: false,
+				} )
 			).toBeVisible();
 		} );
 	} );

From a2ca60bf6c6c78384d8424aa56e3b369d7d2553a Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 13 Mar 2026 19:16:48 +0100
Subject: [PATCH 12/12] simplify focus utility selector

---
 packages/ui/src/collapsible-card/header.tsx | 1 -
 packages/ui/src/utils/css/focus.module.css  | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/ui/src/collapsible-card/header.tsx b/packages/ui/src/collapsible-card/header.tsx
index 3ce6a1ef58cfde..a1dbb0add52878 100644
--- a/packages/ui/src/collapsible-card/header.tsx
+++ b/packages/ui/src/collapsible-card/header.tsx
@@ -33,7 +33,6 @@ export const Header = forwardRef< HTMLDivElement, HeaderProps >(
 					/>
 				}
 				nativeButton={ false }
-				data-wp-ui-focus-parent
 			>
 				<div className={ styles[ 'header-content' ] }>{ children }</div>
 				<div className={ styles[ 'header-trigger-wrapper' ] }>
diff --git a/packages/ui/src/utils/css/focus.module.css b/packages/ui/src/utils/css/focus.module.css
index 69e3fb33a4a313..d11f440305dca8 100644
--- a/packages/ui/src/utils/css/focus.module.css
+++ b/packages/ui/src/utils/css/focus.module.css
@@ -26,7 +26,7 @@
 	.outset-ring--focus-within:focus-within,
 	.outset-ring--focus-within-except-active:focus-within:not(:has(:active)),
 	.outset-ring--focus-within-visible:focus-within:has(:focus-visible),
-	[data-wp-ui-focus-parent]:focus-visible .outset-ring--focus-parent-visible {
+	:focus-visible .outset-ring--focus-parent-visible {
 		outline-width: var(--wpds-border-width-focus);
 		outline-color: var(--wpds-color-stroke-focus-brand);
 	}