New and improved script version

[KittyGiraudel]

Hey I took the liberty to make a new version for the script including the following features:

• no more jQuery dependency 🎉
• possibility to have several different modals on the page
• DOM API for openers (data-show-modal="modal-id") / closers (data-hide-modal)
• JS API to manually show and hide the modal (modal.show(), modal.hide())
• JS API to know whether it’s hidden or shown (modal.shown)
• Addition of [tabindex]:not([value="-1"]) to focusable elements
• Cleaner code

Find the code here: https://github.com/edenspiekermann/accessible-modal-dialog.
Find a demo here: http://codepen.io/HugoGiraudel/pen/jWQqeq?editors=0100.

Would you like me to submit a PR?

[goetsu]

Hi, there is some issue in your demo, the focus trap inside the modale isn't good :

• when you use shift tab
• when you use tab the close button just get focused once

Furthermore, there is also an issue if for some reason after opening a modal the user use keyboard shortcut to access the browser interface (like the search feature or adress bar) then go back to the page. In that case, the focus go under the modal window

[KittyGiraudel]

when you use shift tab
when you use tab the close button just get focused once

Not sure I get what the problem is here.

[goetsu]

• go to the open modal button,
• activate it with space key,
• the focus go to the close button inside the modal then use tab key
• the focus go to the links under it but when you reach the last one "trap" and hit tab key once again the focus go back to the first link instead of going back to the close button
• then try shift tab the focus go back to the close button and hit shift tab once again the focus go to "focus" instead of "trap"

I'm using last version FF on osX

[KittyGiraudel]

Non reproducible on Chrome. Investigating on the Firefox case right now.

Furthermore, there is also an issue if for some reason after opening a modal the user use keyboard shortcut to access the browser interface (like the search feature or adress bar) then go back to the page. In that case, the focus go under the modal window

This should be fixed.