refactor: address feedback

Author: crisbeto

src/demo-app/sidenav/sidenav-demo.html

@@ -9,9 +9,9 @@
                 [fixedInViewport]="fixed" [fixedTopGap]="fixedTop" [fixedBottomGap]="fixedBottom">
       Start Side Sidenav
       <br>
-      <button mat-button (click)="start.close()">Close</button>
+      <button mat-button (click)="start.close('mouse')">Close</button>
       <br>
-      <button mat-button (click)="end.open()">Open End Side</button>
+      <button mat-button (click)="end.open('keyboard')">Open End Side</button>
       <br>
       <button mat-button (click)="modeIndex = (modeIndex + 1) % 3">Toggle Mode</button>
       <div>Mode: {{start.mode}}</div>
@@ -24,7 +24,7 @@
                 [fixedInViewport]="fixed" [fixedTopGap]="fixedTop" [fixedBottomGap]="fixedBottom">
       End Side Sidenav
       <br>
-      <button mat-button (click)="end.close()">Close</button>
+      <button mat-button (click)="end.close('mouse')">Close</button>
       <div class="demo-filler-content" *ngFor="let c of fillerContent">Filler Content</div>
     </mat-sidenav>
 
@@ -39,8 +39,8 @@
 
         <div>
           <h3>Sidenav</h3>
-          <button mat-button (click)="start.toggle()">Toggle Start Side Sidenav</button>
-          <button mat-button (click)="end.toggle()">Toggle End Side Sidenav</button>
+          <button mat-button (click)="start.toggle(undefined, 'mouse')">Toggle Start Side Sidenav</button>
+          <button mat-button (click)="end.toggle(undefined, 'mouse')">Toggle End Side Sidenav</button>
           <mat-checkbox [(ngModel)]="fixed">Fixed mode</mat-checkbox>
           <mat-checkbox [(ngModel)]="coverHeader">Sidenav covers header/footer</mat-checkbox>
         </div>

src/lib/sidenav/drawer.ts

@@ -7,7 +7,7 @@
  */
 
 import {animate, AnimationEvent, state, style, transition, trigger} from '@angular/animations';
-import {FocusTrap, FocusTrapFactory} from '@angular/cdk/a11y';
+import {FocusTrap, FocusTrapFactory, FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {ESCAPE} from '@angular/cdk/keycodes';
@@ -171,6 +171,9 @@ export class MatDrawer implements AfterContentInit, OnDestroy {
   /** Whether the drawer is opened. */
   private _opened: boolean = false;
 
+  /** How the sidenav was opened (keypress, mouse click etc.) */
+  private _openedVia: FocusOrigin | null;
+
   /** Emits whenever the drawer has started animating. */
   _animationStarted = new EventEmitter<AnimationEvent>();
 
@@ -202,7 +205,9 @@ export class MatDrawer implements AfterContentInit, OnDestroy {
 
   constructor(private _elementRef: ElementRef,
               private _focusTrapFactory: FocusTrapFactory,
+              private _focusMonitor: FocusMonitor,
               @Optional() @Inject(DOCUMENT) private _doc: any) {
+
     this.onOpen.subscribe(() => {
       if (this._doc) {
         this._elementFocusedBeforeDrawerWasOpened = this._doc.activeElement as HTMLElement;
@@ -221,16 +226,18 @@ export class MatDrawer implements AfterContentInit, OnDestroy {
    * opened.
    */
   private _restoreFocus() {
-    let activeEl = this._doc && this._doc.activeElement;
+    const activeEl = this._doc && this._doc.activeElement;
+
     if (activeEl && this._elementRef.nativeElement.contains(activeEl)) {
       if (this._elementFocusedBeforeDrawerWasOpened instanceof HTMLElement) {
-        this._elementFocusedBeforeDrawerWasOpened.focus();
+        this._focusMonitor.focusVia(this._elementFocusedBeforeDrawerWasOpened, this._openedVia);
       } else {
         this._elementRef.nativeElement.blur();
       }
     }
 
     this._elementFocusedBeforeDrawerWasOpened = null;
+    this._openedVia = null;
   }
 
   ngAfterContentInit() {
@@ -255,10 +262,13 @@ export class MatDrawer implements AfterContentInit, OnDestroy {
     this.toggle(coerceBooleanProperty(v));
   }
 
-
-  /** Open the drawer. */
-  open(): Promise<MatDrawerToggleResult> {
-    return this.toggle(true);
+  /**
+   * Open the drawer.
+   * @param openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
+   * Used for focus management after the sidenav is closed.
+   */
+  open(openedVia?: FocusOrigin): Promise<MatDrawerToggleResult> {
+    return this.toggle(true, openedVia);
   }
 
   /** Close the drawer. */
@@ -269,12 +279,17 @@ export class MatDrawer implements AfterContentInit, OnDestroy {
   /**
    * Toggle this drawer.
    * @param isOpen Whether the drawer should be open.
+   * @param openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
+   * Used for focus management after the sidenav is closed.
    */
-  toggle(isOpen: boolean = !this.opened): Promise<MatDrawerToggleResult> {
+  toggle(isOpen: boolean = !this.opened, openedVia: FocusOrigin = 'program'):
+    Promise<MatDrawerToggleResult> {
+
     this._opened = isOpen;
 
     if (isOpen) {
       this._animationState = this._enableAnimations ? 'open' : 'open-instant';
+      this._openedVia = openedVia;
     } else {
       this._animationState = 'void';
     }