Connection: Step survey - modernize components and fix for accessibility

[coder-karen]

Fixes CONNECT-393

Ideally requires #50735 as there is some overlap with changes in step-survey.tsx.

Proposed changes

• The previous implementation of survey-choice.tsx renders each option as a focusable div with role="button". This resulted in several accessibility issues: Selected state was not exposed correctly to assistive technology, keyboard behaviour did not match a single-choice control, focus was managed by hand on a non-semantic element, interactive content was nested inside an element with role="button", and the control behaved as a radio group but was not implemented as one.

Now:

• One radio group via a shared name (surveyGroupName, generated per instance with useId()), so the browser supplies roving tabindex, arrow-key navigation, and one tab stop for the whole group.
• Selected state = native checked → announced correctly.
• Custom onKeyDown handler deleted — native behaviour replaces it.
• Text input no longer nested in a role="button"; it's a sibling of the <label>, so no interactive-in-label nesting.
• Hand-rolled focus management on the div is gone with the div.
• Options wrapped in <fieldset> + VisuallyHidden render={<legend/>} naming the group.
• Whole-card click preserved via stretched label::before { inset: 0 }; free-text field raised with z-index: 1 so clicks land on it, and interacting with it (click or typing) selects "Other" — matching old click-to-select.

Shared card component:

• The option cards now use Card from @wordpress/ui, matching manage-connection-action-card in the connection dialogs. Card is presentational only and contributes nothing to the accessibility above — the radio inside it carries the semantics.

Additional changes:

• Fixed a typo in the existing :not(.jp-disconnect-survey-card--selected) — missing connect__, so it never matched and the hover border overrode the selected border.
• step-survey.tsx large-text <p> now using <Text>

• Fix the customResponse default - it was undefined, resulting in a console error when beginning to type. Now an empty string.
• DisconnectSurvey's onSubmit prop is now optional and invoked with optional chaining (onSubmit?.()). The prop was previously declared as required, but StepSurvey forwards its own optional onFeedBackProvided prop into it — so an undefined callback could reach an unguarded call site and throw at runtime.
• handleSurveySubmit now returns early when no answer is selected. The submit button is already disabled until the user picks an option, so this is a guard rather than a behaviour change, but it narrows selectedAnswer from string | undefined to string. The survey's onSubmit and StepSurvey's onFeedBackProvided signatures have been tightened to match, bringing all three layers in line with handleSubmitSurvey in DisconnectDialog, which already declared the answer ID as a non-optional string.

Related product discussion/links

• See above issue.

Does this pull request change what data or activity we track or use?

No.

Testing instructions

On a Jetpack-connected site with this PR applied (locally or using the Jetpack Beta tester plugin):

• To test the disconnect survey, disconnect your user account via the My Jetpack page.
  • You may need to trigger the survey - I resorted to adding setIsProvidingFeedback( true ); within handleDisconnect in DisconnectDialog to get this to work, so testing locally and re-building for those changes (rebuild My Jetpack and dependencies) is what worked for me.
• The survey cards should look slightly different - no more chevron icon, instead radio options are shown, to reflect that these are now radio options.
• In contrast to before, you can now tab onto the first item and use arrow keys to move up and down for your selection. Before, you could only tab through, so it was unclear if reading via a screen that these were survey options.
• Ensure that that you can still select options, type in the other field (with no console error), and submit your results.

To test that the survey still renders properly via the Jetpack plugin:

• Manually visit wp-admin/admin.php?page=jetpack#/disconnect.
• Agree to disconnecting, and then agree to taking the survey.
• The options should render as they do when testing via My Jetpack as the same component is used.

Before:

After:

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the update/connection-js-package-disconnect-survey branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/connection-js-package-disconnect-survey

bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/connection-js-package-disconnect-survey

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[jp-launch-control]

Code Coverage Summary

Coverage changed in 3 files.

File	Coverage	Δ%	Δ Uncovered
projects/js-packages/connection/components/disconnect-dialog/steps/step-survey.tsx	2/2 (100.00%)	50.00%	-1 💚
projects/js-packages/connection/components/disconnect-survey/survey-choice.tsx	4/4 (100.00%)	100.00%	-5 💚
projects/js-packages/connection/components/disconnect-survey/index.tsx	22/23 (95.65%)	91.95%	-25 💚

Full summary · PHP report · JS report

[Copilot]

Pull request overview

Modernizes the disconnect step survey in the Connection UI by replacing custom “button-like div” option cards with a native radio group implementation, improving keyboard and assistive-technology behavior and aligning UI primitives with @wordpress/ui.

Changes:

• Rebuild survey options as a single named radio group (fieldset/legend + native radios) and refactor SurveyChoice to render @wordpress/ui Card + radio/label.
• Fix survey state handling (initialize custom response to '', make onSubmit optional, and guard submit when no option is selected).
• Add Jest coverage for DisconnectSurvey and StepSurvey behaviors (group semantics, keyboard selection, submission).

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
projects/js-packages/connection/components/disconnect-survey/types.ts	Updates SurveyChoiceProps to match the new radio-based option card API.
projects/js-packages/connection/components/disconnect-survey/test/index.tsx	Adds tests covering radio grouping, keyboard interaction, submit behavior, and “Other” free-text selection.
projects/js-packages/connection/components/disconnect-survey/survey-choice.tsx	Refactors option rendering to a Card containing a native radio + label, removing custom key handling.
projects/js-packages/connection/components/disconnect-survey/index.tsx	Implements per-instance radio group naming via useId(), fieldset/legend labeling, optional submit handler, and improved “Other” handling.
projects/js-packages/connection/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss	Updates styling for the new Card/radio layout and fixes the selected hover selector.
projects/js-packages/connection/components/disconnect-dialog/test/step-survey.tsx	Adds StepSurvey tests validating heading/copy, radio rendering, and callback behavior.
projects/js-packages/connection/components/disconnect-dialog/style.scss	Adjusts spacing/layout for large text and the new fieldset-based survey container.
projects/js-packages/connection/components/disconnect-dialog/steps/step-survey.tsx	Switches intro copy to Text and tightens the survey callback typing.
projects/js-packages/connection/changelog/update-connection-js-package-ui-pt6	Adds a changelog entry describing the survey accessibility/UI modernization.

[bindlegirl]

Looks good and works well.