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

[TahimiLeonBravo]

Requirements:

• When the modal is closed it should give the focus to the element triggered.

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]

Hi, I would like to work on this issue 😄

[LeandroTorresSicilia]

Great!, you can submit a pull request

[Charlitos96]

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]

Seems this is happening in macOS with Mozilla and Safari

[Charlitos96]

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]

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]

@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]

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]

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.