search

nexxtway / react-rainbow

🌈 React Rainbow Components. Build your web application in a snap.
https://react-rainbow.io
MIT License
1.79k stars 112 forks source link

fix: return the focus to the trigger element when close the Modal component on "Safari" and "Firefox" browsers #1407

Open TahimiLeonBravo opened 4 years ago

TahimiLeonBravo commented 4 years ago

Requirements:

We should follow this spec: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

Note: This behavior is working well on Chrome, it should be work in the same way on Firefox and Safari.

Charlitos96 commented 4 years ago

Hi, I would like to work on this issue 😄

LeandroTorresSicilia commented 4 years ago

Great!, you can submit a pull request

Charlitos96 commented 4 years ago

Hi @TahimiLeonBravo ! I was looking to reproduce the issue, but I can't make it happen. Can you give me more info about how you lost the focus?

My OS Windows 10

What I do? I run on localhost:6060 the project, on Mozila firefox and the focus of the component Modal returns to the button.

Let me know if I need to do something else to reproduce the problem 😄

LeandroTorresSicilia commented 4 years ago

Seems this is happening in macOS with Mozilla and Safari

Charlitos96 commented 4 years ago

Hi, I made a PR with the changes, I had some problems at the moment of making the push because some warnings on the code that I don't made, so let me know if it's ok! 😄

Charlitos96 commented 4 years ago

Update: I found that document.activeElement doesn't work on iOS, it returns body that's the reason why the focus gets lost. We can use event.target but that will work through handleOnClick() not on the component Modal. I tried with document.querySelector() but don't work for this. Do you have any suggestions about how to access from componentDidUptadate?

LeandroTorresSicilia commented 4 years ago

@Charlitos96 I think we should follow this: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html note that in these examples returning the focus to trigger element works perfectly in all browsers, also here you can see its source code https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

Charlitos96 commented 4 years ago

Hello, Following the pattern from the link, they pass the reference of the element that triggered the Modal using openModal('dialog1',this). Using that as a guide, I update the method handleOnClick() to pass the reference of the button with event.target to update modalTriggerElement with it. If this was not the approach you suggested please let me know. 😄

Charlitos96 commented 4 years ago

Hello, I can't keep working on this, the problem is with the way that Mac handle the focus, not on the code. I hope anyone can find another solution.