Accessibility: add ARIA labels to Add New Site dialog

[gcsecsey]

Fixes DOTCOM-13537 Improve VoiceOver labels on 'Add new site' dialog

Proposed Changes

• Add aria-labels to all MenuItem components in the Add New Site dialog

Why are these changes being made?

Improve the accessibility for VoiceOver users. Having the rendered labels announced might not make the options clear enough.

Testing Instructions

• Pull the changes from this branch or use the Calypso Live Link
• Go to /sites and click the "Add Site" button to open the dialog
• Enable VoiceOver
• Use the Control + Option + Arrow keys or the Tab key to navigate between the options
• Check that each option is announced with its new, more descriptive label
• Check that visual labels remain unchanged

CleanShot.2025-06-06.at.15.20.51.mp4

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-147177&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

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

To test WordPress.com changes, run install-plugin.sh $pluginSlug dotcom-13537-improve-voiceover-labels-on-add-new-site-dialog on your sandbox.

[matticbot]

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

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

name                                             parsed_size           gzip_size
async-load-calypso-dashboard-sites-add-new-site       +370 B  (+5.1%)      +82 B  (+3.0%)

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]

Nice! The changes look good and work as expected. 👌🏼 Approving!

---

One additional thing we could consider is to update how the "Get a free domain [...]" link on the side is read. At the moment there's a lot of redundancy:

[gcsecsey]

Nice! The changes look good and work as expected. 👌🏼 Approving!

One additional thing we could consider is to update how the "Get a free domain [...]" link on the side is read. At the moment there's a lot of redundancy:

That's a good point @ivan-ottinger, thanks for highlighting! 👍 I added labels to this link as well: