Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
afercia opened this issue May 26, 2017 · 2 comments
Open

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

afercia opened this issue May 26, 2017 · 2 comments
Labels
bug discussion

Comments

@afercia
Copy link

afercia commented May 26, 2017

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
Copy link
Collaborator

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
Copy link
Author

afercia commented Jun 9, 2017

@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 :)

@iliajie iliajie mentioned this issue Oct 31, 2017
Closed
@diasbruno diasbruno mentioned this issue Jun 14, 2021
Closed
@AChityala AChityala mentioned this issue Oct 3, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug discussion
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@diasbruno @afercia