Description
Summary:
While this is not a react-modal bug, I thought to report it to share the issue. It's more about different implementations of document.activeElement across browsers/platforms related to buttons.
Everything works as expected when activating a button using the keyboard. However, when clicking with the mouse/trackpad on a button, some browsers return the <body> as document.activeElement.
While it's not a bug and keyboard accessibility is safe, it would be great try to find a way to have the full functionality working also when using a pointing device.
Steps to reproduce:
- on macOS, use Firefox or Safari
- use the Global Overrides demo, because it uses two buttons and helps making clear what's going on
- click with the mouse/trackpad on the second button
- at this point
document.activeElementreturns the body - close the modal pressing Escape
- notice focus is not moved back to the second button (actually it's on the iframe
<body>) - press Tab to double check where focus is, you will see the first button gets focused
Additional notes:
More details on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
Data reported there seems still accurate to me, see the summary table:
Note: I wouldn't know how to solve this in a clean way 🙂 but again, it's more to share and be aware of the issue.