[fixed] Ensure we don't check for hidden on Shadow DOM.

When inside a Shadow DOM, the loop will eventually reach the Shadow DOM element itself, which cannot be checked for visibility. We can continue our upwards check by skipping to the Shadow DOM host.

Author: stevematney

package-lock.json

@@ -23,6 +23,7 @@
   ],
   "license": "MIT",
   "devDependencies": {
+    "@webcomponents/custom-elements": "^1.5.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.25.0",
     "babel-eslint": "^8.0.1",

package.json

@@ -1,5 +1,6 @@
 /* eslint-env mocha */
 import "should";
+import "@webcomponents/custom-elements/src/native-shim";
 import tabbable from "../src/helpers/tabbable";
 import "sinon";
 
@@ -114,6 +115,60 @@ export default () => {
         elem.appendChild(button);
         tabbable(elem).should.not.containEql(button);
       });
+
+      describe("inside Web Components", () => {
+        let wc;
+        let input;
+        class TestWebComponent extends HTMLElement {
+          constructor() {
+            super();
+          }
+
+          connectedCallback() {
+            this.attachShadow({
+              mode: "open"
+            });
+            this.style.display = "block";
+            this.style.width = "100px";
+            this.style.height = "25px";
+          }
+        }
+
+        const registerTestComponent = () => {
+          if (window.customElements.get("test-web-component")) {
+            return;
+          }
+          window.customElements.define("test-web-component", TestWebComponent);
+        };
+
+        beforeEach(() => {
+          registerTestComponent();
+          wc = document.createElement("test-web-component");
+
+          input = document.createElement("input");
+          elem.appendChild(input);
+
+          document.body.appendChild(wc);
+          wc.shadowRoot.appendChild(elem);
+        });
+
+        afterEach(() => {
+          // re-add elem to body for the next afterEach
+          document.body.appendChild(elem);
+
+          // remove Web Component
+          document.body.removeChild(wc);
+        });
+
+        it("includes elements when inside a Shadow DOM", () => {
+          tabbable(elem).should.containEql(input);
+        });
+
+        it("excludes elements when hidden inside a Shadow DOM", () => {
+          wc.style.display = "none";
+          tabbable(elem).should.not.containEql(input);
+        });
+      });
     });
   });
 };

specs/Modal.helpers.spec.js

@@ -35,8 +35,13 @@ function hidesContents(element) {
 
 function visible(element) {
   let parentElement = element;
+  let rootNode =
+    typeof element.getRootNode === "function"
+      ? element.getRootNode()
+      : undefined;
   while (parentElement) {
     if (parentElement === document.body) break;
+    if (rootNode && parentElement === rootNode) parentElement = rootNode.host;
     if (hidesContents(parentElement)) return false;
     parentElement = parentElement.parentNode;
   }