fix(dialog): restore focus with the proper focus origin

* Restores the trigger focus upon dialog close with the proper focus origin that caused the dialog closing.

For example, a backdrop click leads to a focus restore via `mouse`. Pressing `escape` leads to a focus restore via `keyboard`.

References #8420

Author: devversion

src/lib/dialog/dialog-container.ts

@@ -28,7 +28,7 @@ import {
   CdkPortalOutlet,
   TemplatePortal
 } from '@angular/cdk/portal';
-import {FocusTrap, FocusTrapFactory} from '@angular/cdk/a11y';
+import {FocusTrap, FocusMonitor, FocusOrigin, FocusTrapFactory} from '@angular/cdk/a11y';
 import {MatDialogConfig} from './dialog-config';
 
 
@@ -79,6 +79,9 @@ export class MatDialogContainer extends BasePortalOutlet {
   /** Element that was focused before the dialog was opened. Save this to restore upon close. */
   private _elementFocusedBeforeDialogWasOpened: HTMLElement | null = null;
 
+  /** Focus origin type that describes how the dialog got closed. */
+  _closeFocusOrigin: FocusOrigin = 'program';
+
   /** The dialog configuration. */
   _config: MatDialogConfig;
 
@@ -95,6 +98,7 @@ export class MatDialogContainer extends BasePortalOutlet {
     private _elementRef: ElementRef,
     private _focusTrapFactory: FocusTrapFactory,
     private _changeDetectorRef: ChangeDetectorRef,
+    private _focusMonitor: FocusMonitor,
     @Optional() @Inject(DOCUMENT) private _document: any) {
 
     super();
@@ -146,7 +150,7 @@ export class MatDialogContainer extends BasePortalOutlet {
 
     // We need the extra check, because IE can set the `activeElement` to null in some cases.
     if (toFocus && typeof toFocus.focus === 'function') {
-      toFocus.focus();
+      this._focusMonitor.focusVia(toFocus, this._closeFocusOrigin);
     }
 
     if (this._focusTrap) {

src/lib/dialog/dialog-ref.ts

@@ -10,6 +10,7 @@ import {OverlayRef, GlobalPositionStrategy} from '@angular/cdk/overlay';
 import {ESCAPE} from '@angular/cdk/keycodes';
 import {filter} from 'rxjs/operators/filter';
 import {take} from 'rxjs/operators/take';
+import {FocusOrigin} from '@angular/cdk/a11y';
 import {DialogPosition} from './dialog-config';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
@@ -72,14 +73,15 @@ export class MatDialogRef<T, R = any> {
 
     _overlayRef.keydownEvents()
       .pipe(filter(event => event.keyCode === ESCAPE && !this.disableClose))
-      .subscribe(() => this.close());
+      .subscribe(() => this.close(undefined, 'keyboard'));
   }
 
   /**
    * Close the dialog.
    * @param dialogResult Optional result to return to the dialog opener.
+   * @param closeFocusOrigin Focus origin that describes how the dialog got closed
    */
-  close(dialogResult?: R): void {
+  close(dialogResult?: R, closeFocusOrigin: FocusOrigin = 'program'): void {
     this._result = dialogResult;
 
     // Transition the backdrop in parallel to the dialog.
@@ -93,6 +95,7 @@ export class MatDialogRef<T, R = any> {
       this._overlayRef.detachBackdrop();
     });
 
+    this._containerInstance._closeFocusOrigin = closeFocusOrigin;
     this._containerInstance._startExitAnimation();
   }
 

src/lib/dialog/dialog.spec.ts

@@ -25,6 +25,7 @@ import {SpyLocation} from '@angular/common/testing';
 import {Directionality} from '@angular/cdk/bidi';
 import {MatDialogContainer} from './dialog-container';
 import {OverlayContainer, ScrollStrategy} from '@angular/cdk/overlay';
+import {A11yModule, FocusOrigin, FocusMonitor} from '@angular/cdk/a11y';
 import {A, ESCAPE} from '@angular/cdk/keycodes';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {
@@ -40,14 +41,15 @@ describe('MatDialog', () => {
   let dialog: MatDialog;
   let overlayContainer: OverlayContainer;
   let overlayContainerElement: HTMLElement;
+  let focusMonitor: FocusMonitor;
 
   let testViewContainerRef: ViewContainerRef;
   let viewContainerFixture: ComponentFixture<ComponentWithChildViewContainer>;
   let mockLocation: SpyLocation;
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatDialogModule, DialogTestModule],
+      imports: [MatDialogModule, DialogTestModule, A11yModule],
       providers: [
         {provide: Location, useClass: SpyLocation}
       ],
@@ -56,13 +58,14 @@ describe('MatDialog', () => {
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([MatDialog, Location, OverlayContainer],
-    (d: MatDialog, l: Location, oc: OverlayContainer) => {
+  beforeEach(inject([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(() => {
     overlayContainer.ngOnDestroy();
@@ -900,6 +903,65 @@ describe('MatDialog', () => {
       document.body.removeChild(button);
     }));
 
+    it('should re-focus the trigger via mouse when dialog closes through escape', fakeAsync(() => {
+      const button = document.createElement('button');
+      let lastFocusOrigin: FocusOrigin = null;
+
+      focusMonitor.monitor(button, false).subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
+      document.body.appendChild(button);
+      button.focus();
+
+      dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+
+      flushMicrotasks();
+      viewContainerFixture.detectChanges();
+      flushMicrotasks();
+
+      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 keyboard 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();
+
+      dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+
+      flushMicrotasks();
+      viewContainerFixture.detectChanges();
+      flushMicrotasks();
+
+      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
+
+      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 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');
@@ -922,7 +984,7 @@ describe('MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
-      flushMicrotasks();
+      flush();
 
       expect(document.activeElement.id).toBe('input-to-be-focused',
           'Expected that the trigger was refocused after the dialog is closed.');

src/lib/dialog/dialog.ts

@@ -238,7 +238,7 @@ export class MatDialog {
     if (config.hasBackdrop) {
       overlayRef.backdropClick().subscribe(() => {
         if (!dialogRef.disableClose) {
-          dialogRef.close();
+          dialogRef.close(undefined, 'mouse');
         }
       });
     }