Fix issue number #33

dist/focus-ring.js

@@ -170,80 +170,25 @@ ClassList.prototype.toggle = function (token, force) {
   return (typeof force == 'boolean' ? force : !hasToken);
 };
 
-/**
- * Determine if a DOM element matches a CSS selector
- *
- * @param {Element} elem
- * @param {String} selector
- * @return {Boolean}
- * @api public
- */
-
-function matches(elem, selector) {
-  // Vendor-specific implementations of `Element.prototype.matches()`.
-  var proto = window.Element.prototype;
-  var nativeMatches = proto.matches ||
-      proto.mozMatchesSelector ||
-      proto.msMatchesSelector ||
-      proto.oMatchesSelector ||
-      proto.webkitMatchesSelector;
-
-  if (!elem || elem.nodeType !== 1) {
-    return false;
-  }
-
-  var parentElem = elem.parentNode;
-
-  // use native 'matches'
-  if (nativeMatches) {
-    return nativeMatches.call(elem, selector);
-  }
-
-  // native support for `matches` is missing and a fallback is required
-  var nodes = parentElem.querySelectorAll(selector);
-  var len = nodes.length;
-
-  for (var i = 0; i < len; i++) {
-    if (nodes[i] === elem) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
-/**
- * Expose `matches`
- */
-
-var index$1 = matches;
-
 /* https://github.com/WICG/focus-ring */
 document.addEventListener('DOMContentLoaded', function() {
   var hadKeyboardEvent = false;
-  var keyboardThrottleTimeoutID = 0;
   var elWithFocusRing;
-
-  // These elements should always have a focus ring drawn, because they are
-  // associated with switching to a keyboard modality.
-  var keyboardModalityWhitelist = [
-    'input:not([type])',
-    'input[type=text]',
-    'input[type=search]',
-    'input[type=url]',
-    'input[type=tel]',
-    'input[type=email]',
-    'input[type=password]',
-    'input[type=number]',
-    'input[type=date]',
-    'input[type=month]',
-    'input[type=week]',
-    'input[type=time]',
-    'input[type=datetime]',
-    'input[type=datetime-local]',
-    'textarea',
-    '[role=textbox]',
-  ].join(',');
+  var inputTypesWhitelist = {
+    'text': true,
+    'search': true,
+    'url': true,
+    'tel': true,
+    'email': true,
+    'password': true,
+    'number': true,
+    'date': true,
+    'month': true,
+    'week': true,
+    'time': true,
+    'datetime': true,
+    'datetime-local': true,
+  };
 
   /**
    * Computes whether the given element should automatically trigger the
@@ -253,7 +198,22 @@ document.addEventListener('DOMContentLoaded', function() {
    * @return {boolean}
    */
   function focusTriggersKeyboardModality(el) {
-    return index$1(el, keyboardModalityWhitelist) && index$1(el, ':not([readonly])');
+    var type = el.type;
+    var tagName = el.tagName.toLowerCase();
+
+    if (tagName == 'input' && inputTypesWhitelist[type] && !el.readonly) {
+      return true;
+    }
+
+    if (tagName == 'textarea' && !el.readonly) {
+      return true;
+    }
+
+    if (el.getAttribute('role').toLowerCase() == 'textbox') {
+      return true;
+    }
+
+    return false;
   }
 
   /**
@@ -265,7 +225,6 @@ document.addEventListener('DOMContentLoaded', function() {
     if (index(el).contains('focus-ring'))
       return;
     index(el).add('focus-ring');
-    el.setAttribute('data-focus-ring-added', '');
     // Keep a reference to the element to which the focus-ring class is applied
     // so the focus-ring class can be restored to it if the window regains
     // focus after being blurred.
@@ -278,42 +237,49 @@ document.addEventListener('DOMContentLoaded', function() {
    * @param {Element} el
    */
   function removeFocusRingClass(el) {
-    if (!el.hasAttribute('data-focus-ring-added'))
-      return;
     index(el).remove('focus-ring');
-    el.removeAttribute('data-focus-ring-added');
   }
 
   /**
    * On `keydown`, set `hadKeyboardEvent`, to be removed 100ms later if there
    * are no further keyboard events.  The 100ms throttle handles cases where
    * focus is redirected programmatically after a keyboard event, such as
    * opening a menu or dialog.
+   * @param {Event} e
    */
-  function onKeyDown() {
-    hadKeyboardEvent = true;
+  function onKeyDown(e) {
+    if (e.altKey || e.ctrlKey || e.metaKey)
+      return;
+
+    var isTabKey = e.keyCode == 9;
+    var isTabNavigation = isTabKey || isTabKey && e.shiftKey;
+
+    if (!isTabNavigation)
+      return;
+
     // `activeElement` defaults to document.body if nothing focused,
     // so check the active element is actually focused.
-    if (index$1(document.activeElement, ':focus'))
-      addFocusRingClass(document.activeElement);
-    if (keyboardThrottleTimeoutID !== 0)
-      clearTimeout(keyboardThrottleTimeoutID);
-    keyboardThrottleTimeoutID = setTimeout(function() {
-      hadKeyboardEvent = false;
-      keyboardThrottleTimeoutID = 0;
-    }, 100);
+    var activeElement = document.activeElement;
+    if (activeElement.tagName == 'body') {
+      return;
+    }
+
+    addFocusRingClass(activeElement);
+    hadKeyboardEvent = true;
   }
 
   /**
    * On `focus`, add the `focus-ring` class to the target if:
-   * - a keyboard event happened in the past 100ms, or
-   * - the focus event target triggers "keyboard modality" and should always
-   *   have a focus ring drawn.
+   * - a keydown event preceded the focus event, meaning the target received
+   *   focus as a result of keyboard navigation.
+   * - the event target is an element that will likely require interaction
+   *   via the keyboard (e.g. a text box)
    * @param {Event} e
    */
   function onFocus(e) {
     if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target))
       addFocusRingClass(e.target);
+      hadKeyboardEvent = false;
   }
 
   /**
@@ -325,7 +291,7 @@ document.addEventListener('DOMContentLoaded', function() {
   }
 
   /**
-   * When the window regains focus, restore the focus-ring class to the element 
+   * When the window regains focus, restore the focus-ring class to the element
    * to which it was previously applied.
    */
   function onWindowFocus() {
@@ -334,9 +300,9 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   }
 
-  document.body.addEventListener('keydown', onKeyDown, true);
-  document.body.addEventListener('focus', onFocus, true);
-  document.body.addEventListener('blur', onBlur, true);
+  document.addEventListener('keydown', onKeyDown, true);
+  document.addEventListener('focus', onFocus, true);
+  document.addEventListener('blur', onBlur, true);
   window.addEventListener('focus', onWindowFocus, true);
 });
 

package.json

@@ -29,7 +29,6 @@
     "rollup-watch": "^3.2.2"
   },
   "dependencies": {
-    "dom-classlist": "^1.0.1",
-    "dom-matches": "^2.0.0"
+    "dom-classlist": "^1.0.1"
   }
 }

