Merge branch 'master' into 10590/expansion-noop-animations

Author: crisbeto

src/cdk/a11y/live-announcer/live-announcer.ts

@@ -118,10 +118,15 @@ export class CdkAriaLive implements OnDestroy {
         this._subscription = null;
       }
     } else if (!this._subscription) {
-      this._subscription = this._ngZone.runOutsideAngular(
-          () => this._contentObserver.observe(this._elementRef).subscribe(
-              () => this._liveAnnouncer.announce(
-                  this._elementRef.nativeElement.innerText, this._politeness)));
+      this._subscription = this._ngZone.runOutsideAngular(() => {
+        return this._contentObserver
+          .observe(this._elementRef)
+          .subscribe(() => {
+            // Note that we use textContent here, rather than innerText, in order to avoid a reflow.
+            const element = this._elementRef.nativeElement;
+            this._liveAnnouncer.announce(element.textContent, this._politeness);
+          });
+      });
     }
   }
   private _politeness: AriaLivePoliteness = 'off';

src/cdk/overlay/overlay-directives.spec.ts

@@ -232,6 +232,15 @@ describe('Overlay directives', () => {
       expect(backdrop.classList).toContain('mat-test-class');
     });
 
+    it('should set the custom panel class', () => {
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      const panel
+        = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+      expect(panel.classList).toContain('cdk-test-panel-class');
+    });
+
     it('should set the offsetX', () => {
       fixture.componentInstance.offsetX = 5;
       fixture.componentInstance.isOpen = true;
@@ -478,6 +487,7 @@ describe('Overlay directives', () => {
             [cdkConnectedOverlayGrowAfterOpen]="growAfterOpen"
             [cdkConnectedOverlayPush]="push"
             cdkConnectedOverlayBackdropClass="mat-test-class"
+            cdkConnectedOverlayPanelClass="cdk-test-panel-class"
             (backdropClick)="backdropClickHandler($event)"
             [cdkConnectedOverlayOffsetX]="offsetX"
             [cdkConnectedOverlayOffsetY]="offsetY"

src/cdk/overlay/overlay-directives.ts

@@ -158,6 +158,9 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   /** The custom class to be set on the backdrop element. */
   @Input('cdkConnectedOverlayBackdropClass') backdropClass: string;
 
+  /** The custom class to add to the overlay pane element. */
+  @Input('cdkConnectedOverlayPanelClass') panelClass: string | string[];
+
   /** Margin between the overlay and the viewport edges. */
   @Input('cdkConnectedOverlayViewportMargin') viewportMargin: number = 0;
 
@@ -296,6 +299,10 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
       overlayConfig.backdropClass = this.backdropClass;
     }
 
+    if (this.panelClass) {
+      overlayConfig.panelClass = this.panelClass;
+    }
+
     return overlayConfig;
   }
 

src/cdk/testing/event-objects.ts

@@ -26,6 +26,10 @@ export function createMouseEvent(type: string, x = 0, y = 0, button = 0) {
     button, /* button */
     null /* relatedTarget */);
 
+  // `initMouseEvent` doesn't allow us to pass the `buttons` and
+  // defaults it to 0 which looks like a fake event.
+  Object.defineProperty(event, 'buttons', {get: () => 1});
+
   return event;
 }
 

src/lib/autocomplete/autocomplete-trigger.ts

@@ -618,20 +618,25 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
       .withFlexibleDimensions(false)
       .withPush(false)
       .withPositions([
-        {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},
-        {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}
+        {
+          originX: 'start',
+          originY: 'bottom',
+          overlayX: 'start',
+          overlayY: 'top'
+        },
+        {
+          originX: 'start',
+          originY: 'top',
+          overlayX: 'start',
+          overlayY: 'bottom',
+
+          // The overlay edge connected to the trigger should have squared corners, while
+          // the opposite end has rounded corners. We apply a CSS class to swap the
+          // border-radius based on the overlay position.
+          panelClass: 'mat-autocomplete-panel-above'
+        }
       ]);
 
-    // The overlay edge connected to the trigger should have squared corners, while
-    // the opposite end has rounded corners. We apply a CSS class to swap the
-    // border-radius based on the overlay position.
-    this._positionStrategy.positionChanges.subscribe(({connectionPair}) => {
-      if (this.autocomplete) {
-        this.autocomplete._classList['mat-autocomplete-panel-above'] =
-            connectionPair.originY === 'top';
-      }
-    });
-
     return this._positionStrategy;
   }
 

