Experience Control: Improve accessibility and minor refactoring #103000

yashwin · 2025-04-30T09:45:36Z

Closes https://github.com/Automattic/automattic-for-agencies-dev/issues/2112

Proposed Changes

This PR addressed the comments we received from @mirka on this PR that implemented the Experience Control on the Automattic package. We copied the initial implementation from the original PR, which wasn't accessibility-friendly. This PR addresses that issue.

Why are these changes being made?

To address some accessibility missed along with some refactoring.

Testing Instructions

Follow the instructions on the original PR: Implement Experience Control component #102700 and everything should work as expected.
Verify the accessibility changes work as expected:

VoiceOver when the emojis are focused. You can use System settings > Accessibility > VoiceOver
You can use the keyboard to navigate between emojis

Untitled.mov

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-04-30T09:45:50Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2025-04-30T09:47:07Z

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

Sections (~200 bytes added 📈 [gzipped])

name                       parsed_size           gzip_size
a8c-for-agencies-feedback       +855 B  (+0.4%)     +200 B  (+0.3%)

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

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.

matticbot · 2025-04-30T09:51:51Z

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 update/experience-control-component on your sandbox.

madebynoam

Great details! Ty, @yashwin ! Lgtm!

mirka · 2025-05-01T00:12:50Z

Thanks for the quick follow-up! I'm clarifying a few things first in the Figma thread (dhW7zYBamXJIeJIE3wy5f4-fi-111_846#1193979809) since this is the first time I'm seeing this discussion.

packages/components/src/experience-control/index.tsx

packages/components/src/experience-control/index.stories.tsx

packages/components/src/experience-control/icons.tsx

packages/components/src/experience-control/index.tsx

ciampo · 2025-05-08T20:59:29Z

Given that we're looking to release a new version of the components package soon (#103160), could it be wiser to remove ExperienceControl from the package exports so that we don't release a WIP component? cc @mirka @simison

mirka · 2025-05-09T07:36:39Z

Given that we're looking to release a new version of the components package soon (#103160), could it be wiser to remove ExperienceControl from the package exports so that we don't release a WIP component?

As a quick fix (?) I moved it to the Unaudited section in Storybook.

simison · 2025-05-09T07:41:11Z

Thanks @mirka ! I think that's enough, as the component is already imported here:

wp-calypso/client/a8c-for-agencies/components/a4a-feedback/index.tsx

Line 1 in 41cade2

import { FormLabel, ExperienceControl } from '@automattic/components';

Changelog doesn't mention ExperienceControl either, and considering the package is still in a very much "internal use" state, I think we can manage through internal communication that this component is in progress.

yashwin · 2025-05-13T07:48:33Z

@mirka:

Thanks for the feedback! 🙇

I have addressed all the comments:b49d4a8. Could you please take another look?

packages/components/src/experience-control/style.scss

mirka

I had some minor thoughts about implementation, but the accessibility issues are fixed 🎉

None of the notes are blockers, but we should probably fix the Storybook controlled mode issue since the stories currently look broken.

mirka · 2025-06-04T09:58:22Z

packages/components/src/experience-control/index.tsx

+	<label className={ clsx( 'a8c-experience-control__option', className ) }>
+		<input
+			type="radio"
+			className="a8c-experience-control__radio"


CSS is being written to hide this visually, but that can be done with a component like VisuallyHidden.

mirka · 2025-06-04T10:15:45Z

packages/components/src/experience-control/index.tsx

+	<label className={ clsx( 'a8c-experience-control__option', className ) }>
+		<input
+			type="radio"
+			className="a8c-experience-control__radio"
+			aria-label={ ariaLabel }
+			{ ...restProps }
+		/>
+		<div className="a8c-experience-control__option-label">{ label }</div>
+	</label>


The use of label and aria-label here are a bit unclear to me. label implies a string, and it's non-obvious whether label or aria-label is going to take precedence as the actual label of the input. Everything being wrapped in a <label> element also strongly implies that label is expected to be a text node, or at least have a text representation.

I can think of a few ways around this weirdness, for example we can expect the consumer to pass in an already accessibly-labeled label node, instead of a separate aria label that is passed on to the input.

