Issue on Modal Lock when modal contains web component that contains an iframe

[beekermememe]

Summary:

We have a case where we have a web component that renders an iframe that is rendered in the modal. The modal outside of the iframe also has 3 buttons.

The structure looks like this

<div id="iframe" class="template">
    <div class="app" id="vf-frame">
        <!--render facet: 78:0-->
        <div class="one">
            <some-page host="">
                <div some-page="" class="content iframe-parent">
                    <iframe some-page="" height="100%" width="100%" scrolling="yes" allowtransparency="true" name="wizard" title="accessibility title" allowfullscreen="true" lang="en-US" allow="geolocation ; microphone ; camera *" tabindex="0" sandbox="allow-same-origin allow-scripts" id="wiz">
                    </iframe>
                </div>
                </somepage>
        </div>
    </div>
</div>

The issue is that as the react-modal is cycling through the elements to determine whether they are tabbable, when it comes to cycling through the modal, it goes from inside to out. As it moves from <iframe id="wiz"> up to the parent node to <div class="content iframe-parent"> then up the the next parent node <some-page>

I was able to confirm that the issue is that when it hits the , this is being returned as a ShadowRoot object, which has no parent and is not supported by the window.getComputedStyle (since it can never have style)

https://github.com/reactjs/react-modal/blob/53dff4b07a729c07d4f77f73f4c6de53fe22af23/src/helpers/tabbable.js#L22 const style = window.getComputedStyle(element);

Steps to reproduce:

Easiest to reproduce on Safari

1. Using the sandbox, open the modal
2. Use the keyboard to cycle through the tababble elements in the modal
3. Note that the tabbing goes outside of the modal

Expected behavior:

When launching the modal, the focus should stay on the modal and cycle through the elements in and out of the iframe but within the modal

Link to example of issue:

https://codesandbox.io/s/react-modal-issue-template-forked-l5ryn?file=/index.js

Additional notes:

I did some testing and adding a case before the line where the error occurs to check to see if the element is of object type ShadowRoot and then return true if it is, looks to fix the issue