feat(sidenav): close via escape key and restore focus to trigger element

* Adds the ability to close a sidenav by pressing escape.
* Restores focus to the trigger element after a sidenav is closed.

Author: crisbeto

src/lib/sidenav/sidenav.scss

@@ -102,6 +102,7 @@ md-sidenav {
   bottom: 0;
   z-index: 3;
   min-width: 5%;
+  outline: 0;
 
   // TODO(kara): revisit scrolling behavior for sidenavs
   overflow-y: auto;

src/lib/sidenav/sidenav.spec.ts

@@ -194,6 +194,60 @@ describe('MdSidenav', () => {
         tick();
       }).not.toThrow();
     }));
+
+    it('should close when pressing escape', fakeAsync(() => {
+      let fixture = TestBed.createComponent(BasicTestApp);
+      let testComponent: BasicTestApp = fixture.debugElement.componentInstance;
+      let sidenav: MdSidenav = fixture.debugElement
+        .query(By.directive(MdSidenav)).componentInstance;
+
+      sidenav.open();
+
+      fixture.detectChanges();
+      endSidenavTransition(fixture);
+      tick();
+
+      expect(testComponent.openCount).toBe(1);
+      expect(testComponent.closeCount).toBe(0);
+
+      // Simulate pressing the escape key.
+      sidenav.handleEscapeKey();
+
+      fixture.detectChanges();
+      endSidenavTransition(fixture);
+      tick();
+
+      expect(testComponent.closeCount).toBe(1);
+    }));
+
+    it('should restore focus to the trigger element on close', fakeAsync(() => {
+      let fixture = TestBed.createComponent(BasicTestApp);
+      let sidenav: MdSidenav = fixture.debugElement
+        .query(By.directive(MdSidenav)).componentInstance;
+      let trigger = document.createElement('button');
+
+      document.body.appendChild(trigger);
+      trigger.focus();
+      sidenav.open();
+
+      fixture.detectChanges();
+      endSidenavTransition(fixture);
+      tick();
+
+      expect(document.activeElement)
+          .not.toBe(trigger, 'Expected focus to change when the sidenav was opened.');
+
+      sidenav.close();
+
+      fixture.detectChanges();
+      endSidenavTransition(fixture);
+      tick();
+
+      expect(document.activeElement)
+          .toBe(trigger, 'Expected focus to be restored to the trigger on close.');
+
+      trigger.parentNode.removeChild(trigger);
+    }));
   });
 
   describe('attributes', () => {

src/lib/sidenav/sidenav.ts

@@ -38,6 +38,7 @@ export class MdDuplicatedSidenavError extends MdError {
   template: '<ng-content></ng-content>',
   host: {
     '(transitionend)': '_onTransitionEnd($event)',
+    '(keydown.escape)': 'handleEscapeKey()',
     // must prevent the browser from aligning text based on value
     '[attr.align]': 'null',
     '[class.md-sidenav-closed]': '_isClosed',
@@ -49,6 +50,7 @@ export class MdDuplicatedSidenavError extends MdError {
     '[class.md-sidenav-push]': '_modePush',
     '[class.md-sidenav-side]': '_modeSide',
     '[class.md-sidenav-invalid]': '!valid',
+    'tabIndex': '-1'
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -110,7 +112,18 @@ export class MdSidenav implements AfterContentInit {
    * @param _elementRef The DOM element reference. Used for transition and width calculation.
    *     If not available we do not hook on transitions.
    */
-  constructor(private _elementRef: ElementRef) {}
+  constructor(private _elementRef: ElementRef) {
+    this.onOpen.subscribe(() => {
+      this._elementFocusedBeforeSidenavWasOpened = document.activeElement as HTMLElement;
+      this._elementRef.nativeElement.focus();
+    });
+
+    this.onClose.subscribe(() => {
+      if (this._elementFocusedBeforeSidenavWasOpened) {
+        this._elementFocusedBeforeSidenavWasOpened.focus();
+      }
+    });
+  }
 
   ngAfterContentInit() {
     // This can happen when the sidenav is set to opened in the template and the transition
@@ -191,6 +204,12 @@ export class MdSidenav implements AfterContentInit {
     }
   }
 
+  /** Handles the user pressing the escape key. */
+  handleEscapeKey() {
+    // TODO(crisbeto): this is in a separate method in order to
+    // allow for disabling the behavior later.
+    this.close();
+  }
 
   /**
    * When transition has finished, set the internal state for classes and emit the proper event.
@@ -266,6 +285,7 @@ export class MdSidenav implements AfterContentInit {
   private _closePromise: Promise<void>;
   private _closePromiseResolve: () => void;
   private _closePromiseReject: () => void;
+  private _elementFocusedBeforeSidenavWasOpened: HTMLElement = null;
 }
 
 /**