reactjs/react-modal

When clicking on a button document.activeElement fails in some browsers

afercia opened this issue · 2 comments

afercia commented

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:

  1. on macOS, use Firefox or Safari
  2. use the Global Overrides demo, because it uses two buttons and helps making clear what's going on
  3. click with the mouse/trackpad on the second button
  4. at this point document.activeElement returns the body
  5. close the modal pressing Escape
  6. notice focus is not moved back to the second button (actually it's on the iframe <body>)
  7. 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:

screen shot 2017-05-26 at 15 41 07

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.

diasbruno commented

Thanks, @afercia, great report. Maybe it has something to do with how the focusManager works. It's tries to stack all previous focused/active elements (in case one modal is opened from inside other modal), and focus them back when a modal is closed.

So, if a click does not set the element as document.activeElement, there is the problem.

One way to fix this (if it's the correct behavior) would be to use the focusManager to inject the element onto the stack of previous active elements. This way it will give/return the focus to it.

Reference: react-modal#focusManager.js

afercia commented

@diasbruno thanks

One way to fix this (if it's the correct behavior)

I think it's the best default. In some, rare, cases maybe it would be great to have a built-in way to override the default though and pass a reference to another element to move focus back to. I guess this is a separate issue :)

  • 😄1