feat: support prefers-reduced-motion across the library components#694
Merged
fateeand merged 2 commits intoJul 7, 2026
Merged
Conversation
fateeand
requested review from
TerranceKhumalo-absa,
korel-san and
lukasmatta
as code owners
Contributor
Coverage report for library
Test suite run success1948 tests passing in 55 suites. Report generated by 🧪jest coverage report action from d8db447 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds library-wide support for the prefers-reduced-motion user preference to reduce or eliminate UI motion for improved accessibility across cps-ui-kit.
Changes:
- Adds global reduced-motion CSS overrides and slows (instead of freezes) key progress/loader animations under reduced motion.
- Introduces a shared
motion-utilshelper and integrates reduced-motion timings into several Angular animation-based components (toast, dialog, tab group, sidebar menu, menu, expansion panel). - Adds/updates Jest setup and component/unit tests to validate reduced-motion behavior.
Reviewed changes
Copilot reviewed 25 out of 25 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| projects/cps-ui-kit/styles/styles.scss | Adds global @media (prefers-reduced-motion: reduce) overrides and zeroes motion CSS variables. |
| projects/cps-ui-kit/src/lib/utils/internal/motion-utils.ts | Introduces prefersReducedMotion() helper and a reduced-motion duration constant. |
| projects/cps-ui-kit/src/lib/utils/internal/motion-utils.spec.ts | Adds unit tests for the new motion utility. |
| projects/cps-ui-kit/src/lib/services/cps-notification/internal/components/cps-toast/cps-toast.component.ts | Parameterizes toast animation timings and resolves them based on reduced motion. |
| projects/cps-ui-kit/src/lib/services/cps-notification/internal/components/cps-toast/cps-toast.component.html | Passes resolved timing params into the toast animation binding. |
| projects/cps-ui-kit/src/lib/services/cps-notification/internal/components/cps-toast/cps-toast.component.spec.ts | Tests toast reduced-motion timing resolution. |
| projects/cps-ui-kit/src/lib/services/cps-dialog/internal/components/cps-dialog/cps-dialog.component.ts | Resolves dialog transition options based on reduced motion. |
| projects/cps-ui-kit/src/lib/services/cps-dialog/internal/components/cps-dialog/cps-dialog.component.html | Uses resolved transition options for dialog animations. |
| projects/cps-ui-kit/src/lib/services/cps-dialog/internal/components/cps-dialog/cps-dialog.component.spec.ts | Tests dialog reduced-motion transition behavior. |
| projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.ts | Adds reduced-motion-aware animation params for slide/fade tab transitions. |
| projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.html | Passes reduced-motion-aware params into tab content animations. |
| projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.spec.ts | Tests tab group reduced-motion timing resolution. |
| projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.ts | Adds reduced-motion-aware params for expand/collapse animation. |
| projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.html | Passes reduced-motion-aware params into sidebar menu label animations. |
| projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.spec.ts | Tests sidebar menu reduced-motion transition behavior. |
| projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.scss | Slows indeterminate linear progress animation under reduced motion. |
| projects/cps-ui-kit/src/lib/components/cps-progress-circular/cps-progress-circular.component.scss | Slows circular progress animation under reduced motion. |
| projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.ts | Uses reduced-motion-aware show/hide transition options for menu overlay animation. |
| projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.html | Passes reduced-motion-aware transition params into menu animation binding. |
| projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.spec.ts | Tests menu reduced-motion transition behavior. |
| projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.scss | Slows loader animations under reduced motion. |
| projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.ts | Applies reduced-motion timing to expansion/collapse animations and updates DI style. |
| projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.html | Passes reduced-motion transition params into expansion panel header animation binding. |
| projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.spec.ts | Tests expansion panel reduced-motion transition behavior. |
| jest-setup.ts | Adds a window.matchMedia polyfill for Jest tests. |
Contributor
Playwright test results
Details
|
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
korel-san
approved these changes
Jul 7, 2026
fateeand
deleted the
664-support-prefers-reduced-motion-across-the-library-components
branch
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
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.
Overview
Some users experience discomfort, dizziness, or motion sensitivity from UI animations. Supporting
prefers-reduced-motionimproves accessibility, aligns with WCAG guidance and platform accessibility settings, and ensures our components respect user preferences consistently across applications.This PR adds support for the
prefers-reduced-motionaccessibility preference throughout thecps-ui-kitcomponent library, so animations and transitions are reduced or removed for users who have this OS-level setting enabled.