src/focus-ring.js

@@ -1,32 +1,24 @@
 import classList from 'dom-classlist';
-import matches from 'dom-matches';
 
 /* https://github.com/WICG/focus-ring */
 document.addEventListener('DOMContentLoaded', function() {
   var hadKeyboardEvent = false;
-  var keyboardThrottleTimeoutID = 0;
   var elWithFocusRing;
-
-  // These elements should always have a focus ring drawn, because they are
-  // associated with switching to a keyboard modality.
-  var keyboardModalityWhitelist = [
-    'input:not([type])',
-    'input[type=text]',
-    'input[type=search]',
-    'input[type=url]',
-    'input[type=tel]',
-    'input[type=email]',
-    'input[type=password]',
-    'input[type=number]',
-    'input[type=date]',
-    'input[type=month]',
-    'input[type=week]',
-    'input[type=time]',
-    'input[type=datetime]',
-    'input[type=datetime-local]',
-    'textarea',
-    '[role=textbox]',
-  ].join(',');
+  var inputTypesWhitelist = {
+    'text': true,
+    'search': true,
+    'url': true,
+    'tel': true,
+    'email': true,
+    'password': true,
+    'number': true,
+    'date': true,
+    'month': true,
+    'week': true,
+    'time': true,
+    'datetime': true,
+    'datetime-local': true,
+  };
 
   /**
    * Computes whether the given element should automatically trigger the
@@ -36,7 +28,22 @@ document.addEventListener('DOMContentLoaded', function() {
    * @return {boolean}
    */
   function focusTriggersKeyboardModality(el) {
-    return matches(el, keyboardModalityWhitelist) && matches(el, ':not([readonly])');
+    var type = el.type;
+    var tagName = el.tagName.toLowerCase();
+
+    if (tagName == 'input' && inputTypesWhitelist[type] && !el.readonly) {
+      return true;
+    }
+
+    if (tagName == 'textarea' && !el.readonly) {
+      return true;
+    }
+
+    if (el.getAttribute('role').toLowerCase() == 'textbox') {
+      return true;
+    }
+
+    return false;
   }
 
   /**
@@ -48,7 +55,6 @@ document.addEventListener('DOMContentLoaded', function() {
     if (classList(el).contains('focus-ring'))
       return;
     classList(el).add('focus-ring');
-    el.setAttribute('data-focus-ring-added', '');
     // Keep a reference to the element to which the focus-ring class is applied
     // so the focus-ring class can be restored to it if the window regains
     // focus after being blurred.
@@ -61,42 +67,49 @@ document.addEventListener('DOMContentLoaded', function() {
    * @param {Element} el
    */
   function removeFocusRingClass(el) {
-    if (!el.hasAttribute('data-focus-ring-added'))
-      return;
     classList(el).remove('focus-ring');
-    el.removeAttribute('data-focus-ring-added');
   }
 
   /**
    * On `keydown`, set `hadKeyboardEvent`, to be removed 100ms later if there
    * are no further keyboard events.  The 100ms throttle handles cases where
    * focus is redirected programmatically after a keyboard event, such as
    * opening a menu or dialog.
+   * @param {Event} e
    */
-  function onKeyDown() {
-    hadKeyboardEvent = true;
+  function onKeyDown(e) {
+    if (e.altKey || e.ctrlKey || e.metaKey)
+      return;
+
+    var isTabKey = e.keyCode == 9;
+    var isTabNavigation = isTabKey || isTabKey && e.shiftKey;
+
+    if (!isTabNavigation)
+      return;
+
     // `activeElement` defaults to document.body if nothing focused,
     // so check the active element is actually focused.
-    if (matches(document.activeElement, ':focus'))
-      addFocusRingClass(document.activeElement);
-    if (keyboardThrottleTimeoutID !== 0)
-      clearTimeout(keyboardThrottleTimeoutID);
-    keyboardThrottleTimeoutID = setTimeout(function() {
-      hadKeyboardEvent = false;
-      keyboardThrottleTimeoutID = 0;
-    }, 100);
+    var activeElement = document.activeElement;
+    if (activeElement.tagName == 'body') {
+      return;
+    }
+
+    addFocusRingClass(activeElement);
+    hadKeyboardEvent = true;
   }
 
   /**
    * On `focus`, add the `focus-ring` class to the target if:
-   * - a keyboard event happened in the past 100ms, or
-   * - the focus event target triggers "keyboard modality" and should always
-   *   have a focus ring drawn.
+   * - a keydown event preceded the focus event, meaning the target received
+   *   focus as a result of keyboard navigation.
+   * - the event target is an element that will likely require interaction
+   *   via the keyboard (e.g. a text box)
    * @param {Event} e
    */
   function onFocus(e) {
     if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target))
       addFocusRingClass(e.target);
+      hadKeyboardEvent = false;
   }
 
   /**
@@ -117,8 +130,8 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   }
 
-  document.body.addEventListener('keydown', onKeyDown, true);
-  document.body.addEventListener('focus', onFocus, true);
-  document.body.addEventListener('blur', onBlur, true);
+  document.addEventListener('keydown', onKeyDown, true);
+  document.addEventListener('focus', onFocus, true);
+  document.addEventListener('blur', onBlur, true);
   window.addEventListener('focus', onWindowFocus, true);
 });