[fixed] some untabbable elements are being returned from findTabbable (…

…reactjs#774)

* [fixed] some untabbable elements are being returned from findTabbable

- add test
- fix apparent typo in test spec

specs/Modal.helpers.spec.js

@@ -99,12 +99,21 @@ export default () => {
 
       it("includes inputs visible because of overflow == visible", () => {
         const input = document.createElement("input");
-        elem.style.width = "0";
-        elem.style.height = "0";
-        elem.style.overflow = "visible";
+        input.style.width = "0";
+        input.style.height = "0";
+        input.style.overflow = "visible";
         elem.appendChild(input);
         tabbable(elem).should.containEql(input);
       });
+
+      it("excludes elements with overflow == visible if there is no visible content", () => {
+        const button = document.createElement("button");
+        button.innerHTML = "You can't see me!";
+        button.style.display = "none";
+        button.style.overflow = "visible";
+        elem.appendChild(button);
+        tabbable(elem).should.not.containEql(button);
+      });
     });
   });
 };

src/helpers/tabbable.js

@@ -21,7 +21,9 @@ function hidesContents(element) {
   // Otherwise we need to check some styles
   const style = window.getComputedStyle(element);
   return zeroSize
-    ? style.getPropertyValue("overflow") !== "visible"
+    ? style.getPropertyValue("overflow") !== "visible" ||
+        // if 'overflow: visible' set, check if there is actually any overflow
+        (element.scrollWidth <= 0 && element.scrollHeight <= 0)
     : style.getPropertyValue("display") == "none";
 }