Focus Trap not working in Safari with Link

[mattpen]

Summary:

Focus Trap not working in Safari with Link

If you create a modal, and the first element is a link (<a>), then focus can escape if you are using Safari and you either (a) did not enable the setting "Press Tab to highlight each item on a webpage" or (b) are not using Option+Tab to navigate. It looks like since the browser skips focus on that link that the focus trap listeners don't ever get a chance to fire.

Steps to reproduce:

1. Create a simple ReactModal with a link and a button:

<button>Outer Button</button>
<Modal isOpen={true}>
   <a href="https://https://github.com/reactjs/react-modal/">Click this link!</a>
   <button>Inner Button</button>
</Modal>

2. In Safari's Settings / Advanced, uncheck "Press Tab to highlight each item on a webpage".
3. Open the modal, the link is focused.
4. Hit Tab, the Inner Button is focused.
5. Hit Shift+Tab, the Outer Button is focused.

Expected behavior:

Focus should be trapped in modals on Safari no matter whether you are using Tab or Option Tab, despite your setting for "Press Tab to highlight each item on a webpage".

Link to example of issue:

https://codesandbox.io/s/react-modal-issue-template-forked-5kvtgx

Additional notes: