PROJECTS
Modals
MODAL FORMS
IN-DEPTHA debatable case for modals is the use of forms within
modals. At first it certainly does sound like a horror story –
after all, the thought of filling out a form and then accidentally
dismissing it is enough to send someone into total meltdown. It’s
happened to me a couple of times and admittedly I totally freaking
lost it. So exactly what do we need to consider when using forms
inside modals?O Maintain correct tab order
(https://developer.mozilla.org/en-US/docs/Web/HTML/Global_
attributes/tabindex)O Ensure that the main document is not focusableO Don’t mess with CSS overflow:, to avoid ‘cut off’O Disable esc-to-dismiss and click-backdrop-to-dismissPersonally, forms inside modals is where I typically draw the line.
Even if they’re totally usable and accessible, users don’t know this
if they’re using the website/form for the first time.
Modals of this kind can make users feel anxious just by existing,
slowing them down as they become more occupied with avoiding
accidental interaction than focusing on the task at hand. In any
case, I’d recommend using modals with caution.Top Bootstrap’s modal forms can be dismissed by accidentally clicking on the
backdrop or accidentally hitting the esc keytop: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
display: block;
position: fixed;
}
#modal.open, /* fallback */
#modal[open]::backdrop {
backdrop-filter: blur(5px);
background: rgba(0, 0, 0, 0.5);
}
#modal div.content {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(2, 1fr);
}When the open attribute and ::backdrop pseudo-
element isn’t supported, we need to style the modal
manually using the .open class. When it is supported,
the <dialog> is shown pre-styled (minus any aesthetic
styles we’ll want to add).
When supported, backdrop-filter: assigns a filter
to the backdrop that isn’t inherited by its child
elements (making it easy to apply an Apple-like
background blur effect) and of course ::backdrop is for
styling the backdrop itself (unless you happen to be
alright with its default styling).STEP 4: SWITCH FOCUS TO THE MODAL
Because dialogs are essentially overlays, we need to
ensure that the main document is rendered inactive
until the user wishes to return to it. For mouse
users, this experience is the default; however, non-
mouse users and those that navigate using assistive
technologies will become stuck (focused) on the
modal’s trigger.
This means that we need to shift focus to an
interactive element (typically the first interactive
element) within the modal.
When showModal() is supported, this happens
by default but, when it’s not, we need to do it
programmatically with JavaScript.} else {
modal.classList.add(“open”);
document.querySelector(“#modal .content a:first-
child”).focus();
}Note: ensure that you don’t overwrite the default
outline: style, as this is used to indicate focus for
non-mouse users.“Because dia logs are
essentially overlays, ensure
that the main document is
rendered inactive until the
xvhu#zlvkhv#wr#uhwxuq#wr#lwĤ