-
Notifications
You must be signed in to change notification settings - Fork 620
Add support for reduced-motion on opacity animations #6323
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
Conversation
🦋 Changeset detectedLatest commit: 21d23de The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks! |
size-limit report 📦
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR adds support for prefers-reduced-motion
accessibility preference to disable opacity animations in TooltipV2
and Overlay
components. This improves accessibility for users who prefer reduced motion due to vestibular disorders or other motion sensitivities.
- Wraps CSS animations in media queries to respect user's reduced motion preferences
- Updates visual regression tests to use
reducedMotion: 'reduce'
for consistent screenshots - Removes problematic fetch-related visual tests that were causing flaky results
Reviewed Changes
Copilot reviewed 4 out of 22 changed files in this pull request and generated 1 comment.
File | Description |
---|---|
packages/react/src/TooltipV2/Tooltip.module.css | Wraps animation styles in prefers-reduced-motion media query |
packages/react/src/Overlay/Overlay.module.css | Moves overlay animation inside prefers-reduced-motion media query |
e2e/components/TooltipV2.test.ts | Updates visual tests to use reducedMotion emulation |
e2e/components/SelectPanel.test.ts | Updates visual tests and excludes fetch-related stories |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These seem like good changes, though I do wonder if this issue will come up again since we're mostly relying on changes to the components to fix it. Not all animations really need to be gated by that media query but I suppose it doesn't hurt!
Agreed. I don't love that we have to update the components to account for it -- I'm working on a small repro example to send over to playwright and hopefully get a real fix in. |
Closes https://github.com/github/primer/issues/5419
reduced-motion
that disables the opacity animations forTooltipV2
andOverlay
(used by the Select Panel).*-fetch
SelectPanel visual testsreduced-motion
in the playwright visual tests to avoid flaky screenshots related to CSS animations.Changelog
Changed
Removes opacity animations from
TooltipV2
andOverlay
whenprefers-reduced-motion
is enabledRollout strategy
Testing & Reviewing
Check the
Tooltip
andOverlay
(Select Panel) components behave identically (without settingprefers-reduced-motion
).To test w/ reduced-motion in Chrome:
CMD + Shift + P
to open the run menureduced
Emulate CSS prefers-reduced-motion: reduce
Merge checklist