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 {