From 202bfef0f7d4ee6e8db58b25ed139ed4654fc75d Mon Sep 17 00:00:00 2001
From: Karen Attfield <karenlattfield@gmail.com>
Date: Thu, 23 Jul 2026 14:01:14 +0100
Subject: [PATCH 1/5] Ensure step survey uses modern components and is
 accessible

---
 .../update-connection-js-package-ui-pt6       |   4 +
 .../disconnect-dialog/steps/step-survey.tsx   |   9 +-
 .../components/disconnect-dialog/style.scss   |  10 +-
 .../_jp-connect_disconnect-survey-card.scss   |  56 +++++---
 .../components/disconnect-survey/index.tsx    | 125 +++++++++---------
 .../disconnect-survey/survey-choice.tsx       |  43 +++---
 .../components/disconnect-survey/types.ts     |  24 ++--
 7 files changed, 156 insertions(+), 115 deletions(-)
 create mode 100644 projects/js-packages/connection/changelog/update-connection-js-package-ui-pt6

diff --git a/projects/js-packages/connection/changelog/update-connection-js-package-ui-pt6 b/projects/js-packages/connection/changelog/update-connection-js-package-ui-pt6
new file mode 100644
index 000000000000..5717f0d8131e
--- /dev/null
+++ b/projects/js-packages/connection/changelog/update-connection-js-package-ui-pt6
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Connection UI: Make the disconnect survey a real radio group so its options are announced and keyboard-operable as a single-choice control, and drop the decorative arrow the options no longer need.
diff --git a/projects/js-packages/connection/components/disconnect-dialog/steps/step-survey.tsx b/projects/js-packages/connection/components/disconnect-dialog/steps/step-survey.tsx
index ccbc3305a55d..817c035476d0 100644
--- a/projects/js-packages/connection/components/disconnect-dialog/steps/step-survey.tsx
+++ b/projects/js-packages/connection/components/disconnect-dialog/steps/step-survey.tsx
@@ -1,4 +1,5 @@
 import { __ } from '@wordpress/i18n';
+import { Text } from '@wordpress/ui';
 import '../../disconnect-survey/_jp-connect_disconnect-survey-card.scss';
 import DisconnectSurvey from '../../disconnect-survey';
 import type { MouseEvent } from 'react';
@@ -7,7 +8,7 @@ interface StepSurveyProps {
 	/** Callback function used to close the modal and leave the disconnect flow. */
 	onExit?: ( e?: MouseEvent< HTMLElement > ) => void;
 	/** Callback function to handle submission of survey response. */
-	onFeedBackProvided?: ( answerId: string | undefined, answerText: string ) => void;
+	onFeedBackProvided?: ( answerId: string, answerText: string ) => void;
 	/** If the survey feedback is currently being saved/submitted. */
 	isSubmittingFeedback?: boolean;
 }
