feat: Add Play/Pause toggle button for Icon Cloud component so that satisfies WCAG G186#991
Merged
Merged
Conversation
Add a control button and a prop to toggle its visibility in the IconCloud component to meet accessibility standards.
Add icon-cloud-demo-4 to showcase the control button functionality. Update icon-cloud.mdx with 'With Control Button' section and showControl prop docs.
|
@510208 is attempting to deploy a commit to the product-studio Team on Vercel. A member of the Team first needs to authorize it. |
510208
marked this pull request as ready for review
July 21, 2026 13:40
510208
changed the title
Yeom-JinHo
self-requested a review
July 21, 2026 14:11
Yeom-JinHo
approved these changes
Jul 21, 2026
Yeom-JinHo
left a comment
Yeom-JinHo
left a comment
Member
There was a problem hiding this comment.
@510208
Thanks for the thoughtful accessibility work here! I've pushed a few follow-up commits to your branch to address some issues I found during review — the commit messages explain the reasoning for each.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The original Icon Cloud component did not provide a play/pause control button.
This pull request adds this functionality to comply with WCAG G186 (which requires dynamically updated components to provide a pause/update button to accessibility by people with disabilities).
Changes
showControlto select whether to show the button## With Control Buttonicon-cloud-demo-4to show the control button toggleMotivation
Currently, the Icon Cloud component auto-plays continuous animations without built-in control options. This presents an accessibility barrier for users with cognitive or visual impairments who require more time to inspect the icons, and it falls short of WCAG 2.1 Success Criterion 2.2.2 (Pause, Stop, Hide) and G186 techniques.
This PR introduces a Play/Pause control toggle to the component. This allows users to pause the rotation at any time, enhancing readability and ensuring the component meets standard accessibility requirements.
Breaking Changes
None.
This PR introduces an optional
showControlproperty, which is disabled by default. It does not introduce any breaking changes to existing implementations.Note
Enabling
showControlwill render an additional control element within the component interface. Users enabling this feature should verify that their custom layout accounts for the added element.Screenshots