Accessibility: Fix issues with the "Select domain" step buttons and domain name labels (with fixed test)

[ivan-ottinger]

Note

This is a follow-up to the #103674 PR that had to be reverted due to failing pre-release E2E tests. Apart from the original changes, this PR also fixes the broken E2E test in packages/calypso-e2e/src/lib/components/domain-search-component.ts and ensures the aria-label for Skip Purchase button is correct (e7a9473).

Resolves DOTCOM-13261
Related to #103674

Proposed Changes

• ensure the domain name is read correctly together with "heading level 3"
• add accessible label for the Select button on the "Select Domain" step

Each button will now read its action (e.g. Select / Selected), domain and price information, including sale.

I haven't included the badges like Recommended or Best Alternative as it made the whole read text quite long.

Why are these changes being made?

• a55edfa4e3bf-linear-project

Testing Instructions

1. Check out the PR branch and build the app with yarn start or use Calypso Live.
2. Head over to the Domain Select step at http://calypso.localhost:3000/start/domain/domain-only.
3. Enabled VoiceOver.
4. Try to search for a domain and then tab through the page. Focus on the Select buttons and listen to the announcements.
5. Try to select the domain by pressing Control + Option + Space. The announcement should be read again, but now with updated action, i.e.: Select → Selected.
6. Try to cycle through the elements on each domain card with ctrl+option+→ or ctrl+option+←. The domain name should be read as well, not just "heading level 3".

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-146012

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-146012&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-146012&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• blaze-dashboard
• help-center
• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/accessibility-on-select-domain-step-02 on your sandbox.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~276 bytes added 📈 [gzipped])

name                        parsed_size           gzip_size
domains                         +1181 B  (+0.0%)     +276 B  (+0.0%)
async-step-unified-domains      +1181 B  (+0.1%)     +276 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~276 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
async-load-signup-steps-domains      +1181 B  (+0.1%)     +276 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[ivan-ottinger]

All pre-release E2E tests are now passing:

• https://teamcity.a8c.com/buildConfiguration/calypso_calypso_WebApp_Calypso_E2E_Pre_Release/14990804
• https://teamcity.a8c.com/buildConfiguration/calypso_calypso_WebApp_Calypso_E2E_Pre_Release_desktop?branch=fix/accessibility-on-select-domain-step-02#all-projects
• https://teamcity.a8c.com/buildConfiguration/calypso_calypso_WebApp_Calypso_E2E_Pre_Release_mobile?branch=fix/accessibility-on-select-domain-step-02#all-projects

[epeicher]

Thanks @ivan-ottinger for the changes, I can see the improvements, as I can see now the domain name read by Voice Over, and the Select -> Selected including the domain name.

However, I still can see the h3 there, I don't think is a big issue, but I would like to comment as it is described in the test steps that it should not be displayed. Here you can find a video with my findings:

CleanShot.2025-05-28.at.13.44.30.mp4

[ivan-ottinger]

Thank you for the review and testing, Roberto!

However, I still can see the h3 there, I don't think is a big issue, but I would like to comment as it is described in the test steps that it should not be displayed. Here you can find a video with my findings:

Good catch! I have updated the instructions - as the h3 should be read there now.

[epeicher]

Thanks for updating the instructions! I can confirm that is working as expected. LGTM!

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17517916

Some locales (Brazilian Portuguese, Hebrew) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @ivan-ottinger for including a screenshot in the description! This is really helpful for our translators.