search

ghosh / Micromodal

⭕ Tiny javascript library for creating accessible modal dialogs
https://micromodal.now.sh/
MIT License
3.54k stars 230 forks source link

Focus trapping with hidden interactive elements #295

Closed DimaGashko closed 4 years ago

DimaGashko commented 4 years ago

Hi! I really like that you lock the focus inside the modal, but I've just found that if there are any hidden buttons (display: none in my case), then we can go out of the modal, and focus behavior becomes confusing.

p.s. I found it making a modal window than contains hidden "try again" button.

ghosh commented 4 years ago

@DimaGashko Thanks for opening this issue. Would you be open to creating a test case on codepen where we could see the issue?

DimaGashko commented 4 years ago

I see, you added this to fix the bug: https://github.com/ghosh/Micromodal/blob/master/lib/src/index.js#L178 But it looks like you didn't do that in setFocusToFirstNode function: https://github.com/ghosh/Micromodal/blob/master/lib/src/index.js#L150

p.s. I'd like to have an option to disable behaviour of not focusing close targets on modal opening: https://github.com/ghosh/Micromodal/blob/master/lib/src/index.js#L160

DimaGashko commented 4 years ago

Also setFocusToFirstNode doesn't check if the node is visible, so when I open a modal which contains a hidden input it tries to focus the hidden input (but fails and focuses the close target)

console.log(nodesWhichAreNotCloseTargets[0]);

image