diff --git a/src/lib/core/a11y/focus-trap.spec.ts b/src/lib/core/a11y/focus-trap.spec.ts index 136137f8af84..80a72e1b0f0a 100644 --- a/src/lib/core/a11y/focus-trap.spec.ts +++ b/src/lib/core/a11y/focus-trap.spec.ts @@ -7,24 +7,24 @@ import {Platform} from '../platform/platform'; describe('FocusTrap', () => { - describe('with default element', () => { - - let fixture: ComponentFixture; - let focusTrapInstance: FocusTrap; - let platform: Platform = new Platform(); + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [FocusTrapDirective, FocusTrapWithBindings, SimpleFocusTrap, FocusTrapTargets], + providers: [InteractivityChecker, Platform, FocusTrapFactory] + }); - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [FocusTrapDirective, FocusTrapTestApp], - providers: [InteractivityChecker, Platform, FocusTrapFactory] - }); + TestBed.compileComponents(); + })); - TestBed.compileComponents(); + describe('with default element', () => { + let fixture: ComponentFixture; + let focusTrapInstance: FocusTrap; - fixture = TestBed.createComponent(FocusTrapTestApp); + beforeEach(() => { + fixture = TestBed.createComponent(SimpleFocusTrap); fixture.detectChanges(); focusTrapInstance = fixture.componentInstance.focusTrapDirective.focusTrap; - })); + }); it('wrap focus from end to start', () => { // Because we can't mimic a real tab press focus change in a unit test, just call the @@ -41,12 +41,28 @@ describe('FocusTrap', () => { focusTrapInstance.focusLastTabbableElement(); // In iOS button elements are never tabbable, so the last element will be the input. - let lastElement = platform.IOS ? 'input' : 'button'; + let lastElement = new Platform().IOS ? 'input' : 'button'; expect(document.activeElement.nodeName.toLowerCase()) .toBe(lastElement, `Expected ${lastElement} element to be focused`); }); + it('should be enabled by default', () => { + expect(focusTrapInstance.enabled).toBe(true); + }); + + }); + + describe('with bindings', () => { + let fixture: ComponentFixture; + let focusTrapInstance: FocusTrap; + + beforeEach(() => { + fixture = TestBed.createComponent(FocusTrapWithBindings); + fixture.detectChanges(); + focusTrapInstance = fixture.componentInstance.focusTrapDirective.focusTrap; + }); + it('should clean up its anchor sibling elements on destroy', () => { const rootElement = fixture.debugElement.nativeElement as HTMLElement; @@ -73,21 +89,14 @@ describe('FocusTrap', () => { }); describe('with focus targets', () => { - let fixture: ComponentFixture; + let fixture: ComponentFixture; let focusTrapInstance: FocusTrap; - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [FocusTrapDirective, FocusTrapTargetTestApp], - providers: [InteractivityChecker, Platform, FocusTrapFactory] - }); - - TestBed.compileComponents(); - - fixture = TestBed.createComponent(FocusTrapTargetTestApp); + beforeEach(() => { + fixture = TestBed.createComponent(FocusTrapTargets); fixture.detectChanges(); focusTrapInstance = fixture.componentInstance.focusTrapDirective.focusTrap; - })); + }); it('should be able to prioritize the first focus target', () => { // Because we can't mimic a real tab press focus change in a unit test, just call the @@ -106,6 +115,19 @@ describe('FocusTrap', () => { }); +@Component({ + template: ` +
+ + +
+ ` +}) +class SimpleFocusTrap { + @ViewChild(FocusTrapDirective) focusTrapDirective: FocusTrapDirective; +} + + @Component({ template: `
@@ -114,7 +136,7 @@ describe('FocusTrap', () => {
` }) -class FocusTrapTestApp { +class FocusTrapWithBindings { @ViewChild(FocusTrapDirective) focusTrapDirective: FocusTrapDirective; renderFocusTrap = true; isFocusTrapEnabled = true; @@ -131,6 +153,6 @@ class FocusTrapTestApp { ` }) -class FocusTrapTargetTestApp { +class FocusTrapTargets { @ViewChild(FocusTrapDirective) focusTrapDirective: FocusTrapDirective; } diff --git a/src/lib/core/a11y/focus-trap.ts b/src/lib/core/a11y/focus-trap.ts index f8289d42b75a..7bdbd42f5574 100644 --- a/src/lib/core/a11y/focus-trap.ts +++ b/src/lib/core/a11y/focus-trap.ts @@ -222,7 +222,7 @@ export class FocusTrapDirective implements OnDestroy, AfterContentInit { /** Whether the focus trap is active. */ @Input('cdkTrapFocus') get enabled(): boolean { return this.focusTrap.enabled; } - set enabled(val: boolean) { this.focusTrap.enabled = val; } + set enabled(value: boolean) { this.focusTrap.enabled = coerceBooleanProperty(value); } constructor(private _elementRef: ElementRef, private _focusTrapFactory: FocusTrapFactory) { this.focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement, true);