Focus capturing for sidenav.

Captures focus when sidenav is open in "over" or "push" mode, but not
when opened in "side" mode.

Author: mmalerba

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

@@ -1,4 +1,6 @@
-import {Component, ViewEncapsulation, ViewChild, ElementRef} from '@angular/core';
+import {
+    Component, ViewEncapsulation, ViewChild, ElementRef, Input, AfterContentInit, NgZone
+} from '@angular/core';
 import {InteractivityChecker} from './interactivity-checker';
 
 
@@ -15,15 +17,44 @@ import {InteractivityChecker} from './interactivity-checker';
   selector: 'focus-trap',
   // TODO(jelbourn): move this to a separate file.
   template: `
-  <div tabindex="0" (focus)="focusLastTabbableElement()"></div>
+  <div *ngIf="active" tabindex="0" (focus)="focusLastTabbableElement()"></div>
   <div #trappedContent><ng-content></ng-content></div>
-  <div tabindex="0" (focus)="focusFirstTabbableElement()"></div>`,
+  <div *ngIf="active" tabindex="0" (focus)="focusFirstTabbableElement()"></div>`,
   encapsulation: ViewEncapsulation.None,
 })
-export class FocusTrap {
+export class FocusTrap implements AfterContentInit {
   @ViewChild('trappedContent') trappedContent: ElementRef;
 
-  constructor(private _checker: InteractivityChecker) { }
+  @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();
+      });
+    }
+  }
+
+  /** Whether the DOM content is ready. */
+  private _contentReady : boolean = false;
+
+  /** Whether the focus trap is active. */
+  private _active : boolean = true;
+
+  constructor(private _checker: InteractivityChecker, private _ngZone: NgZone) { }
+
+  ngAfterContentInit() {
+    this._contentReady = true;
+    // Trigger setter behavior.
+    if (this.active) {
+      this._ngZone.onMicrotaskEmpty.first().subscribe(() => {
+        this.focusFirstTabbableElement();
+      });
+    }
+  }
 
   /** Focuses the first tabbable element within the focus trap region. */
   focusFirstTabbableElement() {

src/lib/core/a11y/index.ts

@@ -2,11 +2,13 @@ import {NgModule, ModuleWithProviders} from '@angular/core';
 import {FocusTrap} from './focus-trap';
 import {MdLiveAnnouncer} from './live-announcer';
 import {InteractivityChecker} from './interactivity-checker';
+import {CommonModule} from "@angular/common";
 
 export const A11Y_PROVIDERS = [MdLiveAnnouncer, InteractivityChecker];
 
 @NgModule({
   declarations: [FocusTrap],
+  imports: [CommonModule],
   exports: [FocusTrap],
 })
 export class A11yModule {

src/lib/dialog/dialog-container.html

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

src/lib/dialog/dialog-container.ts

@@ -10,7 +10,6 @@ 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';
 
 
@@ -33,9 +32,6 @@ 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;
 
@@ -45,6 +41,9 @@ 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();
   }
@@ -57,13 +56,8 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
 
     let attachResult = this._portalHost.attachComponentPortal(portal);
 
-    // 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();
-    });
+    this._elementFocusedBeforeDialogWasOpened = document.activeElement;
+    this.focusTrapActive = true;
 
     return attachResult;
   }

src/lib/sidenav/sidenav.spec.ts

@@ -2,6 +2,7 @@ import {fakeAsync, async, tick, ComponentFixture, TestBed} from '@angular/core/t
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdSidenav, MdSidenavModule} from './sidenav';
+import {A11yModule} from "../core/a11y/index";
 
 
 function endSidenavTransition(fixture: ComponentFixture<any>) {
@@ -18,14 +19,15 @@ describe('MdSidenav', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdSidenavModule.forRoot()],
+      imports: [MdSidenavModule.forRoot(), A11yModule.forRoot()],
       declarations: [
         BasicTestApp,
         SidenavLayoutTwoSidenavTestApp,
         SidenavLayoutNoSidenavTestApp,
         SidenavSetToOpenedFalse,
         SidenavSetToOpenedTrue,
         SidenavDynamicAlign,
+        SidenavWitFocusableElements,
       ],
     });
 
@@ -197,7 +199,6 @@ describe('MdSidenav', () => {
   });
 
   describe('attributes', () => {
-
     it('should correctly parse opened="false"', () => {
       let fixture = TestBed.createComponent(SidenavSetToOpenedFalse);
       fixture.detectChanges();
@@ -251,6 +252,55 @@ describe('MdSidenav', () => {
     });
   });
 
+  describe('focus trapping behavior', () => {
+    let fixture: ComponentFixture<SidenavWitFocusableElements>;
+    let testComponent: SidenavWitFocusableElements;
+    let sidenav: MdSidenav;
+    let link1Element: HTMLElement;
+    let link2Element: HTMLElement;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SidenavWitFocusableElements);
+      testComponent = fixture.debugElement.componentInstance;
+      sidenav = fixture.debugElement.query(By.directive(MdSidenav)).componentInstance;
+      link1Element = fixture.debugElement.query(By.css('.link1')).nativeElement;
+      link2Element = fixture.debugElement.query(By.css('.link1')).nativeElement;
+      link2Element.focus();
+    });
+
+    it('should trp focus when opened in "over" mode', fakeAsync(() => {
+      testComponent.mode = 'over';
+      link2Element.focus();
+
+      sidenav.open();
+      endSidenavTransition(fixture);
+      tick();
+
+      expect(document.activeElement).toBe(link1Element);
+    }));
+
+    it('should trap tabs when opened in "push" mode', fakeAsync(() => {
+      testComponent.mode = 'push';
+      link2Element.focus();
+
+      sidenav.open();
+      endSidenavTransition(fixture);
+      tick();
+
+      expect(document.activeElement).toBe(link1Element);
+    }));
+
+    it('should not trap tabs when opened in "side" mode', fakeAsync(() => {
+      testComponent.mode = 'side';
+      link2Element.focus();
+
+      sidenav.open();
+      endSidenavTransition(fixture);
+      tick();
+
+      expect(document.activeElement).toBe(link2Element);
+    }));
+  });
 });
 
 
@@ -337,3 +387,16 @@ class SidenavDynamicAlign {
   sidenav1Align = 'start';
   sidenav2Align = 'end';
 }
+
+@Component({
+  template: `
+    <md-sidenav-layout>
+      <md-sidenav align="start" [mode]="mode">
+        <a class="link1" href="#">link1</a>
+      </md-sidenav>
+      <a class="link2" href="#">link2</a>
+    </md-sidenav-layout>`,
+})
+class SidenavWitFocusableElements {
+  mode: string = 'over';
+}

src/lib/sidenav/sidenav.ts

@@ -16,6 +16,7 @@ import {
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {Dir, MdError, coerceBooleanProperty} from '../core';
+import {A11yModule} from "../core/a11y/index";
 
 
 /** Exception thrown when two MdSidenav are matching the same side. */
@@ -35,7 +36,7 @@ export class MdDuplicatedSidenavError extends MdError {
 @Component({
   moduleId: module.id,
   selector: 'md-sidenav',
-  template: '<ng-content></ng-content>',
+  template: '<focus-trap [active]="focusTrapActive"><ng-content></ng-content></focus-trap>',
   host: {
     '(transitionend)': '_onTransitionEnd($event)',
     // must prevent the browser from aligning text based on value
@@ -106,6 +107,10 @@ export class MdSidenav implements AfterContentInit {
   /** Event emitted when the sidenav alignment changes. */
   @Output('align-changed') onAlignChanged = new EventEmitter<void>();
 
+  get focusTrapActive() {
+    return this.opened && this.mode != 'side';
+  }
+
   /**
    * @param _elementRef The DOM element reference. Used for transition and width calculation.
    *     If not available we do not hook on transitions.
@@ -465,7 +470,7 @@ export class MdSidenavLayout implements AfterContentInit {
 
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, A11yModule],
   exports: [MdSidenavLayout, MdSidenav],
   declarations: [MdSidenavLayout, MdSidenav],
 })