Accessibility: Add informative `aria-label` to the `PremiumBadge` domain component #103742

ivan-ottinger · 2025-05-27T13:35:45Z

Related to DOTCOM-13261
Related to #103674

Proposed Changes

add aria-label for the PremiumBadge domain component used on the "Select Domain" step

Why are these changes being made?

a55edfa4e3bf-linear-project

Testing Instructions

Check out the PR branch and build the app with yarn start (or use Calypso Live).
Head over to the Domain Select step at http://calypso.localhost:3000/start/domain/domain-only.
Enable VoiceOver.
Try to search for a premium domains and then tab through the page. Focus on the Premium domain badges and listen to the announcements.
The announced message should be clear and inform the user which domain it is related to.

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)?

…ponent

github-actions · 2025-05-27T13:35:58Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2025-05-27T13:39:53Z

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

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

blaze-dashboard
notifications
odyssey-stats
wpcom-block-editor

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

matticbot · 2025-05-27T13:41:06Z

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

App Entrypoints (~8 bytes added 📈 [gzipped])

name                 parsed_size           gzip_size
entry-subscriptions        +26 B  (+0.0%)       -1 B  (-0.0%)
entry-login                +26 B  (+0.0%)       +2 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~240 bytes added 📈 [gzipped])

name                                parsed_size           gzip_size
domains                                  +494 B  (+0.0%)     +100 B  (+0.0%)
async-step-unified-domains               +494 B  (+0.0%)     +100 B  (+0.0%)
woocommerce-installation                  +26 B  (+0.0%)      +10 B  (+0.0%)
themes                                    +26 B  (+0.0%)      +10 B  (+0.0%)
theme                                     +26 B  (+0.0%)      +10 B  (+0.0%)
subscribers                               +26 B  (+0.0%)      +10 B  (+0.0%)
stepper-user-step                         +26 B  (+0.0%)       +8 B  (+0.0%)
stats                                     +26 B  (+0.0%)      +10 B  (+0.0%)
staging-site                              +26 B  (+0.0%)      +10 B  (+0.0%)
sites-dashboard                           +26 B  (+0.0%)      +10 B  (+0.0%)
site-settings                             +26 B  (+0.0%)      +10 B  (+0.0%)
site-purchases                            +26 B  (+0.0%)      +10 B  (+0.0%)
site-profiler                             +26 B  (+0.0%)       +7 B  (+0.0%)
site-performance                          +26 B  (+0.0%)      +10 B  (+0.0%)
site-monitoring                           +26 B  (+0.0%)      +10 B  (+0.0%)
site-logs                                 +26 B  (+0.0%)      +10 B  (+0.0%)
site-blocks                               +26 B  (+0.0%)      +10 B  (+0.0%)
settings-writing                          +26 B  (+0.0%)      +10 B  (+0.0%)
settings-security                         +26 B  (+0.0%)      +10 B  (+0.0%)
settings-reading                          +26 B  (+0.0%)      +10 B  (+0.0%)
settings-podcast                          +26 B  (+0.0%)      +10 B  (+0.0%)
settings-performance                      +26 B  (+0.0%)      +10 B  (+0.0%)
settings-newsletter                       +26 B  (+0.0%)      +10 B  (+0.0%)
settings-jetpack                          +26 B  (+0.0%)      +10 B  (+0.0%)
settings-discussion                       +26 B  (+0.0%)      +10 B  (+0.0%)
settings                                  +26 B  (+0.0%)      +10 B  (+0.0%)
security                                  +26 B  (+0.0%)      +10 B  (+0.0%)
scan                                      +26 B  (+0.0%)      +10 B  (+0.0%)
reader                                    +26 B  (+0.0%)      +10 B  (+0.0%)
purchases                                 +26 B  (+0.0%)      +10 B  (+0.0%)
purchase-product                          +26 B  (+0.0%)      +10 B  (+0.0%)
promote-post-i2                           +26 B  (+0.0%)       +9 B  (+0.0%)
privacy                                   +26 B  (+0.0%)      +10 B  (+0.0%)
posts-custom                              +26 B  (+0.0%)      +10 B  (+0.0%)
posts                                     +26 B  (+0.0%)      +10 B  (+0.0%)
plugins                                   +26 B  (+0.0%)      +10 B  (+0.0%)
plans                                     +26 B  (+0.0%)      +10 B  (+0.0%)
people                                    +26 B  (+0.0%)      +10 B  (+0.0%)
pages                                     +26 B  (+0.0%)      +10 B  (+0.0%)
overview                                  +26 B  (+0.0%)      +10 B  (+0.0%)
notification-settings                     +26 B  (+0.0%)      +10 B  (+0.0%)
migrate                                   +26 B  (+0.0%)       +6 B  (+0.0%)
media                                     +26 B  (+0.0%)      +10 B  (+0.0%)
me                                        +26 B  (+0.0%)      +10 B  (+0.0%)
marketing                                 +26 B  (+0.0%)      +10 B  (+0.0%)
jetpack-social                            +26 B  (+0.0%)       +8 B  (+0.0%)
jetpack-search                            +26 B  (+0.0%)       +3 B  (+0.0%)
jetpack-connect                           +26 B  (+0.0%)       +9 B  (+0.0%)
jetpack-cloud-settings                    +26 B  (+0.0%)      +10 B  (+0.0%)
jetpack-cloud-pricing                     +26 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-plugin-management           +26 B  (+0.0%)      +10 B  (+0.0%)
jetpack-cloud-partner-portal              +26 B  (+0.0%)      +10 B  (+0.0%)
jetpack-cloud-overview                    +26 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-manage-pricing              +26 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-features-comparison         +26 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-agency-dashboard            +26 B  (+0.0%)       +8 B  (+0.0%)
jetpack-app                               +26 B  (+0.0%)       +9 B  (+0.0%)
import                                    +26 B  (+0.0%)      +10 B  (+0.0%)
hosting                                   +26 B  (+0.0%)      +10 B  (+0.0%)
home                                      +26 B  (+0.0%)      +10 B  (+0.0%)
help                                      +26 B  (+0.0%)      +10 B  (+0.0%)
google-my-business                        +26 B  (+0.0%)      +10 B  (+0.0%)
github-deployments                        +26 B  (+0.0%)      +10 B  (+0.0%)
export                                    +26 B  (+0.0%)      +10 B  (+0.0%)
entrepreneur-flow                         +26 B  (+0.0%)       +9 B  (+0.0%)
email                                     +26 B  (+0.0%)      +10 B  (+0.0%)
earn                                      +26 B  (+0.0%)      +10 B  (+0.0%)
developer                                 +26 B  (+0.0%)      +10 B  (+0.0%)
concierge                                 +26 B  (+0.0%)       +5 B  (+0.0%)
comments                                  +26 B  (+0.0%)      +10 B  (+0.0%)
checkout                                  +26 B  (+0.0%)       +6 B  (+0.0%)
backup                                    +26 B  (+0.0%)      +10 B  (+0.0%)
async-step-use-my-domain                  +26 B  (+0.0%)       +8 B  (+0.0%)
async-step-unified-plans                  +26 B  (+0.0%)       +9 B  (+0.0%)
add-ons                                   +26 B  (+0.0%)      +10 B  (+0.0%)
activity                                  +26 B  (+0.0%)      +10 B  (+0.0%)
account-close                             +26 B  (+0.0%)      +10 B  (+0.0%)
account                                   +26 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-woopayments              +26 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-team                     +26 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-sites                    +26 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-settings                 +26 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-referrals                +26 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-purchases                +26 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-plugins                  +26 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-partner-directory        +26 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-overview                 +26 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-migrations               +26 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-marketplace              +26 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-landing                  +26 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-client                   +26 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-agency-tier              +26 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies                          +26 B  (+0.0%)      +10 B  (+0.0%)

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 (~392 bytes added 📈 [gzipped])