Agree.

Do you think we can use icon instead of label something like:

const ExperienceControlOption = ( { className, icon, ariaLabel, ...restProps }: ExperienceControlOptionProps ) => ( <label className={ clsx( 'a8c-experience-control__option', className ) }> <VisuallyHidden> <input type="radio" aria-label={ ariaLabel } { ...restProps } /> </VisuallyHidden> <div className="a8c-experience-control__option-icon" aria-hidden="true"> { icon } </div> </label> );

Sure, that's probably fine for now, since we only have this one use case. In the future when this abstraction needs to support more use cases, it may be too limiting since it won't necessarily be an icon (e.g. an NPS selector where it's just plain text numbers). But we don't have to overthink it at this moment.

yashwin · 2025-06-05T13:48:03Z

Thanks for the review, @mirka!

Do you think we can now remove it from the Unaudited section?

mirka · 2025-06-05T17:08:05Z

Yes, go ahead 👍

mirka · 2025-06-06T17:42:44Z

I pushed a fix for the Storybook crashes. Looks like something changed in a recent update.

yashwin added the A8c Agencies label Apr 30, 2025

yashwin requested review from mirka, madebynoam and a team April 30, 2025 09:45

yashwin self-assigned this Apr 30, 2025

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Apr 30, 2025

yashwin mentioned this pull request Apr 30, 2025

Implement Experience Control component #102700

Merged

8 tasks

madebynoam approved these changes Apr 30, 2025

View reviewed changes

yashwin force-pushed the update/experience-control-component branch from 6687baf to d4e1eca Compare May 5, 2025 07:01

mirka reviewed May 6, 2025

View reviewed changes

yashwin force-pushed the update/experience-control-component branch 2 times, most recently from e2c4506 to b49d4a8 Compare May 13, 2025 07:46

yashwin requested a review from a team as a code owner May 13, 2025 07:47

aduth reviewed May 14, 2025

View reviewed changes

packages/components/src/experience-control/style.scss Outdated Show resolved Hide resolved

yashwin force-pushed the update/experience-control-component branch from b49d4a8 to 3229a5b Compare May 15, 2025 09:14

mirka approved these changes Jun 4, 2025

View reviewed changes

yashwin added 4 commits June 5, 2025 08:28

Experience Control: Improve accessibility and minor refactor

4b328a1

update type

151db8d

address comments

e2a7c05

Fix indentation

d86ed69

replace label with icon and use VisuallyHidden to hide the input

d4ff835

yashwin force-pushed the update/experience-control-component branch from 3229a5b to d4ff835 Compare June 6, 2025 06:09

Fix Storybook crash

6e42efd

mirka mentioned this pull request Jun 6, 2025

Storybook: Fix Overview doc #104049

Open

8 tasks

Experience Control: Improve accessibility and minor refactoring #103000

Are you sure you want to change the base?

Experience Control: Improve accessibility and minor refactoring #103000

Conversation

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

madebynoam left a comment

Choose a reason for hiding this comment

Uh oh!

mirka commented May 1, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ciampo commented May 8, 2025

Uh oh!

mirka commented May 9, 2025

Uh oh!

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

Uh oh!

Uh oh!

yashwin commented May 13, 2025

Uh oh!

Uh oh!

mirka left a comment

Choose a reason for hiding this comment

Uh oh!

mirka Jun 4, 2025

Choose a reason for hiding this comment

Uh oh!

mirka Jun 4, 2025

Choose a reason for hiding this comment

Uh oh!

yashwin Jun 5, 2025

Choose a reason for hiding this comment

Uh oh!

mirka Jun 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yashwin commented Jun 5, 2025

Uh oh!

mirka commented Jun 5, 2025

Uh oh!

mirka commented Jun 6, 2025

Uh oh!

Uh oh!

yashwin commented Apr 30, 2025 •

edited

Loading

github-actions bot commented Apr 30, 2025 •

edited by matticbot

Loading

matticbot commented Apr 30, 2025 •

edited

Loading

matticbot commented Apr 30, 2025 •

edited

Loading

simison commented May 9, 2025 •

edited

Loading

mirka Jun 5, 2025 •

edited

Loading