Skip to content

Experience Control: Improve accessibility and minor refactoring #103000

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: trunk
Choose a base branch
from

Conversation

yashwin
Copy link
Contributor

@yashwin yashwin commented Apr 30, 2025

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

  1. VoiceOver when the emojis are focused. You can use System settings > Accessibility > VoiceOver
  2. 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)?

@yashwin yashwin requested review from mirka, madebynoam and a team April 30, 2025 09:45
@yashwin yashwin self-assigned this Apr 30, 2025
@matticbot 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
Copy link

github-actions bot commented Apr 30, 2025

@matticbot
Copy link
Contributor

matticbot commented Apr 30, 2025

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
Copy link
Contributor

matticbot commented Apr 30, 2025

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.

Copy link
Contributor

@madebynoam madebynoam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great details! Ty, @yashwin ! Lgtm!

@mirka
Copy link
Member

mirka commented May 1, 2025

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.

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

ciampo commented May 8, 2025

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
Copy link
Member

mirka commented May 9, 2025

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
Copy link
Member

simison commented May 9, 2025

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

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 yashwin force-pushed the update/experience-control-component branch 2 times, most recently from e2c4506 to b49d4a8 Compare May 13, 2025 07:46
@yashwin yashwin requested a review from a team as a code owner May 13, 2025 07:47
@yashwin
Copy link
Contributor Author

yashwin commented May 13, 2025

@mirka:

Thanks for the feedback! 🙇

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

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

@mirka mirka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@yashwin
Copy link
Contributor Author

yashwin commented Jun 5, 2025

Thanks for the review, @mirka!

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

Copy link
Member

mirka commented Jun 5, 2025

Yes, go ahead 👍

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

mirka commented Jun 6, 2025

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

@mirka mirka mentioned this pull request Jun 6, 2025
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A8c Agencies [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants