fixup! feat(material-experimental): MDC-based version of dialog

Sync with changes in non-MDC dialog

Author: devversion

src/material-experimental/mdc-dialog/BUILD.bazel

@@ -61,6 +61,7 @@ ng_test_library(
     ),
     deps = [
         ":mdc-dialog",
+        "//src/cdk/a11y",
         "//src/cdk/bidi",
         "//src/cdk/keycodes",
         "//src/cdk/overlay",

src/material-experimental/mdc-dialog/dialog-container.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {FocusTrapFactory} from '@angular/cdk/a11y';
+import {FocusMonitor, FocusTrapFactory} from '@angular/cdk/a11y';
 import {DOCUMENT} from '@angular/common';
 import {
   AfterViewInit,
@@ -70,8 +70,9 @@ export class MatDialogContainer extends _MatDialogContainerBase implements
       @Optional() @Inject(DOCUMENT) document: any,
       config: MatDialogConfig,
       private _ngZone: NgZone,
-      @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string) {
-    super(elementRef, focusTrapFactory, changeDetectorRef, document, config);
+      @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string,
+      focusMonitor?: FocusMonitor) {
+    super(elementRef, focusTrapFactory, changeDetectorRef, document, config, focusMonitor);
   }
 
   ngAfterViewInit() {

src/material-experimental/mdc-dialog/dialog-content-directives.ts

@@ -15,6 +15,7 @@ import {
   Optional,
   SimpleChanges,
 } from '@angular/core';
+import {_closeDialogVia} from '@angular/material/dialog';
 
 import {MatDialog} from './dialog';
 import {MatDialogRef} from './dialog-ref';
@@ -29,7 +30,7 @@ let dialogElementUid = 0;
   selector: '[mat-dialog-close], [matDialogClose]',
   exportAs: 'matDialogClose',
   host: {
-    '(click)': 'dialogRef.close(dialogResult)',
+    '(click)': '_onButtonClick($event)',
     '[attr.aria-label]': 'ariaLabel || null',
     '[attr.type]': 'type',
   }
@@ -68,6 +69,15 @@ export class MatDialogClose implements OnInit, OnChanges {
       this.dialogResult = proxiedChange.currentValue;
     }
   }
+
+  _onButtonClick(event: MouseEvent) {
+    // Determinate the focus origin using the click event, because using the FocusMonitor will
+    // result in incorrect origins. Most of the time, close buttons will be auto focused in the
+    // dialog, and therefore clicking the button won't result in a focus change. This means that
+    // the FocusMonitor won't detect any origin change, and will always output `program`.
+    _closeDialogVia(this.dialogRef,
+      event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);
+  }
 }
 
 /**

src/material-experimental/mdc-dialog/dialog.spec.ts

@@ -1,11 +1,14 @@
+import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {Directionality} from '@angular/cdk/bidi';
 import {A, ESCAPE} from '@angular/cdk/keycodes';
 import {Overlay, OverlayContainer, ScrollStrategy} from '@angular/cdk/overlay';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
 import {
   createKeyboardEvent,
   dispatchEvent,
-  dispatchKeyboardEvent
+  dispatchKeyboardEvent,
+  dispatchMouseEvent,
+  patchElementFocus
 } from '@angular/cdk/testing/private';
 import {Location} from '@angular/common';
 import {SpyLocation} from '@angular/common/testing';
@@ -52,6 +55,7 @@ describe('MDC-based dialog', () => {
   let testViewContainerRef: ViewContainerRef;
   let viewContainerFixture: ComponentFixture<ComponentWithChildViewContainer>;
   let mockLocation: SpyLocation;
+  let focusMonitor: FocusMonitor;
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
@@ -69,12 +73,13 @@ describe('MDC-based dialog', () => {
   }));
 
   beforeEach(inject(
-      [MatDialog, Location, OverlayContainer],
-      (d: MatDialog, l: Location, oc: OverlayContainer) => {
+      [MatDialog, Location, OverlayContainer, FocusMonitor],
+      (d: MatDialog, l: Location, oc: OverlayContainer, fm: FocusMonitor) => {
         dialog = d;
         mockLocation = l as SpyLocation;
         overlayContainer = oc;
         overlayContainerElement = oc.getContainerElement();
+        focusMonitor = fm;
       }));
 
   afterEach(() => {
@@ -895,6 +900,34 @@ describe('MDC-based dialog', () => {
 
          expect(document.activeElement).toBe(input, 'Expected input to stay focused after click');
        }));
+
+    it('should recapture focus to the container when clicking on the backdrop with ' +
+      'autoFocus disabled', fakeAsync(() => {
+      dialog.open(PizzaMsg, {
+        disableClose: true,
+        viewContainerRef: testViewContainerRef,
+        autoFocus: false
+      });
+
+      viewContainerFixture.detectChanges();
+      flushMicrotasks();
+
+      let backdrop =
+        overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+      let container =
+        overlayContainerElement.querySelector('.mat-mdc-dialog-container') as HTMLInputElement;
+
+      expect(document.activeElement).toBe(container, 'Expected container to be focused on open');
+
+      container.blur(); // Programmatic clicks might not move focus so we simulate it.
+      backdrop.click();
+      viewContainerFixture.detectChanges();
+      flush();
+
+      expect(document.activeElement)
+        .toBe(container, 'Expected container to stay focused after click');
+    }));
+
   });
 
   describe('hasBackdrop option', () => {
@@ -970,6 +1003,147 @@ describe('MDC-based dialog', () => {
          expect(document.activeElement!.tagName).not.toBe('INPUT');
        }));
 
+    it('should re-focus the trigger via keyboard when closed via escape key', fakeAsync(() => {
+      const button = document.createElement('button');
+      let lastFocusOrigin: FocusOrigin = null;
+
+      focusMonitor.monitor(button, false)
+        .subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
+
+      document.body.appendChild(button);
+      button.focus();
+
+      // Patch the element focus after the initial and real focus, because otherwise the
+      // `activeElement` won't be set, and the dialog won't be able to restore focus to an element.
+      patchElementFocus(button);
+
+      dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+
+      tick(500);
+      viewContainerFixture.detectChanges();
+
+      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
+
+      dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+
+      flushMicrotasks();
+      viewContainerFixture.detectChanges();
+      tick(500);
+
+      expect(lastFocusOrigin!)
+        .toBe('keyboard', 'Expected the trigger button to be focused via keyboard');
+
+      focusMonitor.stopMonitoring(button);
+      document.body.removeChild(button);
+    }));
+
+    it('should re-focus the trigger via mouse when backdrop has been clicked', fakeAsync(() => {
+      const button = document.createElement('button');
+      let lastFocusOrigin: FocusOrigin = null;
+
+      focusMonitor.monitor(button, false)
+        .subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
+
+      document.body.appendChild(button);
+      button.focus();
+
+      // Patch the element focus after the initial and real focus, because otherwise the
+      // `activeElement` won't be set, and the dialog won't be able to restore focus to an element.
+      patchElementFocus(button);
+
+      dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+
+      tick(500);
+      viewContainerFixture.detectChanges();
+
+      const backdrop = overlayContainerElement
+        .querySelector('.cdk-overlay-backdrop') as HTMLElement;
+
+      backdrop.click();
+      viewContainerFixture.detectChanges();
+      tick(500);
+
+      expect(lastFocusOrigin!)
+        .toBe('mouse', 'Expected the trigger button to be focused via mouse');
+
+      focusMonitor.stopMonitoring(button);
+      document.body.removeChild(button);
+    }));
+
+    it('should re-focus via keyboard if the close button has been triggered through keyboard',
+      fakeAsync(() => {
+        const button = document.createElement('button');
+        let lastFocusOrigin: FocusOrigin = null;
+
+        focusMonitor.monitor(button, false)
+          .subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
+
+        document.body.appendChild(button);
+        button.focus();
+
+        // Patch the element focus after the initial and real focus, because otherwise the active
+        // element won't be set, and the dialog won't be able to restore focus to an element.
+        patchElementFocus(button);
+
+        dialog.open(ContentElementDialog, {viewContainerRef: testViewContainerRef});
+
+        tick(500);
+        viewContainerFixture.detectChanges();
+
+        const closeButton = overlayContainerElement
+          .querySelector('button[mat-dialog-close]') as HTMLElement;
+
+        // Fake the behavior of pressing the SPACE key on a button element. Browsers fire a `click`
+        // event with a MouseEvent, which has coordinates that are out of the element boundaries.
+        dispatchMouseEvent(closeButton, 'click', 0, 0);
+
+        viewContainerFixture.detectChanges();
+        tick(500);
+
+        expect(lastFocusOrigin!)
+          .toBe('keyboard', 'Expected the trigger button to be focused via keyboard');
+
+        focusMonitor.stopMonitoring(button);
+        document.body.removeChild(button);
+      }));
+
+    it('should re-focus via mouse if the close button has been clicked', fakeAsync(() => {
+      const button = document.createElement('button');
+      let lastFocusOrigin: FocusOrigin = null;
+
+      focusMonitor.monitor(button, false)
+        .subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
+
+      document.body.appendChild(button);
+      button.focus();
+
+      // Patch the element focus after the initial and real focus, because otherwise the
+      // `activeElement` won't be set, and the dialog won't be able to restore focus to an element.
+      patchElementFocus(button);
+
+      dialog.open(ContentElementDialog, {viewContainerRef: testViewContainerRef});
+
+      tick(500);
+      viewContainerFixture.detectChanges();
+
+      const closeButton = overlayContainerElement
+        .querySelector('button[mat-dialog-close]') as HTMLElement;
+
+      // The dialog close button detects the focus origin by inspecting the click event. If
+      // coordinates of the click are not present, it assumes that the click has been triggered
+      // by keyboard.
+      dispatchMouseEvent(closeButton, 'click', 10, 10);
+
+      viewContainerFixture.detectChanges();
+      tick(500);
+
+      expect(lastFocusOrigin!)
+        .toBe('mouse', 'Expected the trigger button to be focused via mouse');
+
+      focusMonitor.stopMonitoring(button);
+      document.body.removeChild(button);
+    }));
+
     it('should allow the consumer to shift focus in afterClosed', fakeAsync(() => {
          // Create a element that has focus before the dialog is opened.
          let button = document.createElement('button');