fixing element with display 'contents' is visible and is tabbable

Author: galexandrade

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);