Skip to content

Commit

Permalink
fix(interactivity-checker): improve robustness of isTabbable (#1950)
Browse files Browse the repository at this point in the history
* fix(focus-trap): improve robustness

* Address feedback

* Remove extra blank line.

* Address additional feedback

* Change timeout delay
  • Loading branch information
devversion authored and tinayuangao committed Nov 30, 2016
1 parent 76a8d79 commit 4b7e52d
Show file tree
Hide file tree
Showing 12 changed files with 449 additions and 60 deletions.
2 changes: 2 additions & 0 deletions src/demo-app/demo-app-module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {PortalDemo, ScienceJoke} from './portal/portal-demo';
import {MenuDemo} from './menu/menu-demo';
import {TabsDemo, SunnyTabContent, RainyTabContent, FoggyTabContent} from './tabs/tabs-demo';
import {ProjectionDemo, ProjectionTestComponent} from './projection/projection-demo';
import {PlatformDemo} from './platform/platform-demo';

@NgModule({
imports: [
Expand Down Expand Up @@ -86,6 +87,7 @@ import {ProjectionDemo, ProjectionTestComponent} from './projection/projection-d
SunnyTabContent,
RainyTabContent,
FoggyTabContent,
PlatformDemo
],
entryComponents: [
DemoApp,
Expand Down
3 changes: 2 additions & 1 deletion src/demo-app/demo-app/demo-app.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export class DemoApp {
{name: 'Snack Bar', route: 'snack-bar'},
{name: 'Tabs', route: 'tabs'},
{name: 'Toolbar', route: 'toolbar'},
{name: 'Tooltip', route: 'tooltip'}
{name: 'Tooltip', route: 'tooltip'},
{name: 'Platform', route: 'platform'}
];
}
2 changes: 2 additions & 0 deletions src/demo-app/demo-app/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {TooltipDemo} from '../tooltip/tooltip-demo';
import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
import {ProjectionDemo} from '../projection/projection-demo';
import {TABS_DEMO_ROUTES} from '../tabs/routes';
import {PlatformDemo} from '../platform/platform-demo';

export const DEMO_APP_ROUTES: Routes = [
{path: '', component: Home},
Expand Down Expand Up @@ -62,4 +63,5 @@ export const DEMO_APP_ROUTES: Routes = [
{path: 'dialog', component: DialogDemo},
{path: 'tooltip', component: TooltipDemo},
{path: 'snack-bar', component: SnackBarDemo},
{path: 'platform', component: PlatformDemo}
];
17 changes: 17 additions & 0 deletions src/demo-app/platform/platform-demo.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import {Component} from '@angular/core';
import {MdPlatform} from '@angular/material';

@Component({
template: `
<p>Is Android: {{ platform.ANDROID }}</p>
<p>Is iOS: {{ platform.IOS }}</p>
<p>Is Firefox: {{ platform.FIREFOX }}</p>
<p>Is Blink: {{ platform.BLINK }}</p>
<p>Is Webkit: {{ platform.WEBKIT }}</p>
<p>Is Trident: {{ platform.TRIDENT }}</p>
<p>Is Edge: {{ platform.EDGE }}</p>
`
})
export class PlatformDemo {
constructor(public platform: MdPlatform) {}
}
13 changes: 10 additions & 3 deletions src/lib/core/a11y/focus-trap.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,21 @@ import {By} from '@angular/platform-browser';
import {Component} from '@angular/core';
import {FocusTrap} from './focus-trap';
import {InteractivityChecker} from './interactivity-checker';
import {MdPlatform} from '../platform/platform';


describe('FocusTrap', () => {

describe('with default element', () => {

let fixture: ComponentFixture<FocusTrapTestApp>;
let focusTrapInstance: FocusTrap;
let platform: MdPlatform = new MdPlatform();

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [FocusTrap, FocusTrapTestApp],
providers: [InteractivityChecker]
providers: [InteractivityChecker, MdPlatform]
});

TestBed.compileComponents();
Expand All @@ -38,8 +42,11 @@ describe('FocusTrap', () => {
// focus event handler directly.
focusTrapInstance.focusLastTabbableElement();

// In iOS button elements are never tabbable, so the last element will be the input.
let lastElement = platform.IOS ? 'input' : 'button';

expect(document.activeElement.nodeName.toLowerCase())
.toBe('button', 'Expected button element to be focused');
.toBe(lastElement, `Expected ${lastElement} element to be focused`);
});
});

Expand All @@ -50,7 +57,7 @@ describe('FocusTrap', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [FocusTrap, FocusTrapTargetTestApp],
providers: [InteractivityChecker]
providers: [InteractivityChecker, MdPlatform]
});

TestBed.compileComponents();
Expand Down
2 changes: 2 additions & 0 deletions src/lib/core/a11y/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import {NgModule, ModuleWithProviders} from '@angular/core';
import {FocusTrap} from './focus-trap';
import {MdLiveAnnouncer} from './live-announcer';
import {InteractivityChecker} from './interactivity-checker';
import {PlatformModule} from '../platform/platform';

export const A11Y_PROVIDERS = [MdLiveAnnouncer, InteractivityChecker];

@NgModule({
imports: [PlatformModule],
declarations: [FocusTrap],
exports: [FocusTrap],
})
Expand Down
Loading

0 comments on commit 4b7e52d

Please sign in to comment.