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"; }