fix(interactivity-checker): improve robustness of isTabbable (#1950)

* fix(focus-trap): improve robustness

* Address feedback

* Remove extra blank line.

* Address additional feedback

* Change timeout delay

Author: devversion

src/demo-app/demo-app-module.ts

@@ -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: [
@@ -86,6 +87,7 @@ import {ProjectionDemo, ProjectionTestComponent} from './projection/projection-d
     SunnyTabContent,
     RainyTabContent,
     FoggyTabContent,
+    PlatformDemo
   ],
   entryComponents: [
     DemoApp,

src/demo-app/demo-app/demo-app.ts

@@ -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'}
   ];
 }

src/demo-app/demo-app/routes.ts

@@ -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},
@@ -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}
 ];

src/demo-app/platform/platform-demo.ts

@@ -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) {}
+}

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

@@ -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();
@@ -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`);
     });
   });
 
@@ -50,7 +57,7 @@ describe('FocusTrap', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         declarations: [FocusTrap, FocusTrapTargetTestApp],
-        providers: [InteractivityChecker]
+        providers: [InteractivityChecker, MdPlatform]
       });
 
       TestBed.compileComponents();

src/lib/core/a11y/index.ts

@@ -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],
 })