Using the <dialog> tag

[craigfrancis]

You could look at the HTML5 dialog tag, as it will give much better symantics for assistive devices (or simply the browser) to use.

For example, when the dialog is "open" and "modal", supporting browsers will limit the focusable controls to those elements within the dialog (e.g. tabbing between elements won't focus anything else on the page, so you don't need to do anything in JS to fix that).

https://github.com/GoogleChrome/dialog-polyfill

https://developer.mozilla.org/en/docs/Web/HTML/Element/dialog

[danhumaan]

Thanks for sharing @craigfrancis when we have a bit more time free we'll do some reading on this spec. Ideally we'd prefer not to have to load a polyfill with the library, but it's definitely worth us doing some reading.

[craigfrancis]

Just for reference, you are kind of doing all the work of the pollyfill anyway, so you shouldn't need to include any extra JS.

Hopefully (and this is from someone who hasn't really looked in detail at your code), you will be able to change:

<div class="modaal-wrapper...

To

<dialog class="modaal-wrapper...

Then update the appropriate methods to either call the native showModal()/close() methods, or call your own.

This would help provide some semantics to the document, and help with tab focus (as browsers that support these will be able to do a much cleaner job than looking at e.keyCode == 9).

One thing that might be odd is handling the ::backdrop for styling.

:-)