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... [Read Full]
markdown guide
 

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.

 

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

 
code of conduct - report abuse