name                                                            parsed_size           gzip_size
async-load-signup-steps-domains                                      +494 B  (+0.0%)     +100 B  (+0.0%)
async-load-store-app-store-stats                                      +26 B  (+0.0%)      +10 B  (+0.0%)
async-load-signup-steps-woocommerce-install-transfer                  +26 B  (+0.0%)       +8 B  (+0.0%)
async-load-signup-steps-woocommerce-install-step-store-address        +26 B  (+0.0%)       +8 B  (+0.0%)
async-load-signup-steps-woocommerce-install-step-business-info        +26 B  (+0.0%)      +10 B  (+0.0%)
async-load-signup-steps-woocommerce-install-confirm                   +26 B  (+0.0%)      +10 B  (+0.0%)
async-load-signup-steps-website-content-section-types                 +26 B  (+0.0%)       +8 B  (+0.0%)
async-load-signup-steps-website-content                               +26 B  (+0.0%)       +8 B  (+0.0%)
async-load-signup-steps-user                                          +26 B  (+0.0%)      +10 B  (+0.0%)
async-load-signup-steps-store-features                                +26 B  (+0.0%)       +8 B  (+0.0%)
async-load-signup-steps-starting-point                                +26 B  (+0.0%)      +10 B  (+0.1%)
async-load-signup-steps-social-profiles                               +26 B  (+0.1%)      +10 B  (+0.1%)
async-load-signup-steps-site-picker                                   +26 B  (+0.0%)       +8 B  (+0.0%)
async-load-signup-steps-site-or-domain                                +26 B  (+0.0%)       +9 B  (+0.0%)
async-load-signup-steps-site-options                                  +26 B  (+0.0%)       +9 B  (+0.0%)
async-load-signup-steps-site                                          +26 B  (+0.0%)       +8 B  (+0.0%)
async-load-signup-steps-rewind-were-backing                           +26 B  (+0.1%)       +9 B  (+0.1%)
async-load-signup-steps-rewind-form-creds                             +26 B  (+0.0%)       +9 B  (+0.0%)
async-load-signup-steps-plans-theme-preselected                       +26 B  (+0.0%)       +9 B  (+0.0%)
async-load-signup-steps-plans                                         +26 B  (+0.0%)       +9 B  (+0.0%)
async-load-signup-steps-page-picker                                   +26 B  (+0.0%)       +8 B  (+0.0%)
async-load-signup-steps-new-or-existing-site                          +26 B  (+0.0%)      +10 B  (+0.0%)
async-load-signup-steps-intent                                        +26 B  (+0.0%)       +8 B  (+0.0%)
async-load-signup-steps-hosting-decider                               +26 B  (+0.1%)      +10 B  (+0.1%)
async-load-signup-steps-emails                                        +26 B  (+0.0%)       +6 B  (+0.0%)
async-load-signup-steps-difm-site-picker                              +26 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-design-picker                                 +26 B  (+0.0%)      +11 B  (+0.0%)
async-load-signup-steps-creds-permission                              +26 B  (+0.0%)      +10 B  (+0.0%)
async-load-signup-steps-creds-confirm                                 +26 B  (+0.0%)      +10 B  (+0.0%)
async-load-signup-steps-courses                                       +26 B  (+0.0%)       +9 B  (+0.0%)
async-load-signup-steps-clone-start                                   +26 B  (+0.1%)       +9 B  (+0.1%)
async-load-signup-steps-clone-ready                                   +26 B  (+0.0%)       +8 B  (+0.0%)
async-load-signup-steps-clone-point                                   +26 B  (+0.0%)       +7 B  (+0.0%)
async-load-signup-steps-clone-destination                             +26 B  (+0.0%)       +8 B  (+0.0%)
async-load-signup-steps-clone-credentials                             +26 B  (+0.0%)       +8 B  (+0.0%)
async-load-signup-steps-clone-cloning                                 +26 B  (+0.1%)       +9 B  (+0.1%)
async-load-design-playground                                          +26 B  (+0.0%)      +10 B  (+0.0%)
async-load-design-blocks                                              +26 B  (+0.0%)       +9 B  (+0.0%)
async-load-design                                                     +26 B  (+0.0%)      +10 B  (+0.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.

bcotrim

Looks good and works great with VoiceOver
👍

ivan-ottinger · 2025-05-28T11:03:04Z

All pre-release E2E tests are passing:

sejas

The code looks good to me, but I'm not sure how to test it properly.
When activating the voice over and selecting the tooltip I hear the information inside the tooltip and not the new popoverAriaLabel.

voice-over-premium-tooltip.mp4

gavande1

Thanks @ivan-ottinger for working on this. This is working as expected. LGTM 👍

gavande1 · 2025-05-29T06:08:39Z

I noticed another problem with the Select button. When navigating using VoiceOver, the domain name is announced, making it difficult to know which domain is currently selected. I created an issue for that https://linear.app/a8c/issue/DOTCOM-13356/accessibility-select-button-doesnt-announce-selected-domain-in-voice

gavande1 · 2025-05-29T06:36:34Z

~~Created PR #103795 to fix the issue related to the Select button.~~ Closed linked the PR.

ivan-ottinger · 2025-05-29T08:38:09Z

Thank you for your reviews and testing everyone!

The code looks good to me, but I'm not sure how to test it properly.
When activating the voice over and selecting the tooltip I hear the information inside the tooltip and not the new popoverAriaLabel.

Here's how I navigate through the page using Tab, Shift + Tab, Control + Option + Left Arrow, Control + Option + Right Arrow:

Screen.Capture.on.2025-05-29.at.09-53-07.mov

(there's a bit of an echo in the recording; sorry about that)

Looking at this again, it brings up another area which we could improve: When the InfoPopover component is opened already, the only way to close it at the moment is to click away. I looked into this briefly and fix is not that straightforward, so I will leave it out of this PR and based on priorities and time may look at it later.

a8ci18n · 2025-05-29T10:24:33Z

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

Some locales (Hebrew, Japanese) 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.

ivan-ottinger added 2 commits May 27, 2025 15:28

Ensure aria-label is passed to the InfoPopover component as a prop

141135a

Create and pass aria-label to InfoPopover inside PremiumBadge com…

709483e

…ponent

ivan-ottinger self-assigned this May 27, 2025

ivan-ottinger requested a review from a team May 27, 2025 13:42

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 27, 2025

ivan-ottinger mentioned this pull request May 27, 2025

Accessibility: Fix issues with the "Select domain" step buttons and domain name labels #103674

Merged

8 tasks

bcotrim approved these changes May 27, 2025

View reviewed changes

sejas reviewed May 28, 2025

View reviewed changes

gavande1 approved these changes May 29, 2025

View reviewed changes

gavande1 mentioned this pull request May 29, 2025

Accessibility: Add informative aria-label to the Select button component in choose your domain screen #103795

Closed

8 tasks

ivan-ottinger merged commit e2cc9d4 into trunk May 29, 2025
17 checks passed

ivan-ottinger deleted the fix/premium-domain-badge-accessibility branch May 29, 2025 08:39

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 29, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Accessibility: Add informative `aria-label` to the `PremiumBadge` domain component #103742

Accessibility: Add informative `aria-label` to the `PremiumBadge` domain component #103742

ivan-ottinger commented May 27, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 27, 2025 •

edited by matticbot

Loading

Uh oh!

matticbot commented May 27, 2025

Uh oh!

matticbot commented May 27, 2025

Uh oh!

bcotrim left a comment

Uh oh!

ivan-ottinger commented May 28, 2025 •

edited

Loading

Uh oh!

sejas left a comment

Uh oh!

gavande1 left a comment

Uh oh!

gavande1 commented May 29, 2025

Uh oh!

gavande1 commented May 29, 2025 •

edited

Loading

Uh oh!

ivan-ottinger commented May 29, 2025

Uh oh!

Uh oh!

a8ci18n commented May 29, 2025

Uh oh!

Uh oh!

Accessibility: Add informative aria-label to the PremiumBadge domain component #103742

Accessibility: Add informative aria-label to the PremiumBadge domain component #103742

Conversation

ivan-ottinger commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented May 27, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented May 27, 2025

Uh oh!

matticbot commented May 27, 2025

Uh oh!

bcotrim left a comment

Choose a reason for hiding this comment

Uh oh!

ivan-ottinger commented May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sejas left a comment

Choose a reason for hiding this comment

Uh oh!

gavande1 left a comment

Choose a reason for hiding this comment

Uh oh!

gavande1 commented May 29, 2025

Uh oh!

gavande1 commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ivan-ottinger commented May 29, 2025

Uh oh!

Uh oh!

a8ci18n commented May 29, 2025

Uh oh!

Uh oh!

Accessibility: Add informative `aria-label` to the `PremiumBadge` domain component #103742

Accessibility: Add informative `aria-label` to the `PremiumBadge` domain component #103742

ivan-ottinger commented May 27, 2025 •

edited

Loading

github-actions bot commented May 27, 2025 •

edited by matticbot

Loading

ivan-ottinger commented May 28, 2025 •

edited

Loading

gavande1 commented May 29, 2025 •

edited

Loading