Improve voiceover navigation on the plan comparison step #103800

bcotrim · 2025-05-29T10:59:56Z

Proposed Changes

Changed to the correct table elements
Adjusted aria-label and aria-hidden as necessary
Some adjustments to preserve StickyContainer logic and behavior

Note: This PR only focus on the table elements and scope, there might still be more a11y improvements necessary on this workflow.

Why are these changes being made?

Users should be able to navigate plans comparison page using VoiceOver

Testing Instructions

yarn start
Navigation to the plans page on http://calypso.localhost:3000/setup/onboarding/plans
Navigate using VoiceOver
Confirm that it is possible to navigate table rows and columns, and VoiceOver reads the expected values

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 · 2025-05-29T11:00:08Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2025-05-29T11:04:41Z

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

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

notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug dotcom-13283-improve-voiceover-navigation-on-the-plan-comparison-step on your sandbox.

matticbot · 2025-05-29T11:06:57Z

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

Sections (~299 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
plugins                            +926 B  (+0.0%)     +278 B  (+0.0%)
plans                              +926 B  (+0.0%)     +278 B  (+0.0%)
jetpack-app                        +926 B  (+0.2%)     +278 B  (+0.2%)
async-step-unified-plans           +926 B  (+0.1%)     +278 B  (+0.1%)
jetpack-cloud-partner-portal        +42 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-referrals          +42 B  (+0.0%)      +11 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 (~285 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-signup-steps-plans-theme-preselected       +926 B  (+0.2%)     +278 B  (+0.2%)
async-load-signup-steps-plans                         +926 B  (+0.2%)     +278 B  (+0.2%)
async-load-design                                      +42 B  (+0.0%)       +7 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.

epeicher

I think this is an improvement and I have not found any regressions so I'm accepting this. But I think these changes would benefit from another review.

Before

CleanShot.2025-05-30.at.18.01.16.mp4

After

CleanShot.2025-05-30.at.18.02.37.mp4

katinthehatsite · 2025-06-02T08:10:59Z

Nice, thanks for the improvements! I am not sure if it is supposed to be read but I was not able to navigate to Best for devs, Your plan etc on the very top above the plan names:

bcotrim · 2025-06-03T08:59:08Z

@katinthehatsite thanks for the review!
I have adjusted the logos, can you take another look, please?

sejas

@bcotrim , thanks for improving the accessibility of the plan comparison step.
I tested it with the voiceover and I was able to navigate through the main items correctly.
I left a few suggestions, but feel free to apply them only if they make sense.
One last comment is that I'm seeing a few console warnings in the chrome dev tools:

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>. Error Component Stack

I don't see any visual regression:

Before	After

sejas · 2025-06-03T13:31:02Z

packages/components/src/logos/woo-logo/index.tsx

@@ -11,6 +11,7 @@ export const WooLogo = ( props: React.SVGProps< SVGSVGElement > ) => (
 		viewBox="0 0 183.6 47.5"
 		{ ...props }
 	>
+		<title>WooCommerce logo</title>


Should we translate it?

import { useI18n } from '@wordpress/react-i18n'; ... const { __ } = useI18n(); ... <title>{ __('WooCommerce logo') }</title> ...

If we remove "logo" as suggested in #103800 (comment), it would probably be wise to leave it untranslated as a brand name.

sejas · 2025-06-03T13:51:23Z

packages/plans-grid-next/src/components/comparison-grid/index.tsx

 				key="feature-name"
 				className="is-feature-group-row-title-cell"
 				isFeatureGroupRowTitleCell
+				{ ...{ scope: 'row' } }
+				aria-label={ ( feature?.getTitle?.() as string ) || '' }


Can we move the aria-label into a variable and check if getTitle returns a string, and if not fallback to a string or the empty string ?

sejas · 2025-06-03T13:52:41Z

packages/plans-grid-next/src/components/comparison-grid/index.tsx

 				key="feature-name"
 				className="is-feature-group-row-title-cell"
 				isFeatureGroupRowTitleCell
+				{ ...{ scope: 'row' } }


Would be possible to declare RowTitleCell as styled.th ? That way we wouldn't need to override the element with as and then we could pass the prop/attribute scope="row" without destructuring the object.

If we use two different elements with the same style, we reuse the styles like:
const RowTitleCellBody = styled.td( RowTitleCell );

That's a nice suggestion!
I tried with your suggestion and the style broke.
Duplicating the styled component definition worked.

aduth · 2025-06-03T14:25:56Z

packages/components/src/logos/woo-logo/index.tsx

@@ -11,6 +11,7 @@ export const WooLogo = ( props: React.SVGProps< SVGSVGElement > ) => (
 		viewBox="0 0 183.6 47.5"
 		{ ...props }
 	>
+		<title>WooCommerce logo</title>


There's a related effort DS-216 to standardize all of our logos. I think this addition is consistent with that (using title for text alternative), but we may want to leave out the word "logo" for consistency and to avoid redundancies.

Suggested change

<title>WooCommerce logo</title>

<title>WooCommerce</title>

bcotrim · 2025-06-03T16:37:55Z

@sejas @aduth thanks for the reviews!
I've updated the code, please let me know if everything looks good now

bcotrim added 2 commits May 29, 2025 11:31

improve voiceover navigation on the plan comparison step

ea347e2

plans table a11y

ca17bbf

bcotrim requested a review from a team as a code owner May 29, 2025 10:59

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 29, 2025

bcotrim self-assigned this May 29, 2025

bcotrim requested a review from a team May 29, 2025 11:00

epeicher approved these changes May 30, 2025

View reviewed changes

improve header logos a11y

d0b5419

bcotrim requested a review from a team as a code owner June 3, 2025 08:58

sejas reviewed Jun 3, 2025

View reviewed changes

aduth reviewed Jun 3, 2025

View reviewed changes

fix table errors and logo adjustments

627370a

bcotrim requested a review from sejas June 3, 2025 16:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Improve voiceover navigation on the plan comparison step #103800

Improve voiceover navigation on the plan comparison step #103800

bcotrim commented May 29, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 29, 2025 •

edited by matticbot

Loading

Uh oh!

matticbot commented May 29, 2025 •

edited

Loading

Uh oh!

matticbot commented May 29, 2025 •

edited

Loading

Uh oh!

epeicher left a comment

Uh oh!

katinthehatsite commented Jun 2, 2025

Uh oh!

bcotrim commented Jun 3, 2025

Uh oh!

sejas left a comment

Uh oh!

sejas Jun 3, 2025

Uh oh!

aduth Jun 3, 2025

Uh oh!

sejas Jun 3, 2025

Uh oh!

sejas Jun 3, 2025

Uh oh!

bcotrim Jun 3, 2025

Uh oh!

aduth Jun 3, 2025

Uh oh!

bcotrim commented Jun 3, 2025

Uh oh!

Uh oh!

Improve voiceover navigation on the plan comparison step #103800

Are you sure you want to change the base?

Improve voiceover navigation on the plan comparison step #103800

Conversation

bcotrim commented May 29, 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 29, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

epeicher left a comment

Choose a reason for hiding this comment

Before

After

Uh oh!

katinthehatsite commented Jun 2, 2025

Uh oh!

bcotrim commented Jun 3, 2025

Uh oh!

sejas left a comment

Choose a reason for hiding this comment

Uh oh!

sejas Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

aduth Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

sejas Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

sejas Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

bcotrim Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

aduth Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

bcotrim commented Jun 3, 2025

Uh oh!

Uh oh!

bcotrim commented May 29, 2025 •

edited

Loading

github-actions bot commented May 29, 2025 •

edited by matticbot

Loading

matticbot commented May 29, 2025 •

edited

Loading

matticbot commented May 29, 2025 •

edited

Loading