@@ -22,9 +23,9 @@ const StepSurvey = ( { onExit, onFeedBackProvided, isSubmittingFeedback }: StepS
 	return (
 		<div className="jp-connection__disconnect-dialog__content">
 			<h1>{ __( 'Before you go, help us improve Jetpack', 'jetpack-connection-js' ) }</h1>
-			<p className="jp-connection__disconnect-dialog__large-text">
-				{ __( 'Let us know what didn‘t work for you', 'jetpack-connection-js' ) }
-			</p>
+			<Text className="jp-connection__disconnect-dialog__large-text">
+				{ __( "Let us know what didn't work for you", 'jetpack-connection-js' ) }
+			</Text>
 			<DisconnectSurvey
 				onSubmit={ onFeedBackProvided }
 				isSubmittingFeedback={ isSubmittingFeedback }
diff --git a/projects/js-packages/connection/components/disconnect-dialog/style.scss b/projects/js-packages/connection/components/disconnect-dialog/style.scss
index e33e3acd66af..d24cd4169e2f 100644
--- a/projects/js-packages/connection/components/disconnect-dialog/style.scss
+++ b/projects/js-packages/connection/components/disconnect-dialog/style.scss
@@ -131,9 +131,17 @@
 		color: var(--jp-red);
 	}
 
+	// The survey options form a radio group, so they are wrapped in a
+	// `<fieldset>` with a (visually hidden) `<legend>` naming the group. These
+	// rules strip the UA fieldset chrome, leaving the previous layout intact.
 	&__survey {
-		margin-bottom: 1.5rem;
+		margin: 0 0 1.5rem;
 		max-width: 100%;
+		border: 0;
+		padding: 0;
+		// A fieldset's default `min-width: min-content` would otherwise keep it
+		// from shrinking below its widest option on narrow screens.
+		min-width: 0;
 	}
 
 	// The thank-you step wraps its copy in a @wordpress/ui Stack, so let the
diff --git a/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss b/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss
index c33041a8bcf4..17e233e66963 100644
--- a/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss
+++ b/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss
@@ -11,42 +11,55 @@
 	padding: 1rem;
 	position: relative;
 	box-shadow: 0 0 15px var(--jp-gray-off);
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
 
 	&--selected {
 		border-color: var(--jp-black);
 		background: var(--jp-gray-off);
 	}
 
-	&::after {
-		content: "";
-		display: block;
-		width: 5px;
-		height: 5px;
-		position: absolute;
-		top: 50%;
-		right: 1.5rem;
-		border-top: 2px solid var(--jp-black);
-		border-right: 2px solid var(--jp-black);
-		transform: translateY(-50%) rotate(45deg);
-	}
-
 	&:hover {
 		cursor: pointer;
 	}
 
+	// `:focus-within` rather than `:focus`: the focusable element is now the
+	// radio inside the card, not the card itself.
 	&:hover,
-	&:focus {
+	&:focus-within {
 
-		&:not(.jp-disconnect-survey-card--selected) {
+		&:not(.jp-connect__disconnect-survey-card--selected) {
 			border-color: var(--jp-black-80);
 		}
 	}
 
+	&__radio {
+		// Sits above the label's stretched hit area so the radio itself stays
+		// directly clickable, and so its focus ring is not painted over.
+		position: relative;
+		z-index: 1;
+		flex-shrink: 0;
+		margin: 0;
+	}
+
 	&__answer {
+		// Set explicitly rather than inherited: as a `<p>` the answer used to
+		// pick this up from the dialog's `p` rule, but a `<label>` never matches
+		// that selector and would otherwise fall back to @wordpress/ui's
+		// smaller default body size.
+		font-size: var(--font-body);
 		font-weight: 700;
 		margin: 0;
-		display: flex;
-		align-items: center;
+
+		// Stretch the label over the whole card, so clicking anywhere in the
+		// card selects the option — as it did when the card was one big
+		// `role="button"`.
+		&::before {
+			content: "";
+			position: absolute;
+			inset: 0;
+		}
 	}
 }
 
@@ -55,9 +68,14 @@ input.jp-connect__disconnect-survey-card__input {
 	border: none;
 	background-color: transparent;
 	color: var(--jp-black-80);
+	font-size: var(--font-body);
 	flex-grow: 1;
-	padding-right: 40px;
-	max-width: calc(100% - 40px);
+	min-width: 0;
+
+	// Keep the free text field above the label's stretched hit area, so that
+	// clicking it focuses the field rather than the "Other" radio.
+	position: relative;
+	z-index: 1;
 }
 
 .jp-connection__disconnect-dialog__content .jp-connection__disconnect-dialog__btn-back-to-wp {
diff --git a/projects/js-packages/connection/components/disconnect-survey/index.tsx b/projects/js-packages/connection/components/disconnect-survey/index.tsx
index 5c3c16c65614..ccdf18eb3df0 100644
--- a/projects/js-packages/connection/components/disconnect-survey/index.tsx
+++ b/projects/js-packages/connection/components/disconnect-survey/index.tsx
@@ -1,12 +1,12 @@
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/ui';
-import { Fragment, useCallback, useState } from 'react';
+import { Button, VisuallyHidden } from '@wordpress/ui';
+import { Fragment, useCallback, useId, useState } from 'react';
 import SurveyChoice from './survey-choice';
-import type { ChangeEvent, KeyboardEvent } from 'react';
+import type { ChangeEvent } from 'react';
 
 interface DisconnectSurveyProps {
 	/** Callback handler function for when the survey response is submitted. */
-	onSubmit: ( answerId: string | undefined, answerText: string ) => void;
+	onSubmit?: ( answerId: string, answerText: string ) => void;
 	/** If the survey feedback is currently being saved/ submitted. */
 	isSubmittingFeedback?: boolean;
 }
@@ -19,8 +19,12 @@ interface DisconnectSurveyProps {
  */
 const DisconnectSurvey = ( props: DisconnectSurveyProps ) => {
 	const { onSubmit, isSubmittingFeedback } = props;
+	// The `name` shared by every radio in the survey, which is what groups them
+	// into one radio group. Generated per instance rather than hard-coded, so
+	// that two surveys on a page stay separate groups with unique input IDs.
+	const surveyGroupName = `jp-connect__disconnect-survey${ useId() }`;
 	const [ selectedAnswer, setSelectedAnswer ] = useState< string >();
-	const [ customResponse, setCustomResponse ] = useState< string >();
+	const [ customResponse, setCustomResponse ] = useState( '' );
 
 	const options = [
 		{
@@ -57,56 +61,40 @@ const DisconnectSurvey = ( props: DisconnectSurveyProps ) => {
 	 * Will send the survey response to the collection endpoint.
 	 */
 	const handleSurveySubmit = useCallback( () => {
+		// The submit button is disabled until an answer is picked, so this is
+		// only a guard — but it also narrows `selectedAnswer` to a string, which
+		// is what every consumer of `onSubmit` already declares it takes.
+		if ( ! selectedAnswer ) {
+			return;
+		}
+
 		const answerText = selectedAnswer === customOption.id ? customResponse : '';
-		onSubmit( selectedAnswer, answerText );
+		onSubmit?.( selectedAnswer, answerText );
 	}, [ onSubmit, customOption.id, customResponse, selectedAnswer ] );
 
 	/**
-	 * Handle input into the custom response field.
-	 *
-	 * @param {ChangeEvent<HTMLInputElement>} e - onChange event for the custom input
-	 */
-	const handleCustomResponse = useCallback(
-		( e: ChangeEvent< HTMLInputElement > ) => {
-			const value = e.target.value;
-			e.stopPropagation();
-			setCustomResponse( value );
-		},
-		[ setCustomResponse ]
-	);
-
-	/**
-	 * Checks to see if an option is the currently selected option, returns a css class name if it matches.
+	 * Select the "Other" option.
 	 *
-	 * @param {string} optionId - ID of the option to check for.
-	 * @return {string} - The "selected" class if this option is currently selected.
+	 * The free text field sits above the label's hit area, so a click on it no
+	 * longer reaches the option the way it did when the whole card was one
+	 * `role="button"`. Interacting with the field is an unambiguous choice of
+	 * "Other", so it selects the option itself.
 	 */
-	const selectedClass = ( optionId: string ) => {
-		if ( optionId === selectedAnswer ) {
-			return 'jp-connect__disconnect-survey-card--selected';
-		}
-
-		return '';
-	};
+	const selectCustomOption = useCallback( () => {
+		setSelectedAnswer( customOption.id );
+	}, [ customOption.id, setSelectedAnswer ] );
 
 	/**
-	 * Event handler for keyboard events on the answer blocks.
+	 * Handle input into the custom response field.
 	 *
-	 * @param {string}                        answerId - The slug of the answer that has been selected.
-	 * @param {KeyboardEvent<HTMLDivElement>} e        - Keydown event.
+	 * @param {ChangeEvent<HTMLInputElement>} e - onChange event for the custom input
 	 */
-	const handleAnswerKeyDown = useCallback(
-		( answerId: string, e: KeyboardEvent< HTMLDivElement > ) => {
-			switch ( e.key ) {
-				case 'Enter':
-				case 'Space':
-				case 'Spacebar':
-				case ' ':
-					setSelectedAnswer( answerId );
-					break;
-			}
+	const handleCustomResponse = useCallback(
+		( e: ChangeEvent< HTMLInputElement > ) => {
+			setCustomResponse( e.target.value );
+			selectCustomOption();
 		},
-		[ setSelectedAnswer ]
+		[ selectCustomOption, setCustomResponse ]
 	);
 
 	/**
@@ -120,12 +108,11 @@ const DisconnectSurvey = ( props: DisconnectSurveyProps ) => {
 				<SurveyChoice
 					key={ option.id }
 					id={ option.id }
-					onClick={ setSelectedAnswer }
-					onKeyDown={ handleAnswerKeyDown }
-					className={ 'card jp-connect__disconnect-survey-card ' + selectedClass( option.id ) }
-				>
-					<p className="jp-connect__disconnect-survey-card__answer">{ option.answerText }</p>
-				</SurveyChoice>
+					name={ surveyGroupName }
+					label={ option.answerText }
+					checked={ selectedAnswer === option.id }
+					onSelect={ setSelectedAnswer }
+				/>
 			);
 		} );
 	};
@@ -141,31 +128,37 @@ const DisconnectSurvey = ( props: DisconnectSurveyProps ) => {
 			<SurveyChoice
 				id={ customOption.id }
 				key={ customOption.id }
-				onClick={ setSelectedAnswer }
-				onKeyDown={ handleAnswerKeyDown }
-				className={ 'card jp-connect__disconnect-survey-card ' + selectedClass( customOption.id ) }
+				name={ surveyGroupName }
+				label={ __( 'Other:', 'jetpack-connection-js' ) }
+				checked={ selectedAnswer === customOption.id }
+				onSelect={ setSelectedAnswer }
 			>
-				<p className="jp-connect__disconnect-survey-card__answer">
-					{ __( 'Other:', 'jetpack-connection-js' ) }{ ' ' }
-					<input
-						placeholder={ __( 'share your experience', 'jetpack-connection-js' ) }
-						className="jp-connect__disconnect-survey-card__input"
-						type="text"
-						value={ customResponse }
-						onChange={ handleCustomResponse }
-						maxLength={ 1000 } // Limit response length.
-					/>
-				</p>
+				<input
+					placeholder={ __( 'Share your experience', 'jetpack-connection-js' ) }
+					// Names the option as well as the field: the two are adjacent
+					// visually, but nothing otherwise ties this input to the
+					// "Other" radio for anyone reading it out of context.
+					aria-label={ __( 'Other: share your experience', 'jetpack-connection-js' ) }
+					className="jp-connect__disconnect-survey-card__input"
+					type="text"
+					value={ customResponse }
+					onChange={ handleCustomResponse }
+					onClick={ selectCustomOption }
+					maxLength={ 1000 } // Limit response length.
+				/>
 			</SurveyChoice>
 		);
 	};
 
 	return (
 		<Fragment>
-			<div className="jp-connection__disconnect-dialog__survey">
+			<fieldset className="jp-connection__disconnect-dialog__survey">
+				<VisuallyHidden render={ <legend /> }>
+					{ __( 'Why are you disconnecting?', 'jetpack-connection-js' ) }
+				</VisuallyHidden>
 				{ renderOptions() }
 				{ renderCustomOption() }
-			</div>
+			</fieldset>
 			<p>
 				<Button
 					disabled={ ! selectedAnswer || isSubmittingFeedback }
diff --git a/projects/js-packages/connection/components/disconnect-survey/survey-choice.tsx b/projects/js-packages/connection/components/disconnect-survey/survey-choice.tsx
index 3fff16e3cbd5..6136c71b303d 100644
--- a/projects/js-packages/connection/components/disconnect-survey/survey-choice.tsx
+++ b/projects/js-packages/connection/components/disconnect-survey/survey-choice.tsx
@@ -1,34 +1,45 @@
+import clsx from 'clsx';
 import { useCallback } from 'react';
 import type { SurveyChoiceProps } from './types';
-import type { KeyboardEvent } from 'react';
 import './_jp-connect_disconnect-survey-card.scss';
 
 /**
  * SurveyChoice - Present one choice in the survey.
  *
+ * Renders a native radio so the browser supplies the radio-group semantics and
+ * keyboard behaviour (arrow keys to move between options, one tab stop for the
+ * whole group) rather than re-implementing them.
+ *
  * @param {SurveyChoiceProps} props - The properties.
  * @return {import('react').ReactNode} The SurveyChoice component.
  */
-function SurveyChoice( { id, onClick, onKeyDown, children, className }: SurveyChoiceProps ) {
-	const handleClick = useCallback( () => {
-		onClick( id );
-	}, [ id, onClick ] );
+function SurveyChoice( { id, name, label, checked, onSelect, children }: SurveyChoiceProps ) {
+	const handleChange = useCallback( () => {
+		onSelect( id );
+	}, [ id, onSelect ] );
 
-	const handleKeyDown = useCallback(
-		( e: KeyboardEvent< HTMLDivElement > ) => {
-			onKeyDown( id, e );
-		},
-		[ id, onKeyDown ]
-	);
+	const inputId = `${ name }--${ id }`;
 
 	return (
 		<div
-			tabIndex={ 0 }
-			role="button"
-			onClick={ handleClick }
-			onKeyDown={ handleKeyDown }
-			className={ 'card jp-connect__disconnect-survey-card ' + className }
+			className={ clsx( 'card', 'jp-connect__disconnect-survey-card', {
+				'jp-connect__disconnect-survey-card--selected': checked,
+			} ) }
 		>
+			<input
+				className="jp-connect__disconnect-survey-card__radio"
+				type="radio"
+				id={ inputId }
+				name={ name }
+				value={ id }
+				checked={ checked }
+				onChange={ handleChange }
+			/>
+			{ /* The label stretches over the whole card (see the stylesheet), so
+			     clicking anywhere in the card still selects the option. */ }
+			<label className="jp-connect__disconnect-survey-card__answer" htmlFor={ inputId }>
+				{ label }
+			</label>
 			{ children }
 		</div>
 	);
diff --git a/projects/js-packages/connection/components/disconnect-survey/types.ts b/projects/js-packages/connection/components/disconnect-survey/types.ts
index 476c1b7caa4b..e74ea02de467 100644
--- a/projects/js-packages/connection/components/disconnect-survey/types.ts
+++ b/projects/js-packages/connection/components/disconnect-survey/types.ts
@@ -1,14 +1,20 @@
-import type { KeyboardEvent, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 export interface SurveyChoiceProps {
-	/** The ID/slug string of the survey option. */
+	/** The ID/slug string of the survey option. Used as the radio's value. */
 	id: string;
-	/** Event handler for clicking on the survey option. */
-	onClick: ( id: string ) => void;
-	/** Event handler for pressing a key on the survey option. */
-	onKeyDown: ( id: string, e: KeyboardEvent< HTMLDivElement > ) => void;
-	/** Any passed elements as children to this component. */
+	/** The `name` shared by every radio in the survey, which forms the radio group. */
+	name: string;
+	/** The visible label for this option. */
+	label: ReactNode;
+	/** Whether this option is the currently selected one. */
+	checked: boolean;
+	/** Called with the option's ID when this option is selected. */
+	onSelect: ( id: string ) => void;
+	/**
+	 * Extra content rendered inside the card, beside the label — e.g. the free
+	 * text field on the "Other" option. Kept outside the `<label>` so that
+	 * interactive content is never nested in it.
+	 */
 	children?: ReactNode;
-	/** A class name to apply to the survey choice. */
-	className: string;
 }

From 8a991891401975ec60aff7624b74cffc885707ff Mon Sep 17 00:00:00 2001
From: Karen Attfield <karenlattfield@gmail.com>
Date: Thu, 23 Jul 2026 17:09:48 +0100
Subject: [PATCH 2/5] Switch to Card component usage

---
 .../update-connection-js-package-ui-pt6       |  2 +-
 .../components/disconnect-dialog/style.scss   | 12 +++---
 .../_jp-connect_disconnect-survey-card.scss   | 23 +++-------
 .../disconnect-survey/survey-choice.tsx       | 42 ++++++++++---------
 4 files changed, 35 insertions(+), 44 deletions(-)

diff --git a/projects/js-packages/connection/changelog/update-connection-js-package-ui-pt6 b/projects/js-packages/connection/changelog/update-connection-js-package-ui-pt6
index 5717f0d8131e..c1eb439f0f8d 100644
--- a/projects/js-packages/connection/changelog/update-connection-js-package-ui-pt6
+++ b/projects/js-packages/connection/changelog/update-connection-js-package-ui-pt6
@@ -1,4 +1,4 @@
 Significance: patch
 Type: changed
 
-Connection UI: Make the disconnect survey a real radio group so its options are announced and keyboard-operable as a single-choice control, and drop the decorative arrow the options no longer need.
+Connection UI: Make the disconnect survey a real radio group so its options are announced and keyboard-operable as a single-choice control, drop the decorative arrow the options no longer need, and build the option cards on the shared Card component.
diff --git a/projects/js-packages/connection/components/disconnect-dialog/style.scss b/projects/js-packages/connection/components/disconnect-dialog/style.scss
index d24cd4169e2f..d444bf40f5ec 100644
--- a/projects/js-packages/connection/components/disconnect-dialog/style.scss
+++ b/projects/js-packages/connection/components/disconnect-dialog/style.scss
@@ -24,6 +24,8 @@
 	&__large-text,
 	p.jp-connection__disconnect-dialog__large-text {
 		font-size: 1.25rem;
+		display: block;
+		margin-block: 0 1em;
 	}
 
 	&__link,
@@ -131,16 +133,14 @@
 		color: var(--jp-red);
 	}
 
-	// The survey options form a radio group, so they are wrapped in a
-	// `<fieldset>` with a (visually hidden) `<legend>` naming the group. These
-	// rules strip the UA fieldset chrome, leaving the previous layout intact.
 	&__survey {
-		margin: 0 0 1.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 1.25rem;
+		margin: 1.25rem 0 1.5rem;
 		max-width: 100%;
 		border: 0;
 		padding: 0;
-		// A fieldset's default `min-width: min-content` would otherwise keep it
-		// from shrinking below its widest option on narrow screens.
 		min-width: 0;
 	}
 
diff --git a/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss b/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss
index 17e233e66963..edba0cd9f99c 100644
--- a/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss
+++ b/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss
@@ -1,19 +1,18 @@
 @use "@automattic/jetpack-base-styles/style";
 
+// Layout, selected state and elevation on top of @wordpress/ui's Card, which
+// supplies the surface itself.
 .jp-connect__disconnect-survey-card {
+	--wp-ui-card-padding: 1rem;
+
 	border: 2px solid transparent;
 	width: 800px;
 	max-width: 100%;
 	margin-left: auto;
 	margin-right: auto;
-	border-radius: 4px;
 	text-align: left;
-	padding: 1rem;
 	position: relative;
 	box-shadow: 0 0 15px var(--jp-gray-off);
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
 
 	&--selected {
 		border-color: var(--jp-black);
@@ -24,8 +23,6 @@
 		cursor: pointer;
 	}
 
-	// `:focus-within` rather than `:focus`: the focusable element is now the
-	// radio inside the card, not the card itself.
 	&:hover,
 	&:focus-within {
 
@@ -35,8 +32,6 @@
 	}
 
 	&__radio {
-		// Sits above the label's stretched hit area so the radio itself stays
-		// directly clickable, and so its focus ring is not painted over.
 		position: relative;
 		z-index: 1;
 		flex-shrink: 0;
@@ -44,17 +39,11 @@
 	}
 
 	&__answer {
-		// Set explicitly rather than inherited: as a `<p>` the answer used to
-		// pick this up from the dialog's `p` rule, but a `<label>` never matches
-		// that selector and would otherwise fall back to @wordpress/ui's
-		// smaller default body size.
 		font-size: var(--font-body);
+		line-height: 1.5;
 		font-weight: 700;
 		margin: 0;
 
-		// Stretch the label over the whole card, so clicking anywhere in the
-		// card selects the option — as it did when the card was one big
-		// `role="button"`.
 		&::before {
 			content: "";
 			position: absolute;
@@ -72,8 +61,6 @@ input.jp-connect__disconnect-survey-card__input {
 	flex-grow: 1;
 	min-width: 0;
 
-	// Keep the free text field above the label's stretched hit area, so that
-	// clicking it focuses the field rather than the "Other" radio.
 	position: relative;
 	z-index: 1;
 }
diff --git a/projects/js-packages/connection/components/disconnect-survey/survey-choice.tsx b/projects/js-packages/connection/components/disconnect-survey/survey-choice.tsx
index 6136c71b303d..2dcc157577dc 100644
--- a/projects/js-packages/connection/components/disconnect-survey/survey-choice.tsx
+++ b/projects/js-packages/connection/components/disconnect-survey/survey-choice.tsx
@@ -1,3 +1,4 @@
+import { Card, Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useCallback } from 'react';
 import type { SurveyChoiceProps } from './types';
@@ -8,7 +9,8 @@ import './_jp-connect_disconnect-survey-card.scss';
  *
  * Renders a native radio so the browser supplies the radio-group semantics and
  * keyboard behaviour (arrow keys to move between options, one tab stop for the
- * whole group) rather than re-implementing them.
+ * whole group) rather than re-implementing them. The Card is presentational
+ * only — the radio inside it is what carries the semantics.
  *
  * @param {SurveyChoiceProps} props - The properties.
  * @return {import('react').ReactNode} The SurveyChoice component.
@@ -21,27 +23,29 @@ function SurveyChoice( { id, name, label, checked, onSelect, children }: SurveyC
 	const inputId = `${ name }--${ id }`;
 
 	return (
-		<div
-			className={ clsx( 'card', 'jp-connect__disconnect-survey-card', {
+		<Card.Root
+			className={ clsx( 'jp-connect__disconnect-survey-card', {
 				'jp-connect__disconnect-survey-card--selected': checked,
 			} ) }
 		>
-			<input
-				className="jp-connect__disconnect-survey-card__radio"
-				type="radio"
-				id={ inputId }
-				name={ name }
-				value={ id }
-				checked={ checked }
-				onChange={ handleChange }
-			/>
-			{ /* The label stretches over the whole card (see the stylesheet), so
-			     clicking anywhere in the card still selects the option. */ }
-			<label className="jp-connect__disconnect-survey-card__answer" htmlFor={ inputId }>
-				{ label }
-			</label>
-			{ children }
-		</div>
+			<Card.Content>
+				<Stack direction="row" align="center" gap="sm">
+					<input
+						className="jp-connect__disconnect-survey-card__radio"
+						type="radio"
+						id={ inputId }
+						name={ name }
+						value={ id }
+						checked={ checked }
+						onChange={ handleChange }
+					/>
+					<label className="jp-connect__disconnect-survey-card__answer" htmlFor={ inputId }>
+						{ label }
+					</label>
+					{ children }
+				</Stack>
+			</Card.Content>
+		</Card.Root>
 	);
 }
 

From 98c47acaedee96891817dd862f36d2a16c69e827 Mon Sep 17 00:00:00 2001
From: Karen Attfield <karenlattfield@gmail.com>
Date: Thu, 23 Jul 2026 19:06:28 +0100
Subject: [PATCH 3/5] Add new test files and tests related to the survey

---
 .../disconnect-dialog/test/step-survey.tsx    |  49 +++++++
 .../disconnect-survey/test/index.tsx          | 137 ++++++++++++++++++
 2 files changed, 186 insertions(+)
 create mode 100644 projects/js-packages/connection/components/disconnect-dialog/test/step-survey.tsx
 create mode 100644 projects/js-packages/connection/components/disconnect-survey/test/index.tsx

diff --git a/projects/js-packages/connection/components/disconnect-dialog/test/step-survey.tsx b/projects/js-packages/connection/components/disconnect-dialog/test/step-survey.tsx
new file mode 100644
index 000000000000..e0a7fb5d87bb
--- /dev/null
+++ b/projects/js-packages/connection/components/disconnect-dialog/test/step-survey.tsx
@@ -0,0 +1,49 @@
+import { jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import StepSurvey from '../steps/step-survey';
+
+describe( 'StepSurvey', () => {
+	const testProps = {
+		onExit: jest.fn(),
+		onFeedBackProvided: jest.fn(),
+	};
+
+	afterEach( () => {
+		testProps.onExit.mockClear();
+		testProps.onFeedBackProvided.mockClear();
+	} );
+
+	it( 'renders the heading and intro copy', () => {
+		render( <StepSurvey { ...testProps } /> );
+
+		expect( screen.getByRole( 'heading' ) ).toHaveTextContent(
+			'Before you go, help us improve Jetpack'
+		);
+		expect( screen.getByText( "Let us know what didn't work for you" ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders the survey options', () => {
+		render( <StepSurvey { ...testProps } /> );
+		expect( screen.getAllByRole( 'radio' ) ).toHaveLength( 6 );
+	} );
+
+	it( 'passes the survey response up on submit', async () => {
+		const user = userEvent.setup();
+		render( <StepSurvey { ...testProps } /> );
+
+		await user.click( screen.getByText( "It's buggy." ) );
+		await user.click( screen.getByRole( 'button', { name: 'Submit Feedback' } ) );
+
+		expect( testProps.onFeedBackProvided ).toHaveBeenCalledWith( 'buggy', '' );
+	} );
+
+	it( 'calls onExit when "Skip for now" is clicked', async () => {
+		const user = userEvent.setup();
+		render( <StepSurvey { ...testProps } /> );
+
+		await user.click( screen.getByRole( 'link', { name: 'Skip for now' } ) );
+
+		expect( testProps.onExit ).toHaveBeenCalledTimes( 1 );
+	} );
+} );
diff --git a/projects/js-packages/connection/components/disconnect-survey/test/index.tsx b/projects/js-packages/connection/components/disconnect-survey/test/index.tsx
new file mode 100644
index 000000000000..0ea855331ae3
--- /dev/null
+++ b/projects/js-packages/connection/components/disconnect-survey/test/index.tsx
@@ -0,0 +1,137 @@
+import { jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DisconnectSurvey from '../index';
+
+describe( 'DisconnectSurvey', () => {
+	const testProps = {
+		onSubmit: jest.fn(),
+	};
+
+	afterEach( () => {
+		testProps.onSubmit.mockClear();
+	} );
+
+	const getSubmit = () => screen.getByRole( 'button', { name: 'Submit Feedback' } );
+
+	it( 'groups the options under a named fieldset', () => {
+		render( <DisconnectSurvey { ...testProps } /> );
+		expect(
+			screen.getByRole( 'group', { name: 'Why are you disconnecting?' } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'renders every option as a radio in a single group', () => {
+		render( <DisconnectSurvey { ...testProps } /> );
+
+		const radios = screen.getAllByRole( 'radio' );
+		expect( radios ).toHaveLength( 6 );
+		// One shared `name` is what makes the browser treat these as one group.
+		expect( new Set( radios.map( radio => radio.getAttribute( 'name' ) ) ).size ).toBe( 1 );
+	} );
+
+	it( 'gives each survey instance its own group name and input IDs', () => {
+		render(
+			<>
+				<DisconnectSurvey { ...testProps } />
+				<DisconnectSurvey { ...testProps } />
+			</>
+		);
+
+		const radios = screen.getAllByRole< HTMLInputElement >( 'radio' );
+		expect( radios ).toHaveLength( 12 );
+
+		// Two groups, so the two surveys don't select against each other.
+		expect( new Set( radios.map( radio => radio.name ) ).size ).toBe( 2 );
+		// And no duplicate IDs, so every `htmlFor` still points at one input.
+		expect( new Set( radios.map( radio => radio.id ) ).size ).toBe( radios.length );
+	} );
+
+	it( 'selects an option when its label is clicked', async () => {
+		const user = userEvent.setup();
+		render( <DisconnectSurvey { ...testProps } /> );
+
+		await user.click( screen.getByText( "It's buggy." ) );
+
+		expect( screen.getByRole( 'radio', { name: "It's buggy." } ) ).toBeChecked();
+	} );
+
+	it( 'moves and selects with the arrow keys, keeping one tab stop for the group', async () => {
+		const user = userEvent.setup();
+		render( <DisconnectSurvey { ...testProps } /> );
+
+		// Tab lands on the group, not on each option in turn.
+		await user.tab();
+		const first = screen.getByRole( 'radio', {
+			name: "Troubleshooting - I'll be reconnecting afterwards.",
+		} );
+		expect( first ).toHaveFocus();
+
+		await user.keyboard( '{ArrowDown}' );
+
+		const second = screen.getByRole( 'radio', { name: "I can't get it to work." } );
+		expect( second ).toHaveFocus();
+		expect( second ).toBeChecked();
+		expect( first ).not.toBeChecked();
+	} );
+
+	it( 'disables the submit button until an option is selected', async () => {
+		const user = userEvent.setup();
+		render( <DisconnectSurvey { ...testProps } /> );
+
+		// @wordpress/ui's Button soft-disables with `aria-disabled` rather than
+		// the native attribute, so it stays focusable and discoverable.
+		expect( getSubmit() ).toHaveAttribute( 'aria-disabled', 'true' );
+
+		await user.click( screen.getByText( 'It slowed down my site.' ) );
+
+		expect( getSubmit() ).not.toHaveAttribute( 'aria-disabled', 'true' );
+	} );
+
+	it( 'submits the selected answer with no free text', async () => {
+		const user = userEvent.setup();
+		render( <DisconnectSurvey { ...testProps } /> );
+
+		await user.click( screen.getByText( "I don't know what it does." ) );
+		await user.click( getSubmit() );
+
+		expect( testProps.onSubmit ).toHaveBeenCalledWith( 'what-does-it-do', '' );
+	} );
+
+	it( 'selects "Other" when the free-text field is typed into, and submits the text', async () => {
+		const user = userEvent.setup();
+		render( <DisconnectSurvey { ...testProps } /> );
+
+		await user.type(
+			screen.getByRole( 'textbox', { name: 'Other: share your experience' } ),
+			'Something else'
+		);
+
+		expect( screen.getByRole( 'radio', { name: 'Other:' } ) ).toBeChecked();
+
+		await user.click( getSubmit() );
+
+		expect( testProps.onSubmit ).toHaveBeenCalledWith( 'another-reason', 'Something else' );
+	} );
+
+	it( 'shows the submitting state and blocks resubmission', async () => {
+		const user = userEvent.setup();
+		render( <DisconnectSurvey { ...testProps } isSubmittingFeedback /> );
+
+		await user.click( screen.getByText( "It's buggy." ) );
+
+		expect( screen.getByRole( 'button', { name: 'Submitting…' } ) ).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
+	} );
+
+	it( 'does not throw when no onSubmit handler is passed', async () => {
+		const user = userEvent.setup();
+		render( <DisconnectSurvey /> );
+
+		await user.click( screen.getByText( "It's buggy." ) );
+
+		await expect( user.click( getSubmit() ) ).resolves.not.toThrow();
+	} );
+} );

From 83126094a1599bdf5c777753f8ac6592f17461e9 Mon Sep 17 00:00:00 2001
From: Karen Attfield <karenlattfield@gmail.com>
Date: Fri, 24 Jul 2026 10:27:16 +0100
Subject: [PATCH 4/5] Comment cleanup

---
 .../changelog/update-connection-js-package-ui-pt6    |  2 +-
 .../_jp-connect_disconnect-survey-card.scss          |  1 -
 .../components/disconnect-survey/index.tsx           | 12 ++++--------
 .../connection/components/disconnect-survey/types.ts |  4 +---
 4 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/projects/js-packages/connection/changelog/update-connection-js-package-ui-pt6 b/projects/js-packages/connection/changelog/update-connection-js-package-ui-pt6
index c1eb439f0f8d..4035a2d1acc6 100644
--- a/projects/js-packages/connection/changelog/update-connection-js-package-ui-pt6
+++ b/projects/js-packages/connection/changelog/update-connection-js-package-ui-pt6
@@ -1,4 +1,4 @@
 Significance: patch
 Type: changed
 
-Connection UI: Make the disconnect survey a real radio group so its options are announced and keyboard-operable as a single-choice control, drop the decorative arrow the options no longer need, and build the option cards on the shared Card component.
+Connection UI: Make the disconnect survey a real radio group, drop the decorative arrow the options no longer need, and build the option cards on the shared Card component.
diff --git a/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss b/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss
index edba0cd9f99c..dc0e62c8e934 100644
--- a/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss
+++ b/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss
@@ -60,7 +60,6 @@ input.jp-connect__disconnect-survey-card__input {
 	font-size: var(--font-body);
 	flex-grow: 1;
 	min-width: 0;
-
 	position: relative;
 	z-index: 1;
 }
diff --git a/projects/js-packages/connection/components/disconnect-survey/index.tsx b/projects/js-packages/connection/components/disconnect-survey/index.tsx
index ccdf18eb3df0..e77014948a7e 100644
--- a/projects/js-packages/connection/components/disconnect-survey/index.tsx
+++ b/projects/js-packages/connection/components/disconnect-survey/index.tsx
@@ -21,7 +21,7 @@ const DisconnectSurvey = ( props: DisconnectSurveyProps ) => {
 	const { onSubmit, isSubmittingFeedback } = props;
 	// The `name` shared by every radio in the survey, which is what groups them
 	// into one radio group. Generated per instance rather than hard-coded, so
-	// that two surveys on a page stay separate groups with unique input IDs.
+	// that two surveys on a page (though unlikely) stay separate groups with unique input IDs.
 	const surveyGroupName = `jp-connect__disconnect-survey${ useId() }`;
 	const [ selectedAnswer, setSelectedAnswer ] = useState< string >();
 	const [ customResponse, setCustomResponse ] = useState( '' );
@@ -61,9 +61,7 @@ const DisconnectSurvey = ( props: DisconnectSurveyProps ) => {
 	 * Will send the survey response to the collection endpoint.
 	 */
 	const handleSurveySubmit = useCallback( () => {
-		// The submit button is disabled until an answer is picked, so this is
-		// only a guard — but it also narrows `selectedAnswer` to a string, which
-		// is what every consumer of `onSubmit` already declares it takes.
+		// The submit button is disabled until an answer is picked.
 		if ( ! selectedAnswer ) {
 			return;
 		}
@@ -75,10 +73,8 @@ const DisconnectSurvey = ( props: DisconnectSurveyProps ) => {
 	/**
 	 * Select the "Other" option.
 	 *
-	 * The free text field sits above the label's hit area, so a click on it no
-	 * longer reaches the option the way it did when the whole card was one
-	 * `role="button"`. Interacting with the field is an unambiguous choice of
-	 * "Other", so it selects the option itself.
+	 * The free text field sits above the label's hit area. Interacting with the
+	 * field is an unambiguous choice of "Other", so it selects the option itself.
 	 */
 	const selectCustomOption = useCallback( () => {
 		setSelectedAnswer( customOption.id );
diff --git a/projects/js-packages/connection/components/disconnect-survey/types.ts b/projects/js-packages/connection/components/disconnect-survey/types.ts
index e74ea02de467..393c3b4ac005 100644
--- a/projects/js-packages/connection/components/disconnect-survey/types.ts
+++ b/projects/js-packages/connection/components/disconnect-survey/types.ts
@@ -12,9 +12,7 @@ export interface SurveyChoiceProps {
 	/** Called with the option's ID when this option is selected. */
 	onSelect: ( id: string ) => void;
 	/**
-	 * Extra content rendered inside the card, beside the label — e.g. the free
-	 * text field on the "Other" option. Kept outside the `<label>` so that
-	 * interactive content is never nested in it.
+	 * Extra content rendered inside the card, beside the label.
 	 */
 	children?: ReactNode;
 }

From c3e03eb19a56905734096b8d5d53e8c8bc52bfb7 Mon Sep 17 00:00:00 2001
From: Karen Attfield <karenlattfield@gmail.com>
Date: Fri, 24 Jul 2026 16:50:28 +0100
Subject: [PATCH 5/5] Disconnection survey input style tweak and adding id and
 name

---
 .../disconnect-survey/_jp-connect_disconnect-survey-card.scss   | 1 +
 .../connection/components/disconnect-survey/index.tsx           | 2 ++
 .../connection/components/disconnect-survey/test/index.tsx      | 2 +-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss b/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss
index dc0e62c8e934..c0e4c2bef6f8 100644
--- a/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss
+++ b/projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss
@@ -57,6 +57,7 @@ input.jp-connect__disconnect-survey-card__input {
 	border: none;
 	background-color: transparent;
 	color: var(--jp-black-80);
+	cursor: text;
 	font-size: var(--font-body);
 	flex-grow: 1;
 	min-width: 0;
diff --git a/projects/js-packages/connection/components/disconnect-survey/index.tsx b/projects/js-packages/connection/components/disconnect-survey/index.tsx
index e77014948a7e..7f38af52a01b 100644
--- a/projects/js-packages/connection/components/disconnect-survey/index.tsx
+++ b/projects/js-packages/connection/components/disconnect-survey/index.tsx
@@ -130,6 +130,8 @@ const DisconnectSurvey = ( props: DisconnectSurveyProps ) => {
 				onSelect={ setSelectedAnswer }
 			>
 				<input
+					id="jp-connect__disconnect-survey-custom-input"
+					name="jp-connect__disconnect-survey-custom-input"
 					placeholder={ __( 'Share your experience', 'jetpack-connection-js' ) }
 					// Names the option as well as the field: the two are adjacent
 					// visually, but nothing otherwise ties this input to the
diff --git a/projects/js-packages/connection/components/disconnect-survey/test/index.tsx b/projects/js-packages/connection/components/disconnect-survey/test/index.tsx
index 0ea855331ae3..ba9602e5c3f9 100644
--- a/projects/js-packages/connection/components/disconnect-survey/test/index.tsx
+++ b/projects/js-packages/connection/components/disconnect-survey/test/index.tsx
@@ -132,6 +132,6 @@ describe( 'DisconnectSurvey', () => {
 
 		await user.click( screen.getByText( "It's buggy." ) );
 
-		await expect( user.click( getSubmit() ) ).resolves.not.toThrow();
+		await expect( user.click( getSubmit() ) ).resolves.toBeUndefined();
 	} );
 } );