feat: add close button to demo callout to exit mid-demo

src/css/common/_demo.scss

@@ -77,6 +77,18 @@
 	}
 }
 
+.wp-core-ui .button.demo-callout__close {
+	position: absolute;
+	inset-block-start: 8px;
+	inset-inline-end: 8px;
+	color: var(--cs-color-text-secondary);
+	text-decoration: none;
+
+	&:hover:not(:disabled) {
+		color: var(--cs-color-text);
+	}
+}
+
 .demo-callout__step {
 	display: block;
 	margin-block-end: 6px;

src/js/components/ManageMenu/AiAgentDemo/AiAgentDemo.tsx

@@ -100,7 +100,7 @@ const AiAgentDemoPage: React.FC = () => {
 			<section className="ai-agent ai-agent-demo" aria-label={__('AI Agent demo', 'code-snippets')}>
 				<div className="screen-reader-text" aria-live="polite">{STAGE_ANNOUNCEMENTS[stage]}</div>
 
-				<DemoCallout callout={getCallout(stage)} />
+				<DemoCallout callout={getCallout(stage)} onClose={skip} />
 
 				<DemoSpotlight {...STAGE_SPOTLIGHTS[stage]} />
 

src/js/components/ManageMenu/BlueprintsDemo/BlueprintsDemo.tsx

@@ -102,7 +102,7 @@ const BlueprintsDemoPage: React.FC = () => {
 			<div className="blueprints-demo">
 				<div className="screen-reader-text" aria-live="polite">{STAGE_ANNOUNCEMENTS[stage]}</div>
 
-				<DemoCallout callout={getCallout(stage)} />
+				<DemoCallout callout={getCallout(stage)} onClose={skip} />
 
 				<DemoSpotlight {...STAGE_SPOTLIGHTS[stage]} />
 

src/js/components/ManageMenu/CloudLibraryDemo/CloudLibraryDemo.tsx

@@ -76,7 +76,7 @@ export const CloudLibraryDemo: React.FC = () => {
 			<div className="cloud-library-demo">
 				<div className="screen-reader-text" aria-live="polite">{STAGE_ANNOUNCEMENTS[stage]}</div>
 
-				<DemoCallout callout={getCallout(stage)} />
+				<DemoCallout callout={getCallout(stage)} onClose={skip} />
 
 				<DemoSpotlight {...STAGE_SPOTLIGHTS[stage]} />
 

src/js/components/common/demo/DemoCallout.tsx

@@ -1,4 +1,6 @@
 import React from 'react'
+import { __ } from '@wordpress/i18n'
+import { Button } from '../Button'
 
 export interface CalloutContent {
 	step: string
@@ -10,17 +12,24 @@ export interface CalloutContent {
  * Commentary on what a walkthrough is doing at the current stage, floating in
  * the corner of the viewport so it stays out of the page's flow.
  *
- * The demo pages announce each stage through their own live region, so this is
- * hidden from assistive technology rather than repeating it.
+ * The demo pages announce each stage through their own live region, so the
+ * commentary is hidden from assistive technology rather than repeating it. The
+ * close button stays exposed, since it is the walkthrough's exit.
  */
-export const DemoCallout: React.FC<{ callout?: CalloutContent }> = ({ callout }) =>
+export const DemoCallout: React.FC<{ callout?: CalloutContent, onClose: VoidFunction }> = ({ callout, onClose }) =>
 	callout
 		// Keyed on the content rather than the stage: consecutive stages can
 		// share a callout, and remounting between them replays the entrance
 		// animation as a flicker.
-		? <aside key={callout.title} className="demo-callout" aria-hidden="true">
-			<span className="demo-callout__step">{callout.step}</span>
-			<h3 className="demo-callout__title">{callout.title}</h3>
-			<p className="demo-callout__body">{callout.body}</p>
+		? <aside key={callout.title} className="demo-callout">
+			<Button small link className="demo-callout__close" onClick={onClose} aria-label={__('Exit demo', 'code-snippets')}>
+				<span className="dashicons dashicons-no-alt" aria-hidden="true"></span>
+			</Button>
+
+			<div aria-hidden="true">
+				<span className="demo-callout__step">{callout.step}</span>
+				<h3 className="demo-callout__title">{callout.title}</h3>
+				<p className="demo-callout__body">{callout.body}</p>
+			</div>
 		</aside>
 		: null

tests/e2e/blueprints-demo.spec.ts

@@ -63,6 +63,17 @@ test.describe('Blueprints demo', () => {
 		await expect(generated.locator('.badge.php-badge')).toBeVisible()
 	})
 
+	test('the callout close button exits the walkthrough mid-demo', async ({ page }) => {
+		await page.setViewportSize({ width: 1600, height: 900 })
+		await page.goto(URLS.BLUEPRINTS_ADMIN)
+		await page.locator('.demo-play').click()
+
+		await page.getByRole('button', { name: 'Exit demo' }).click()
+
+		await expect(page.locator('.demo-upsell')).toBeVisible()
+		await expect(page.locator('.demo-callout')).toHaveCount(0)
+	})
+
 	test('sections become browsable once the walkthrough finishes', async ({ page }) => {
 		await page.goto(URLS.BLUEPRINTS_ADMIN)