DEV Community

Cover image for Accessibility first: Dialog

Accessibility first: Dialog

Andrew Bone on May 18, 2019

It's time for another blog post, this time I'll be making a dialogue pop up. Those of you who have read some of my earlier posts may know that I wr...
Collapse
 
thekashey profile image
Anton Korzunov

Tab Key, Tab to the next selectable item (the browser handles this by default)

Not quite, the browser is not restricting focusables to the dialog, and you have to use a thing called FocusLock or FocusTrap to keep focus within the Modal, to make it modal.

Use focus-lock for this - there are dom, react and vue ports of the library.

In the same time, you also have to disable page scroll, but that's another story.

Collapse
 
link2twenty profile image
Andrew Bone

I would tend to use the inert polyfill but was aiming to avoid adding external JS. I will add a caveat to the article 😊

Collapse
 
rhymes profile image
rhymes

Congrats for the new job Andrew, awesome post as always!

Collapse
 
link2twenty profile image
Andrew Bone

Thanks 😁