Fix checks for EdgeHTML engine, because it mocks Chromes Blink engine.

Author: devversion

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

@@ -9,6 +9,7 @@ import {MdPlatform} from '@angular/material';
     <p>Is Blink: {{ platform.BLINK }}</p>
     <p>Is Webkit: {{ platform.WEBKIT }}</p>
     <p>Is Trident: {{ platform.TRIDENT }}</p>
+    <p>Is Edge: {{ platform.EDGE }}</p>
 
   `
 })

src/lib/core/a11y/interactivity-checker.spec.ts

@@ -237,134 +237,142 @@ describe('InteractivityChecker', () => {
       });
     });
 
-    it('should return true for div and span with tabindex == 0', () => {
-      let elements = createElements('div', 'span');
-
-      elements.forEach(el => el.setAttribute('tabindex', '0'));
-      appendElements(elements);
 
-      elements.forEach(el => {
-        expect(checker.isFocusable(el))
-            .toBe(true, `Expected <${el.nodeName} tabindex="0"> to be focusable`);
-      });
-    });
   });
 
   describe('isTabbable', () => {
-    it('should return true for native form controls and anchor without tabindex attribute', () => {
-      let elements = createElements('input', 'textarea', 'select', 'button', 'a');
-      appendElements(elements);
 
-      elements.forEach(el => {
-        expect(checker.isTabbable(el)).toBe(true, `Expected <${el.nodeName}> to be tabbable`);
-      });
-    });
 
-    it('should return false for native form controls and anchor with tabindex == -1', () => {
-      let elements = createElements('input', 'textarea', 'select', 'button', 'a');
 
-      elements.forEach(el => el.setAttribute('tabindex', '-1'));
-      appendElements(elements);
+    it('should respect the tabindex for video elements with controls',
+      // Do not run for Blink and Firefox, because those treat video elements
+      // with controls different.
+      runIf(!platform.BLINK && !platform.FIREFOX, () => {
 
-      elements.forEach(el => {
-        expect(checker.isTabbable(el))
-            .toBe(false, `Expected <${el.nodeName} tabindex="-1"> not to be tabbable`);
-      });
-    });
+        let video = createFromTemplate('<video controls>', true);
 
-    it('should return true for div and span with tabindex == 0', () => {
-      let elements = createElements('div', 'span');
+        expect(checker.isTabbable(video)).toBe(true);
 
-      elements.forEach(el => el.setAttribute('tabindex', '0'));
-      appendElements(elements);
+        video.tabIndex = -1;
 
-      elements.forEach(el => {
-        expect(checker.isTabbable(el))
-            .toBe(true, `Expected <${el.nodeName} tabindex="0"> to be tabbable`);
-      });
-    });
+        expect(checker.isTabbable(video)).toBe(false);
+      })
+    );
 
-    it('should respect the inherited tabindex inside of frame elements', () => {
-      let iframe = createFromTemplate('<iframe>', true) as HTMLFrameElement;
-      let button = createFromTemplate('<button tabindex="0">Not Tabbable</button>');
+    it('should always mark video elements with controls as tabbable (BLINK & FIREFOX)',
+      // Only run this spec for Blink and Firefox, because those always treat video
+      // elements with controls as tabbable.
+      runIf(platform.BLINK || platform.FIREFOX, () => {
 
-      appendElements([iframe]);
+        let video = createFromTemplate('<video controls>', true);
 
-      iframe.tabIndex = -1;
-      iframe.contentDocument.body.appendChild(button);
+        expect(checker.isTabbable(video)).toBe(true);
 
-      expect(checker.isTabbable(iframe)).toBe(false);
-      expect(checker.isTabbable(button)).toBe(false);
+        video.tabIndex = -1;
 
-      iframe.tabIndex = null;
+        expect(checker.isTabbable(video)).toBe(true);
+      })
+    );
 
-      expect(checker.isTabbable(iframe)).toBe(false);
-      expect(checker.isTabbable(button)).toBe(true);
-    });
+    // Some tests should not run inside of iOS browsers, because those only allow specific
+    // elements to be tabbable and cause the tests to always fail.
+    describe('for non-iOS browsers', runIf(!platform.IOS, () => {
 
+      it('should mark form controls and anchors without tabindex attribute as tabbable', () => {
+        let elements = createElements('input', 'textarea', 'select', 'button', 'a');
+        appendElements(elements);
 
-    it('should mark elements which are contentEditable as tabbable', async(() => {
-      let editableEl = createFromTemplate('<div contenteditable="true">', true);
+        elements.forEach(el => {
+          expect(checker.isTabbable(el)).toBe(true, `Expected <${el.nodeName}> to be tabbable`);
+        });
+      });
 
-      // Wait one tick, because the browser takes some time to update the tabIndex
-      // according to the contentEditable attribute.
-      setTimeout(() => {
+      it('should return true for div and span with tabindex == 0', () => {
+        let elements = createElements('div', 'span');
 
-        expect(checker.isTabbable(editableEl)).toBe(true);
+        elements.forEach(el => el.setAttribute('tabindex', '0'));
+        appendElements(elements);
 
-        editableEl.tabIndex = -1;
+        elements.forEach(el => {
+          expect(checker.isFocusable(el))
+          .toBe(true, `Expected <${el.nodeName} tabindex="0"> to be focusable`);
+        });
+      });
 
-        expect(checker.isTabbable(editableEl)).toBe(false);
+      it('should return false for native form controls and anchor with tabindex == -1', () => {
+        let elements = createElements('input', 'textarea', 'select', 'button', 'a');
 
-      }, 1);
+        elements.forEach(el => el.setAttribute('tabindex', '-1'));
+        appendElements(elements);
 
-    }));
+        elements.forEach(el => {
+          expect(checker.isTabbable(el))
+          .toBe(false, `Expected <${el.nodeName} tabindex="-1"> not to be tabbable`);
+        });
+      });
 
-    it('should never mark iframe elements as tabbable', () => {
-      let iframe = createFromTemplate('<iframe>', true);
+      it('should return true for div and span with tabindex == 0', () => {
+        let elements = createElements('div', 'span');
 
-      // iFrame elements will be never marked as tabbable, because it depends on the content
-      // which is mostly not detectable due to CORS and also the checks will be not reliable.
-      expect(checker.isTabbable(iframe)).toBe(false);
-    });
+        elements.forEach(el => el.setAttribute('tabindex', '0'));
+        appendElements(elements);
 
+        elements.forEach(el => {
+          expect(checker.isTabbable(el))
+          .toBe(true, `Expected <${el.nodeName} tabindex="0"> to be tabbable`);
+        });
+      });
 
+      it('should respect the inherited tabindex inside of frame elements', () => {
+        let iframe = createFromTemplate('<iframe>', true) as HTMLFrameElement;
+        let button = createFromTemplate('<button tabindex="0">Not Tabbable</button>');
 
-    it('should always mark audio elements without controls as not tabbable', () => {
-      let audio = createFromTemplate('<audio>', true);
+        appendElements([iframe]);
 
-      expect(checker.isTabbable(audio)).toBe(false);
-    });
+        iframe.tabIndex = -1;
+        iframe.contentDocument.body.appendChild(button);
 
-    it('should respect the tabindex for video elements with controls',
-      // Do not run for Blink and Firefox, because those treat video elements
-      // with controls different.
-      runIf(!platform.BLINK && !platform.FIREFOX, () => {
+        expect(checker.isTabbable(iframe)).toBe(false);
+        expect(checker.isTabbable(button)).toBe(false);
 
-        let video = createFromTemplate('<video controls>', true);
+        iframe.tabIndex = null;
 
-        expect(checker.isTabbable(video)).toBe(true);
+        expect(checker.isTabbable(iframe)).toBe(false);
+        expect(checker.isTabbable(button)).toBe(true);
+      });
 
-        video.tabIndex = -1;
+      it('should mark elements which are contentEditable as tabbable', async(() => {
+        let editableEl = createFromTemplate('<div contenteditable="true">', true);
 
-        expect(checker.isTabbable(video)).toBe(false);
-      })
-    );
+        // Wait one tick, because the browser takes some time to update the tabIndex
+        // according to the contentEditable attribute.
+        setTimeout(() => {
 
-    it('should always mark video elements with controls as tabbable (BLINK & FIREFOX)',
-      // Only run this spec for Blink and Firefox, because those always treat video
-      // elements with controls as tabbable.
-      runIf(platform.BLINK || platform.FIREFOX, () => {
+          expect(checker.isTabbable(editableEl)).toBe(true);
 
-        let video = createFromTemplate('<video controls>', true);
+          editableEl.tabIndex = -1;
 
-        expect(checker.isTabbable(video)).toBe(true);
+          expect(checker.isTabbable(editableEl)).toBe(false);
 
-        video.tabIndex = -1;
+        }, 1);
 
-        expect(checker.isTabbable(video)).toBe(true);
-      })
-    );
+      }));
+
+      it('should never mark iframe elements as tabbable', () => {
+        let iframe = createFromTemplate('<iframe>', true);
+
+        // iFrame elements will be never marked as tabbable, because it depends on the content
+        // which is mostly not detectable due to CORS and also the checks will be not reliable.
+        expect(checker.isTabbable(iframe)).toBe(false);
+      });
+
+      it('should always mark audio elements without controls as not tabbable', () => {
+        let audio = createFromTemplate('<audio>', true);
+
+        expect(checker.isTabbable(audio)).toBe(false);
+      });
+
+    }));
 
     describe('for Blink and Webkit browsers', runIf(platform.BLINK || platform.WEBKIT, () => {
 

src/lib/core/platform/platform.ts

@@ -3,15 +3,23 @@ import {Injectable, NgModule, ModuleWithProviders} from '@angular/core';
 // Declare window with type of any.
 declare const window: any;
 
+// Whether the current platform supports the V8 Break Iterator. The V8 check
+// is necessary to detect all Blink based browsers.
+const hasV8BreakIterator = (window.Intl && (window.Intl as any).v8BreakIterator);
+
 @Injectable()
 export class MdPlatform {
 
-  /* Layout Engines */
-  BLINK = !!(window.chrome || (window.Intl && (window.Intl as any).v8BreakIterator)) && !!CSS;
-  WEBKIT = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK;
+  /** Layout Engines */
+  EDGE = /(edge)/i.test(navigator.userAgent);
+  BLINK = !!(window.chrome || hasV8BreakIterator) && !!CSS && !this.EDGE;
+
+  // Webkit is part of the userAgent in EdgeHTML and Blink, so we need to ensure that Webkit
+  // runs standalone.
+  WEBKIT = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE;
   TRIDENT = /(msie|trident)/i.test(navigator.userAgent);
 
-  /* Browsers and Platform Types */
+  /** Browsers and Platform Types */
   ANDROID = /android/i.test(navigator.userAgent);
   IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   FIREFOX = /(firefox|minefield)/i.test(navigator.userAgent);