fix(cdk/a11y): interactivity checker detecting tabbable state incorrectly for videos, audio and object elements

The interactivity checker has been built a while ago when supported
browsers behaved differently for their `tabbable` state. We now
updated our browsers to more recent versions, and need to adjust
the interactivity checker so that it reflects the latest patterns
in supported browsers.

Here is a note summary of behavior noticed for `video` and `audio`
elements in various supported browsers:
https://hackmd.io/@devversion/rkxzcgsJD

Another change was for `object` elements. In previous BLINK / Webkit
browsers, such elements, or its children were never tabbable. This
is incorrect for the currently supported browsers as children inside
`object` elements can certainly be tabbable. On the other hand though,
object elements itself can be tabbable depending on configuration
we cannot reliably detect. For improved accessibility, we never
consider object elements itself as tabbable (similar to iframes)

(cherry picked from commit 35005f4)

Author: devversion

src/cdk/a11y/interactivity-checker/interactivity-checker.spec.ts

@@ -1,4 +1,5 @@
 import {Platform} from '@angular/cdk/platform';
+import {PLATFORM_ID} from '@angular/core';
 import {inject} from '@angular/core/testing';
 import {InteractivityChecker, IsFocusableConfig} from './interactivity-checker';
 
@@ -7,11 +8,11 @@ describe('InteractivityChecker', () => {
   let testContainerElement: HTMLElement;
   let checker: InteractivityChecker;
 
-  beforeEach(inject([Platform, InteractivityChecker], (p: Platform, i: InteractivityChecker) => {
+  beforeEach(inject([PLATFORM_ID], (platformId: Object) => {
     testContainerElement = document.createElement('div');
     document.body.appendChild(testContainerElement);
-    platform = p;
-    checker = i;
+    platform = new Platform(platformId);
+    checker = new InteractivityChecker(platform);
   }));
 
   afterEach(() => {
@@ -253,45 +254,48 @@ describe('InteractivityChecker', () => {
 
   describe('isTabbable', () => {
 
-    it('should respect the tabindex for video elements with controls', () => {
-      // Do not run for Blink, Firefox and iOS because those treat video elements
-      // with controls different and are covered in other tests.
-      if (platform.BLINK || platform.FIREFOX || platform.IOS) {
-        return;
-      }
-
-      const video = createFromTemplate('<video controls>', true);
-
-      expect(checker.isTabbable(video)).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', () => {
+      let shouldSkip: boolean;
 
-      video.tabIndex = -1;
+      beforeEach(() => {
+        shouldSkip = platform.IOS;
+      });
 
-      expect(checker.isTabbable(video)).toBe(false);
-    });
+      it('should by default treat video elements with controls as tabbable', () => {
+        if (shouldSkip) {
+          return;
+        }
 
-    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.
-      if (!platform.BLINK && !platform.FIREFOX) {
-        return;
-      }
+        const video = createFromTemplate('<video controls>', true);
+        expect(checker.isTabbable(video)).toBe(true);
+      });
 
-      const video = createFromTemplate('<video controls>', true);
+      it('should respect the tabindex for video elements with controls', () => {
+        if (shouldSkip) {
+          return;
+        }
 
-      expect(checker.isTabbable(video)).toBe(true);
+        const video = createFromTemplate('<video controls>', true);
+        expect(checker.isTabbable(video)).toBe(true);
 
-      video.tabIndex = -1;
+        video.tabIndex = -1;
+        expect(checker.isTabbable(video)).toBe(false);
+      });
 
-      expect(checker.isTabbable(video)).toBe(true);
-    });
+      // Firefox always makes video elements (regardless of the controls) as tabbable, unless
+      // explicitly opted-out by setting the tabindex.
+      it('should by default treat video elements without controls as tabbable in firefox', () => {
+        if (!platform.FIREFOX) {
+          return;
+        }
 
-    // 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', () => {
-      let shouldSkip: boolean;
+        const video = createFromTemplate('<video>', true);
+        expect(checker.isTabbable(video)).toBe(true);
 
-      beforeEach(() => {
-        shouldSkip = platform.IOS;
+        video.tabIndex = -1;
+        expect(checker.isTabbable(video)).toBe(false);
       });
 
       it('should mark form controls and anchors without tabindex attribute as tabbable', () => {
@@ -424,39 +428,25 @@ describe('InteractivityChecker', () => {
         }
       });
 
-      it('should always mark audio elements without controls as not tabbable', () => {
+      it('should detect audio elements with controls as tabbable', () => {
         if (!shouldSkip) {
-          const audio = createFromTemplate('<audio>', true);
-
+          const audio = createFromTemplate('<audio controls>', true);
+          expect(checker.isTabbable(audio)).toBe(true);
+          audio.tabIndex = -1;
           expect(checker.isTabbable(audio)).toBe(false);
         }
       });
 
-    });
-
-    describe('for Blink and Webkit browsers', () => {
-      let shouldSkip: boolean;
-
-      beforeEach(() => {
-        shouldSkip = !platform.BLINK && !platform.WEBKIT;
-      });
+      it('should always detect audio elements without controls as non-tabbable', () => {
+        if (!shouldSkip) {
+          const audio = createFromTemplate('<audio>', true);
+          expect(checker.isTabbable(audio)).toBe(false);
 
-      it('should not mark elements inside of object frames as tabbable', () => {
-        if (shouldSkip) {
-          return;
+          // Setting a `tabindex` has no effect. The audio element is expected
+          // to be still not tabbable.
+          audio.tabIndex = 0;
+          expect(checker.isTabbable(audio)).toBe(false);
         }
-
-        const objectEl = createFromTemplate('<object>', true) as HTMLObjectElement;
-        const button = createFromTemplate('<button tabindex="0">Not Tabbable</button>');
-
-        appendElements([objectEl]);
-
-        // This creates an empty contentDocument for the frame element.
-        objectEl.type = 'text/html';
-        objectEl.contentDocument!.body.appendChild(button);
-
-        expect(checker.isTabbable(objectEl)).toBe(false);
-        expect(checker.isTabbable(button)).toBe(false);
       });
 
       it('should not mark elements inside of invisible frames as tabbable', () => {
@@ -482,57 +472,6 @@ describe('InteractivityChecker', () => {
           expect(checker.isTabbable(objectEl)).toBe(false);
         }
       });
-
-    });
-
-    describe('for Blink browsers', () => {
-      let shouldSkip: boolean;
-
-      beforeEach(() => {
-        shouldSkip = !platform.BLINK;
-      });
-
-      it('should always mark audio elements with controls as tabbable', () => {
-        if (shouldSkip) {
-          return;
-        }
-
-        const audio = createFromTemplate('<audio controls>', true);
-
-        expect(checker.isTabbable(audio)).toBe(true);
-
-        audio.tabIndex = -1;
-
-        // The audio element will be still tabbable because Blink always
-        // considers them as tabbable.
-        expect(checker.isTabbable(audio)).toBe(true);
-      });
-
-    });
-
-    describe('for Internet Explorer', () => {
-      let shouldSkip: boolean;
-
-      beforeEach(() => {
-        shouldSkip = !platform.TRIDENT;
-      });
-
-      it('should never mark video elements without controls as tabbable', () => {
-        if (shouldSkip) {
-          return;
-        }
-
-        // In Internet Explorer video elements without controls are never tabbable.
-        const video = createFromTemplate('<video>', true);
-
-        expect(checker.isTabbable(video)).toBe(false);
-
-        video.tabIndex = 0;
-
-        expect(checker.isTabbable(video)).toBe(false);
-
-      });
-
     });
 
     describe('for iOS browsers', () => {

src/cdk/a11y/interactivity-checker/interactivity-checker.ts

@@ -72,23 +72,15 @@ export class InteractivityChecker {
     const frameElement = getFrameElement(getWindow(element));
 
     if (frameElement) {
-      const frameType = frameElement && frameElement.nodeName.toLowerCase();
-
       // Frame elements inherit their tabindex onto all child elements.
       if (getTabIndexValue(frameElement) === -1) {
         return false;
       }
 
-      // Webkit and Blink consider anything inside of an <object> element as non-tabbable.
-      if ((this._platform.BLINK || this._platform.WEBKIT) && frameType === 'object') {
+      // Browsers disable tabbing to an element inside of an invisible frame.
+      if (!this.isVisible(frameElement)) {
         return false;
       }
-
-      // Webkit and Blink disable tabbing to an element inside of an invisible frame.
-      if ((this._platform.BLINK || this._platform.WEBKIT) && !this.isVisible(frameElement)) {
-        return false;
-      }
-
     }
 
     let nodeName = element.nodeName.toLowerCase();
@@ -98,40 +90,46 @@ export class InteractivityChecker {
       return tabIndexValue !== -1;
     }
 
-    if (nodeName === 'iframe') {
-      // The frames may be tabbable depending on content, but it's not possibly to reliably
-      // investigate the content of the frames.
+    if (nodeName === 'iframe' || nodeName === 'object') {
+      // The frame or object's content may be tabbable depending on the content, but it's
+      // not possibly to reliably detect the content of the frames. We always consider such
+      // elements as non-tabbable.
+      return false;
+    }
+
+    // In iOS, the browser only considers some specific elements as tabbable.
+    if (this._platform.WEBKIT && this._platform.IOS && !isPotentiallyTabbableIOS(element)) {
       return false;
     }
 
     if (nodeName === 'audio') {
+      // Audio elements without controls enabled are never tabbable, regardless
+      // of the tabindex attribute explicitly being set.
       if (!element.hasAttribute('controls')) {
-        // By default an <audio> element without the controls enabled is not tabbable.
         return false;
-      } else if (this._platform.BLINK) {
-        // In Blink <audio controls> elements are always tabbable.
-        return true;
       }
+      // Audio elements with controls are by default tabbable unless the
+      // tabindex attribute is set to `-1` explicitly.
+      return tabIndexValue !== -1;
     }
 
     if (nodeName === 'video') {
-      if (!element.hasAttribute('controls') && this._platform.TRIDENT) {
-        // In Trident a <video> element without the controls enabled is not tabbable.
+      // For all video elements, if the tabindex attribute is set to `-1`, the video
+      // is not tabbable. Note: We cannot rely on the default `HTMLElement.tabIndex`
+      // property as that one is set to `-1` in Chrome, Edge and Safari v13.1. The
+      // tabindex attribute is the source of truth here.
+      if (tabIndexValue === -1) {
         return false;
-      } else if (this._platform.BLINK || this._platform.FIREFOX) {
-        // In Chrome and Firefox <video controls> elements are always tabbable.
+      }
+      // If the tabindex is explicitly set, and not `-1` (as per check before), the
+      // video element is always tabbable (regardless of whether it has controls or not).
+      if (tabIndexValue !== null) {
         return true;
       }
-    }
-
-    if (nodeName === 'object' && (this._platform.BLINK || this._platform.WEBKIT)) {
-      // In all Blink and WebKit based browsers <object> elements are never tabbable.
-      return false;
-    }
-
-    // In iOS the browser only considers some specific elements as tabbable.
-    if (this._platform.WEBKIT && this._platform.IOS && !isPotentiallyTabbableIOS(element)) {
-      return false;
+      // Otherwise (when no explicit tabindex is set), a video is only tabbable if it
+      // has controls enabled. Firefox is special as videos are always tabbable regardless
+      // of whether there are controls or not.
+      return this._platform.FIREFOX || element.hasAttribute('controls');
     }
 
     return element.tabIndex >= 0;