Add support for reduced motion/disable animations on the web#180041
Conversation
There was a problem hiding this comment.
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
left a comment
There was a problem hiding this comment.
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!
…features with its value.
… class on the file
…ctor to a more appropriate location.
b0f252b to
5f5a89f
Compare
|
I removed the |
|
I learned that there's some rendering emulation features on Chrome DevTools that make testing the app I linked above a breeze. TL;DR:
The same approach works for all the media-queries affected by this change, which is nice! |
…#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

This PR listens to changes to the value of the
(prefers-reduced-motion: reduce)media query to update thereduceMotionanddisableAnimationsproperties of theAccessibilityFeaturesconfiguration object.This is achieved by introducing a new
MediaQueryManagerobject to theEnginePlatformDispatcherthat 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.dartfile.Issues
Testing
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-assistbot 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.