Fixes #80. Guard against IE11 focusing SVG. (#146)

* Fixes #80. Guard against IE11 focusing SVG. * Update test to check that focus-visible is not applied.
WICG · Aug 4, 2018 · 1756d66 · Agamnentzar · Aug 4, 2018 · robdodson
1 parent effec50
commit 1756d66
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 2 deletions.
diff --git a/src/focus-visible.js b/src/focus-visible.js
@@ -24,15 +24,17 @@ function init() {
 
   /**
    * Helper function for legacy browsers and iframes which sometimes focus
-   * elements like document and body.
+   * elements like document, body, and non-interactive SVG.
    * @param {Element} el
    */
   function isValidFocusTarget(el) {
     if (
       el &&
       el !== document &&
       el.nodeName !== 'HTML' &&
-      el.nodeName !== 'BODY'
+      el.nodeName !== 'BODY' &&
+      'classList' in el &&
+      'contains' in el.classList
     ) {
       return true;
     }

diff --git a/test/fixtures/svg.html b/test/fixtures/svg.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>svg focus fixture</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      .js-focus-visible :focus:not(.focus-visible) {
+        outline: none;
+      }
+      .focus-visible {
+        outline: 2px solid red;
+      }
+    </style>
+  </head>
+  <body>
+    <button id="start">Start</button>
+    <button id="middle">
+      <svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+        <circle cx="50" cy="50" fill="red" r="50"></circle>
+      </svg>
+    </button>
+    <button id="end">End</button>
+    <script src="/dist/focus-visible.js"></script>
+  </body>
+</html>
diff --git a/test/specs/svg.js b/test/specs/svg.js
@@ -0,0 +1,63 @@
+const { fixture, FOCUS_RING_STYLE } = require('./helpers');
+const { Key, By } = require('selenium-webdriver');
+const expect = require('expect');
+const driver = global.__driver;
+
+// IE11 has a strange behavior where it will always focus an <svg> on the page.
+// This test is to verify that we don't hit an error in this situation.
+// See https://github.com/WICG/focus-visible/issues/80#issuecomment-383424156.
+describe.only('svg focus', function() {
+  beforeEach(function() {
+    return fixture('svg.html');
+  });
+
+  it('should NOT apply .focus-visible if a non-interactive SVG is keyboard focused', async function() {
+    let actual;
+
+    // Tells Selenium to keep sending Tabs until the end element is reached.
+    async function tabUntil(body, end) {
+      let activeId;
+      let activeElement;
+
+      while (true) {
+        activeId = await driver.executeScript(
+          `return document.activeElement.id`
+        );
+
+        if (activeId) {
+          if (activeId === end) {
+            break;
+          }
+          // Only IE11 will stop here and focus the #icon element.
+          // If the element has focus, assert that :focus-visible has not been
+          // applied to it.
+          if (activeId === 'icon') {
+            actual = await driver.executeScript(`
+              return window.getComputedStyle(document.querySelector('#end')).outlineColor
+            `);
+            expect(actual).toNotEqual(FOCUS_RING_STYLE);
+          }
+          // Move focus to the next element.
+          // IE11's selenium driver won't move focus if we send it to body again
+          // so we need to send it to the activeElement.
+          activeElement = await driver.findElement(By.css(`#${activeId}`));
+          await activeElement.sendKeys(Key.TAB);
+        } else {
+          // Work around IE11 weirdness which sends focus to <html> first.
+          await body.sendKeys(Key.TAB);
+        }
+      }
+    }
+
+    let body = await driver.findElement(By.css('body'));
+    await body.click();
+    // Tabs through the document until it reaches the last element.
+    // In IE11 the non-interactive SVG, #icon will be focused.
+    // If it throws, then the test will fail.
+    await tabUntil(body, 'end');
+    actual = await driver.executeScript(`
+      return window.getComputedStyle(document.querySelector('#end')).outlineColor
+    `);
+    expect(actual).toEqual(FOCUS_RING_STYLE);
+  });
+});