From b7661b4e2b82720cc93bd08f6ce7af4d87e90b82 Mon Sep 17 00:00:00 2001
From: stefan judis <stefanjudis@gmail.com>
Date: Thu, 10 Aug 2017 02:06:17 -0500
Subject: [PATCH] Add body class when loaded

---
 README.md          | 10 +++++++---
 dist/focus-ring.js | 12 +++++++-----
 src/focus-ring.js  |  2 ++
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 95cda5e..4071f01 100644
--- a/README.md
+++ b/README.md
@@ -16,10 +16,11 @@ in situations in which the `:focus-ring` pseudo-selector should match.
 
 We suggest that users
 selectively disable the default focus style
-by selecting for the case when `.focus-ring` is _not_ applied:
+by selecting for the case when the polyfill is loaded
+and `.focus-ring` is _not_ applied to the element:
 
 ```html
-:focus:not(.focus-ring) {
+.focus-ring-enabled :focus:not(.focus-ring) {
     outline-width: 0;
 }
 ```
@@ -134,9 +135,12 @@ The tiny
 provides a prototype intended to achieve the goals we are proposing
 with technology that exists today
 in order for developers to be able to try it out, understand it and provide feedback.
-It simply sets a `.focus-ring` class on the active element
+It simply sets a `.focus-ring-enabled` class to the body element
+to provide a way to disable focus styles only when the polyfill is loaded.
+It also sets a `.focus-ring` class on the active element
 if the script determines that the keyboard is being used.
 This attribute is removed on any `blur` event.
+
 This allows authors to write rules
 which show a focus style only when it would be relevant to the user.
 Note that the prototype does not match the proposed API -
diff --git a/dist/focus-ring.js b/dist/focus-ring.js
index a86c0e7..ead5bf3 100644
--- a/dist/focus-ring.js
+++ b/dist/focus-ring.js
@@ -288,15 +288,15 @@ function init() {
    * to which it was previously applied.
    */
   function onWindowFocus() {
-    if (document.activeElement == elWithFocusRing) {
+    if (document.activeElement == elWithFocusRing)
       addFocusRingClass(elWithFocusRing);
-      elWithFocusRing = null;
-    }
+
+    elWithFocusRing = null;
   }
 
   /**
-   * When the window regains focus, restore the focus-ring class to the element
-   * to which it was previously applied.
+   * When switching windows, keep track of the focused element if it has a
+   * focus-ring class.
    */
   function onWindowBlur() {
     if (document.activeElement.classList.contains('focus-ring')) {
@@ -312,6 +312,8 @@ function init() {
   document.addEventListener('blur', onBlur, true);
   window.addEventListener('focus', onWindowFocus, true);
   window.addEventListener('blur', onWindowBlur, true);
+
+  document.body.classList.add('focus-ring-enabled');
 }
 
 /**
diff --git a/src/focus-ring.js b/src/focus-ring.js
index cad6353..ec86576 100644
--- a/src/focus-ring.js
+++ b/src/focus-ring.js
@@ -142,6 +142,8 @@ function init() {
   document.addEventListener('blur', onBlur, true);
   window.addEventListener('focus', onWindowFocus, true);
   window.addEventListener('blur', onWindowBlur, true);
+
+  document.body.classList.add('focus-ring-enabled');
 }
 
 /**