feat(material/core): handle prefers-reduced-motion automatically (#30796)

Adds some logic so that animations automatically get disabled if the `prefers-reduced-motion` media query matches.

Author: crisbeto

goldens/material/core/index.api.md

@@ -53,7 +53,7 @@ export class AnimationDurations {
 
 // @public
 export interface AnimationsConfig {
-    animationsDisabled: boolean;
+    animationsDisabled?: boolean;
 }
 
 // @public

src/material/core/animation/BUILD.bazel

@@ -7,5 +7,6 @@ ng_project(
     srcs = ["animation.ts"],
     deps = [
         "//:node_modules/@angular/core",
+        "//src/cdk/layout",
     ],
 )

src/material/core/animation/animation.ts

@@ -6,12 +6,13 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {MediaMatcher} from '@angular/cdk/layout';
 import {ANIMATION_MODULE_TYPE, inject, InjectionToken} from '@angular/core';
 
 /** Object used to configure the animation in Angular Material. */
 export interface AnimationsConfig {
   /** Whether all animations should be disabled. */
-  animationsDisabled: boolean;
+  animationsDisabled?: boolean;
 }
 
 /** Injection token used to configure the animations in Angular Material. */
@@ -45,11 +46,13 @@ export class AnimationDurations {
  * @docs-private
  */
 export function _animationsDisabled(): boolean {
-  const customToken = inject(MATERIAL_ANIMATIONS, {optional: true});
-
-  if (customToken) {
-    return customToken.animationsDisabled;
+  if (
+    inject(MATERIAL_ANIMATIONS, {optional: true})?.animationsDisabled ||
+    inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations'
+  ) {
+    return true;
   }
 
-  return inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations';
+  const mediaMatcher = inject(MediaMatcher);
+  return mediaMatcher.matchMedia('(prefers-reduced-motion)').matches;
 }