address comments

Author: mmalerba

src/lib/core/a11y/focus-trap.ts

@@ -2,6 +2,7 @@ import {
     Component, ViewEncapsulation, ViewChild, ElementRef, Input, AfterContentInit, NgZone
 } from '@angular/core';
 import {InteractivityChecker} from './interactivity-checker';
+import {coerceBooleanProperty} from '../coersion/boolean-property';
 
 
 /**
@@ -26,17 +27,8 @@ export class FocusTrap implements AfterContentInit {
   @ViewChild('trappedContent') trappedContent: ElementRef;
 
   @Input()
-  get active(): boolean {
-    return this._active;
-  }
-  set active(val: boolean) {
-    this._active = val;
-    if (val && this._contentReady) {
-      this._ngZone.onMicrotaskEmpty.first().subscribe(() => {
-        this.focusFirstTabbableElement();
-      });
-    }
-  }
+  get active(): boolean { return this._active; }
+  set active(val: boolean) { this._active = coerceBooleanProperty(val); }
 
   /** Whether the DOM content is ready. */
   private _contentReady: boolean = false;
@@ -50,12 +42,30 @@ export class FocusTrap implements AfterContentInit {
     this._contentReady = true;
     // Trigger setter behavior.
     if (this.active) {
-      this._ngZone.onMicrotaskEmpty.first().subscribe(() => {
-        this.focusFirstTabbableElement();
-      });
+
     }
   }
 
+  /**
+   * Waits for microtask queue to empty, then focuses the first tabbable element within the focus
+   * trap region.
+   */
+  focusFirstTabbableElementWhenReady() {
+    this._ngZone.onMicrotaskEmpty.first().subscribe(() => {
+      this.focusFirstTabbableElement();
+    });
+  }
+
+  /**
+   * Waits for microtask queue to empty, then focuses the last tabbable element within the focus
+   * trap region.
+   */
+  focusLastTabbableElementWhenReady() {
+    this._ngZone.onMicrotaskEmpty.first().subscribe(() => {
+      this.focusLastTabbableElement();
+    });
+  }
+
   /** Focuses the first tabbable element within the focus trap region. */
   focusFirstTabbableElement() {
     let redirectToElement = this._getFirstTabbableElement(this.trappedContent.nativeElement);

src/lib/dialog/dialog-container.html

@@ -1,3 +1,3 @@
-<focus-trap [active]="focusTrapActive">
+<focus-trap>
   <template portalHost></template>
 </focus-trap>

src/lib/dialog/dialog-container.ts

@@ -10,6 +10,7 @@ import {BasePortalHost, ComponentPortal, PortalHostDirective, TemplatePortal} fr
 import {MdDialogConfig} from './dialog-config';
 import {MdDialogRef} from './dialog-ref';
 import {MdDialogContentAlreadyAttachedError} from './dialog-errors';
+import {FocusTrap} from '../core/a11y/focus-trap';
 import 'rxjs/add/operator/first';
 
 
@@ -32,6 +33,9 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
   /** The portal host inside of this container into which the dialog content will be loaded. */
   @ViewChild(PortalHostDirective) _portalHost: PortalHostDirective;
 
+  /** The directive that traps and manages focus within the dialog. */
+  @ViewChild(FocusTrap) _focusTrap: FocusTrap;
+
   /** Element that was focused before the dialog was opened. Save this to restore upon close. */
   private _elementFocusedBeforeDialogWasOpened: Element = null;
 
@@ -41,9 +45,6 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
   /** Reference to the open dialog. */
   dialogRef: MdDialogRef<any>;
 
-  /** Whether the focus trap is active. */
-  focusTrapActive: boolean = false;
-
   constructor(private _ngZone: NgZone) {
     super();
   }
@@ -56,8 +57,13 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
 
     let attachResult = this._portalHost.attachComponentPortal(portal);
 
-    this._elementFocusedBeforeDialogWasOpened = document.activeElement;
-    this.focusTrapActive = true;
+    // If were to attempt to focus immediately, then the content of the dialog would not yet be
+    // ready in instances where change detection has to run first. To deal with this, we simply
+    // wait for the microtask queue to be empty.
+    this._ngZone.onMicrotaskEmpty.first().subscribe(() => {
+      this._elementFocusedBeforeDialogWasOpened = document.activeElement;
+      this._focusTrap.focusFirstTabbableElement();
+    });
 
     return attachResult;
   }

src/lib/sidenav/sidenav.ts

@@ -13,10 +13,12 @@ import {
     EventEmitter,
     Renderer,
     ViewEncapsulation,
+    ViewChild,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {Dir, MdError, coerceBooleanProperty} from '../core';
 import {A11yModule} from '../core/a11y/index';
+import {FocusTrap} from '../core/a11y/focus-trap';
 
 
 /** Exception thrown when two MdSidenav are matching the same side. */
@@ -55,6 +57,8 @@ export class MdDuplicatedSidenavError extends MdError {
   encapsulation: ViewEncapsulation.None,
 })
 export class MdSidenav implements AfterContentInit {
+  @ViewChild(FocusTrap) private _focusTrap: FocusTrap;
+
   /** Alignment of the sidenav (direction neutral); whether 'start' or 'end'. */
   private _align: 'start' | 'end' = 'start';
 
@@ -177,6 +181,10 @@ export class MdSidenav implements AfterContentInit {
       this.onCloseStart.emit();
     }
 
+    if (this.focusTrapActive) {
+      this._focusTrap.focusFirstTabbableElementWhenReady();
+    }
+
     if (isOpen) {
       if (this._openPromise == null) {
         this._openPromise = new Promise<void>((resolve, reject) => {