Skip to content

Add support for reduced motion/disable animations on the web#180041

Merged
auto-submit[bot] merged 7 commits into
flutter:masterfrom
ditman:reduced-motion
Jan 14, 2026
Merged

Add support for reduced motion/disable animations on the web#180041
auto-submit[bot] merged 7 commits into
flutter:masterfrom
ditman:reduced-motion

Conversation

@ditman

@ditman ditman commented Dec 18, 2025

Copy link
Copy Markdown
Member

This PR listens to changes to the value of the (prefers-reduced-motion: reduce) media query to update the reduceMotion and disableAnimations properties of the AccessibilityFeatures configuration object.

This is achieved by introducing a new MediaQueryManager object to the EnginePlatformDispatcher that handles handles all the engine configuration values that are driven by media queries: "reduced motion", "high contrast" and "dark mode".

Unifying the code paths of all these values, allows this PR to slightly increase testing coverage of those values, by injecting fake browser events in the platform_dispatcher_test.dart file.

Issues

Testing

  • Added browser tests for new (and existing) media-queries
  • Deployed test app to: https://dit-tests.web.app (may get offline!)

Pre-launch Checklist

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the gemini-code-assist bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.

@github-actions github-actions Bot added engine flutter/engine related. See also e: labels. platform-web Web applications specifically labels Dec 18, 2025

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code Review

This pull request adds support for the prefers-reduced-motion media query on the web by introducing a MediaQueryManager to handle media query listeners. The existing dark mode logic is refactored to use this new manager. My review focuses on the implementation of the new MediaQueryManager and its tests. I've identified a potential issue in addListener that could lead to inefficiency and bugs, and a minor issue in the test setup. Overall, the changes are well-structured and address the issue effectively.

@mdebbar mdebbar left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

All my comments are minor suggestions that can be ignored, but Gemini's comment deserves to be addressed IMO.

Thanks for the clean MediaQueryManager idea!

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/platform_dispatcher.dart Outdated
Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/platform_dispatcher.dart Outdated

@ditman ditman left a comment

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

PTAL @mdebbar!

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/high_contrast.dart Outdated

@mdebbar mdebbar left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/high_contrast.dart Outdated
@ditman

ditman commented Jan 13, 2026

Copy link
Copy Markdown
Member Author

I removed the HighContrastSupport singleton, and moved the high_contrast.dart file to platform_dispatcher/system_color_palette_detector.dart that more accurately reflects what's going on now.

@ditman ditman requested a review from mdebbar January 13, 2026 21:29
@ditman

ditman commented Jan 13, 2026

Copy link
Copy Markdown
Member Author

I learned that there's some rendering emulation features on Chrome DevTools that make testing the app I linked above a breeze. TL;DR:

To enable forced colors in Chrome for testing, use the DevTools Rendering tab (Cmd+Shift+P, type "Rendering") and select "Emulate CSS media feature forced-colors: active" from the dropdown, which simulates Windows High Contrast mode for web developers; for general users, macOS accessibility features like Increased Contrast or Invert Colors provide system-level forced colors, but Chrome's emulation is separate for developers to see how sites adapt.

The same approach works for all the media-queries affected by this change, which is nice!

@ditman ditman added the autosubmit Merge PR when tree becomes green via auto submit App label Jan 14, 2026
@auto-submit auto-submit Bot added this pull request to the merge queue Jan 14, 2026
Merged via the queue into flutter:master with commit c62f889 Jan 14, 2026
178 of 179 checks passed
@flutter-dashboard flutter-dashboard Bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Jan 14, 2026
patrickBillingsley pushed a commit to patrickBillingsley/flutter that referenced this pull request Jan 14, 2026
…#180041)

This PR listens to changes to the value of the `(prefers-reduced-motion:
reduce)` media query to update the `reduceMotion` and
`disableAnimations` properties of the `AccessibilityFeatures`
configuration object.

This is achieved by introducing a new `MediaQueryManager` object to the
`EnginePlatformDispatcher` that handles handles all the engine
configuration values that are driven by media queries: "reduced motion",
"high contrast" and "dark mode".

Unifying the code paths of all these values, allows this PR to slightly
increase testing coverage of those values, by injecting fake browser
events in the `platform_dispatcher_test.dart` file.

### Issues

* Fixes flutter#167566

### Testing

* Added browser tests for new (and existing) media-queries
* Deployed test app to: https://dit-tests.web.app (may get offline!)

## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

**Note**: The Flutter team is currently trialing the use of [Gemini Code
Assist for
GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code).
Comments from the `gemini-code-assist` bot should not be taken as
authoritative feedback from the Flutter team. If you find its comments
useful you can update your code accordingly, but if you are unsure or
disagree with the feedback, please feel free to wait for a Flutter team
member's review for guidance on which automated comments should be
addressed.

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

engine flutter/engine related. See also e: labels. platform-web Web applications specifically

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Reduced Motion Mode - disableAnimations not toggled for Web builds

2 participants