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.
Not quite, the browser is not restricting focusables to the dialog, and you have to use a thing called
FocusLockorFocusTrapto 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 😊