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:

[venkatajanapareddy]

I've been investigating this issue and can confirm it affects all Safari users by default.

Safari intentionally follows macOS system behavior where Tab only focuses on text inputs and form controls by default - links and buttons are skipped unless users enable "Press Tab to highlight each item on a webpage" in settings. The "Press Tab to highlight each item on a webpage" setting is unchecked by default in Safari, making this a critical accessibility issue affecting every Safari user out of the box.

This breaks react-modal's focus trap because when the modal opens with a link as the first element, Safari doesn't recognize it as tabbable. When the user presses Tab, Safari skips right over the link, causing focus to jump outside the modal boundaries.

While Option+Tab does work to focus all elements in Safari, most users don't know this keyboard shortcut exists, making the modal effectively inaccessible for keyboard navigation. This affects all Safari users with default settings, which is the vast majority of Safari users.