From 9be00a988d8d43f8fcae7c0dc2f3d85d74c0adab Mon Sep 17 00:00:00 2001
From: Phil Marshall <35127144+flurmbo@users.noreply.github.com>
Date: Fri, 4 Oct 2019 10:39:18 -0500
Subject: [PATCH] [fixed] some untabbable elements are being returned from
 findTabbable (#774)

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

- add test
- fix apparent typo in test spec
---
 specs/Modal.helpers.spec.js | 15 ++++++++++++---
 src/helpers/tabbable.js     |  4 +++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/specs/Modal.helpers.spec.js b/specs/Modal.helpers.spec.js
index 50931619..11e22a3f 100644
--- a/specs/Modal.helpers.spec.js
+++ b/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);
+      });
     });
   });
 };
diff --git a/src/helpers/tabbable.js b/src/helpers/tabbable.js
index e1aa3936..f83f1480 100644
--- a/src/helpers/tabbable.js
+++ b/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";
 }