From aca526183f5a71fbbe57d1a25f0fd2a8518a7a08 Mon Sep 17 00:00:00 2001 From: Alex Andrade Date: Thu, 13 Oct 2022 20:27:18 -0600 Subject: [PATCH] fixing element with display 'contents' is visible and is tabbable --- src/helpers/tabbable.js | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/src/helpers/tabbable.js b/src/helpers/tabbable.js index 185f74e4..e9bcaa4c 100644 --- a/src/helpers/tabbable.js +++ b/src/helpers/tabbable.js @@ -10,8 +10,19 @@ * http://api.jqueryui.com/category/ui-core/ */ +const DISPLAY_NONE = "none"; +const DISPLAY_CONTENTS = "contents"; + const tabbableNode = /input|select|textarea|button|object|iframe/; +function isNotOverflowing(element, style) { + return ( + style.getPropertyValue("overflow") !== "visible" || + // if 'overflow: visible' set, check if there is actually any overflow + (element.scrollWidth <= 0 && element.scrollHeight <= 0) + ); +} + function hidesContents(element) { const zeroSize = element.offsetWidth <= 0 && element.offsetHeight <= 0; @@ -21,11 +32,10 @@ function hidesContents(element) { try { // Otherwise we need to check some styles const style = window.getComputedStyle(element); + const displayValue = style.getPropertyValue("display"); return zeroSize - ? 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"; + ? displayValue !== DISPLAY_CONTENTS && isNotOverflowing(element, style) + : displayValue === DISPLAY_NONE; } catch (exception) { // eslint-disable-next-line no-console console.warn("Failed to inspect element style"); @@ -68,9 +78,10 @@ export default function findTabbableDescendants(element) { const descendants = [].slice .call(element.querySelectorAll("*"), 0) .reduce( - (finished, el) => finished.concat( - !el.shadowRoot ? [el] : findTabbableDescendants(el.shadowRoot) - ), + (finished, el) => + finished.concat( + !el.shadowRoot ? [el] : findTabbableDescendants(el.shadowRoot) + ), [] ); return descendants.filter(tabbable);