feat: add support for reduced motion (#1095)

Makes it so that we disable all animations if the user prefers reduced motion.
angular · Nov 10, 2021 · 856a03f · 856a03f
1 parent 3ad38c6
commit 856a03f
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 6 deletions.
diff --git a/material.angular.io/src/app/app-module.ts b/material.angular.io/src/app/app-module.ts
@@ -9,10 +9,13 @@ import {MATERIAL_DOCS_ROUTES} from './routes';
 import {NavBarModule} from './shared/navbar';
 import {CookiePopupModule} from './shared/cookie-popup/cookie-popup-module';
 
+const prefersReducedMotion = typeof matchMedia === 'function' ?
+  matchMedia('(prefers-reduced-motion)').matches : false;
+
 @NgModule({
   imports: [
     BrowserModule,
-    BrowserAnimationsModule,
+    BrowserAnimationsModule.withConfig({disableAnimations: prefersReducedMotion}),
     RouterModule.forRoot(MATERIAL_DOCS_ROUTES, {
       scrollPositionRestoration: 'enabled',
       anchorScrolling: 'enabled',

diff --git a/material.angular.io/src/app/pages/homepage/homepage.scss b/material.angular.io/src/app/pages/homepage/homepage.scss
@@ -181,6 +181,10 @@ $margin-promotion-sections-small: 15px;
     img {
       transition: 0.3s ease-in-out;
       width: 100%;
+
+      :host(.animations-disabled) & {
+        transition: none;
+      }
     }
 
     &:hover, &:focus {

diff --git a/material.angular.io/src/app/pages/homepage/homepage.ts b/material.angular.io/src/app/pages/homepage/homepage.ts
@@ -1,4 +1,5 @@
-import {Component, HostBinding, NgModule, OnInit} from '@angular/core';
+import {Component, HostBinding, Inject, NgModule, OnInit, Optional} from '@angular/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {MatButtonModule} from '@angular/material/button';
 import {FooterModule} from '../../shared/footer/footer';
@@ -18,13 +19,19 @@ const TOP_COMPONENTS = ['datepicker', 'input', 'slide-toggle', 'slider', 'button
 @Component({
   selector: 'app-homepage',
   templateUrl: './homepage.html',
-  styleUrls: ['./homepage.scss']
+  styleUrls: ['./homepage.scss'],
 })
 export class Homepage implements OnInit {
   @HostBinding('class.main-content') readonly mainContentClass = true;
+  @HostBinding('class.animations-disabled') readonly animationsDisabled: boolean;
+
   isNextVersion = location.hostname.startsWith('next.material.angular.io');
 
-  constructor(public _componentPageTitle: ComponentPageTitle, public guideItems: GuideItems) {
+  constructor(
+    public _componentPageTitle: ComponentPageTitle,
+    public guideItems: GuideItems,
+    @Optional() @Inject(ANIMATION_MODULE_TYPE) animationsModule?: string) {
+    this.animationsDisabled = animationsModule === 'NoopAnimations';
   }
 
   ngOnInit(): void {

diff --git a/material.angular.io/src/app/shared/carousel/carousel.scss b/material.angular.io/src/app/shared/carousel/carousel.scss
@@ -8,6 +8,10 @@ app-carousel {
   flex-direction: row;
   outline: none;
   transition: transform 0.5s ease-in-out;
+
+  .animations-disabled & {
+    transition: none;
+  }
 }
 
 .docs-carousel-content-wrapper {

diff --git a/material.angular.io/src/app/shared/carousel/carousel.ts b/material.angular.io/src/app/shared/carousel/carousel.ts
@@ -5,13 +5,16 @@ import {
   Directive,
   ElementRef,
   HostBinding,
+  Inject,
   Input,
+  Optional,
   QueryList,
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
 import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y';
 import {LEFT_ARROW, RIGHT_ARROW, TAB} from '@angular/cdk/keycodes';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 @Directive({
@@ -38,6 +41,7 @@ export class Carousel implements AfterContentInit {
   @Input('aria-label') ariaLabel: string | undefined;
   @ContentChildren(CarouselItem) items!: QueryList<CarouselItem>;
   @ViewChild('list') list!: ElementRef<HTMLElement>;
+  @HostBinding('class.animations-disabled') readonly animationsDisabled: boolean;
   position = 0;
   showPrevArrow = false;
   showNextArrow = true;
@@ -66,6 +70,10 @@ export class Carousel implements AfterContentInit {
     }
   }
 
+  constructor(@Optional() @Inject(ANIMATION_MODULE_TYPE) animationsModule?: string) {
+    this.animationsDisabled = animationsModule === 'NoopAnimations';
+  }
+
   ngAfterContentInit(): void {
     this._keyManager = new FocusKeyManager<CarouselItem>(this.items);
   }

diff --git a/material.angular.io/src/app/shared/table-of-contents/_table-of-contents-theme.scss b/material.angular.io/src/app/shared/table-of-contents/_table-of-contents-theme.scss
@@ -14,7 +14,6 @@
 
     .docs-link {
       color: mat.get-color-from-palette($foreground, secondary-text);
-      transition: color 100ms;
 
       &:hover,
       &.docs-active {

diff --git a/material.angular.io/src/app/shared/version-picker/version-picker.html b/material.angular.io/src/app/shared/version-picker/version-picker.html
@@ -3,7 +3,7 @@
   {{materialVersion}}
   <mat-icon>arrow_drop_down</mat-icon>
 </button>
-<mat-menu #versionPicker="matMenu">
+<mat-menu #versionPicker="matMenu" xPosition="before">
   <button mat-menu-item *ngFor="let version of docVersions | async"
           (click)="onVersionChanged(version)">
     {{version.title}}