src/lib/autocomplete/autocomplete.scss

@@ -26,13 +26,14 @@ $mat-autocomplete-panel-border-radius: 4px !default;
     visibility: hidden;
   }
 
+  .mat-autocomplete-panel-above & {
+    border-radius: 0;
+    border-top-left-radius: $mat-autocomplete-panel-border-radius;
+    border-top-right-radius: $mat-autocomplete-panel-border-radius;
+  }
+
   @include cdk-high-contrast {
     outline: solid 1px;
   }
 }
 
-.mat-autocomplete-panel-above {
-  border-radius: 0;
-  border-top-left-radius: $mat-autocomplete-panel-border-radius;
-  border-top-right-radius: $mat-autocomplete-panel-border-radius;
-}

src/lib/autocomplete/autocomplete.spec.ts

@@ -1441,8 +1441,7 @@ describe('MatAutocomplete', () => {
       expect(Math.floor(inputTop))
           .toEqual(Math.floor(panelBottom), `Expected panel to fall back to above position.`);
 
-      expect(panel.querySelector('.mat-autocomplete-panel')!.classList)
-          .toContain('mat-autocomplete-panel-above');
+      expect(panel.classList).toContain('mat-autocomplete-panel-above');
     }));
 
     it('should allow the panel to expand when the number of results increases', fakeAsync(() => {

src/lib/button-toggle/button-toggle.spec.ts

@@ -277,6 +277,15 @@ describe('MatButtonToggle without forms', () => {
       expect(buttonToggleInstances[0].checked).toBe(true);
     });
 
+    it('should set aria-disabled based on whether the group is disabled', () => {
+      expect(groupNativeElement.getAttribute('aria-disabled')).toBe('false');
+
+      testComponent.isGroupDisabled = true;
+      fixture.detectChanges();
+
+      expect(groupNativeElement.getAttribute('aria-disabled')).toBe('true');
+    });
+
     it('should update the group value when one of the toggles changes', () => {
       expect(groupInstance.value).toBeFalsy();
       buttonToggleLabelElements[0].click();

src/lib/button-toggle/button-toggle.ts

@@ -85,6 +85,7 @@ export class MatButtonToggleChange {
   host: {
     'role': 'group',
     'class': 'mat-button-toggle-group',
+    '[attr.aria-disabled]': 'disabled',
     '[class.mat-button-toggle-vertical]': 'vertical'
   },
   exportAs: 'matButtonToggleGroup',
@@ -98,7 +99,7 @@ export class MatButtonToggleGroup extends _MatButtonToggleGroupMixinBase impleme
 
   /**
    * Reference to the raw value that the consumer tried to assign. The real
-   * value will exaclude any values from this one that don't correspond to a
+   * value will exclude any values from this one that don't correspond to a
    * toggle. Useful for the cases where the value is assigned before the toggles
    * have been initialized or at the same that they're being swapped out.
    */

src/lib/chips/chips.scss

@@ -151,6 +151,10 @@ $mat-chip-remove-size: 18px;
   align-items: center;
   display: flex;
   overflow: hidden;
+
+  // Makes `<img>` tags behave like `background-size: cover`. Not supported
+  // in IE, but we're using it as a progressive enhancement.
+  object-fit: cover;
 }
 
 input.mat-chip-input {

src/lib/core/BUILD.bazel

@@ -17,6 +17,7 @@ ng_module(
     ":option/optgroup.css",
   ] + glob(["**/*.html"]),
   deps = [
+    "//src/cdk/a11y",
     "//src/cdk/bidi",
     "//src/cdk/coercion",
     "//src/cdk/keycodes",

src/lib/core/ripple/ripple-renderer.ts

@@ -7,6 +7,7 @@
  */
 import {ElementRef, NgZone} from '@angular/core';
 import {Platform, supportsPassiveEventListeners} from '@angular/cdk/platform';
+import {isFakeMousedownFromScreenReader} from '@angular/cdk/a11y';
 import {RippleRef, RippleState} from './ripple-ref';
 
 export type RippleConfig = {
@@ -246,10 +247,13 @@ export class RippleRenderer {
 
   /** Function being called whenever the trigger is being pressed using mouse. */
   private onMousedown = (event: MouseEvent) => {
+    // Screen readers will fire fake mouse events for space/enter. Skip launching a
+    // ripple in this case for consistency with the non-screen-reader experience.
+    const isFakeMousedown = isFakeMousedownFromScreenReader(event);
     const isSyntheticEvent = this._lastTouchStartEvent &&
         Date.now() < this._lastTouchStartEvent + ignoreMouseEventsTimeout;
 
-    if (!this._target.rippleDisabled && !isSyntheticEvent) {
+    if (!this._target.rippleDisabled && !isFakeMousedown && !isSyntheticEvent) {
       this._isPointerDown = true;
       this.fadeInRipple(event.clientX, event.clientY, this._target.rippleConfig);
     }

src/lib/core/ripple/ripple.spec.ts

@@ -6,6 +6,7 @@ import {
   createTouchEvent,
   dispatchMouseEvent,
   dispatchTouchEvent,
+  createMouseEvent,
 } from '@angular/cdk/testing';
 import {defaultRippleAnimationConfig, RippleAnimationConfig} from './ripple-renderer';
 import {
@@ -166,6 +167,15 @@ describe('MatRipple', () => {
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
     }));
 
+    it('should ignore fake mouse events from screen readers', () => fakeAsync(() => {
+      const event = createMouseEvent('mousedown');
+      Object.defineProperty(event, 'buttons', {get: () => 0});
+
+      dispatchEvent(rippleTarget, event);
+      tick(enterDuration);
+      expect(rippleTarget.querySelector('.mat-ripple-element')).toBeFalsy();
+    }));
+
     it('removes ripple after timeout', fakeAsync(() => {
       dispatchMouseEvent(rippleTarget, 'mousedown');
       dispatchMouseEvent(rippleTarget, 'mouseup');

src/lib/datepicker/calendar-body.ts

@@ -42,7 +42,7 @@ export class MatCalendarCell {
   host: {
     'class': 'mat-calendar-body',
     'role': 'grid',
-    'attr.aria-readonly': 'true'
+    'aria-readonly': 'true'
   },
   exportAs: 'matCalendarBody',
   encapsulation: ViewEncapsulation.None,

src/lib/expansion/accordion-base.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {InjectionToken} from '@angular/core';
+import {CdkAccordion} from '@angular/cdk/accordion';
+
+/** MatAccordion's display modes. */
+export type MatAccordionDisplayMode = 'default' | 'flat';
+
+/**
+ * Base interface for a `MatAccordion`.
+ * @docs-private
+ */
+export interface MatAccordionBase extends CdkAccordion {
+  /** Whether the expansion indicator should be hidden. */
+  hideToggle: boolean;
+
+  /** Display mode used for all expansion panels in the accordion. */
+  displayMode: MatAccordionDisplayMode;
+
+  /** Handles keyboard events coming in from the panel headers. */
+  _handleHeaderKeydown: (event: KeyboardEvent) => void;
+
+  /** Handles focus events on the panel headers. */
+  _handleHeaderFocus: (header: any) => void;
+}
+
+
+/**
+ * Token used to provide a `MatAccordion` to `MatExpansionPanel`.
+ * Used primarily to avoid circular imports between `MatAccordion` and `MatExpansionPanel`.
+ */
+export const MAT_ACCORDION = new InjectionToken<MatAccordionBase>('MAT_ACCORDION');