Tabbing not possible inside display: contents

[aloker]

Summary:

Within a modal, it is not possible to tab through elements inside an element with display: contents

Steps to reproduce:

1. Create a modal with an element that has display: contents
2. Put focus-able elements inside that element (eg inputs)
3. Try to tab through the inputs
4. No focus change on tab

Expected behavior:

Focus switches to the next input element on tab

Link to example of issue:

See https://codesandbox.io/s/flamboyant-sunset-t3pbm Open the dialog, then try to tab through the inputs - it won't work. Then change display: "contents" to display: "block" - tabbing no works.

Additional notes:

This is caused by the fact that elements with display: "contents" have a size of 0x0 and tabbable assumes the content is invisible: https://github.com/reactjs/react-modal/blob/fb6bab5e7fda5b616efca201cf9b68df21e592f9/src/helpers/tabbable.js#L15-L34

It can be fixed by checking for display: contents, like so:

diff --git a/node_modules/react-modal/lib/helpers/tabbable.js b/node_modules/react-modal/lib/helpers/tabbable.js
index c72bf54..0e8a07a 100644
--- a/node_modules/react-modal/lib/helpers/tabbable.js
+++ b/node_modules/react-modal/lib/helpers/tabbable.js
@@ -27,6 +27,10 @@ function hidesContents(element) {
   try {
     // Otherwise we need to check some styles
     var style = window.getComputedStyle(element);
+    if(style.getPropertyValue("display") === "contents"){
+      // display === "contents" does not hide its contents even if its size is (always) 0x0
+      return false;
+    }
     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";

[galexandrade]

@diasbruno and @aloker, I would be glad to help with whatever is needed to get this fix out. Let me know if there is anything I can do to help.

[galexandrade]

@diasbruno what release version includes this fix?

[diasbruno]

@galexandrade Just release 3.16.1. :tada: