Ensuring your Users are on the Right Path: the Future of Modals and Focus Management

Rate this content
Bookmark

With *dialog* and the inert attribute landing in all major browsers in 2022, we as web developers now have simple yet powerful primitives to help build complex app-like flows on the web, rather than the over-engineered or leaky solutions we've relied on for years. Let's demystify these primitives and talk through how they make your code simpler: from plain HTML, Web Components, to React/similar.

Sam Thorogood
Sam Thorogood
17 min
20 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Talk discusses the new features of Modals and focus management in web development. The dialogue element allows for the creation of modal dialogs that appear on top of other elements and prevent interaction with elements below. The note element can mark a subtree of the DOM as inert, making it unusable. The field set component can group input elements together and disable them. Using these new primitives can improve focus control and user experience in web applications.

Available in Español

1. Focus Management and the Dialogue Element

Short description:

Hey there, my name is Sam, and I'm here today to talk about ensuring your users are on the right path, the futures of Modals, and focus management. The web has come a long way, and for the first time this year, all the evergreens are supporting these amazing new features that we can use as either primitives or as part of some greater library. So firstly, what is focus management, and why do you care? Now, I feel like this is the quintessential reason of why it's important. The things I want to talk about today are dialog and a note. These are the two new concepts that are actually available on browsers this year, and they're both quite cool. Before we go any further, who is this guy, why am I talking to you? I'm a former Googler, I was there for over 10 years, it was obviously really fun, I was on the developer relations team, and so part of my job was to do this kind of outreach. Our technology is still on the web, and so we want to use these features even in our SaaS product to make our user experiences better. And my general vibe of why I'm coming here and talking about these concepts in general, and why I want this in my browser, I want this in my web app, is that to me, these new features are letting us throw away tons of old code that did weird hacks and horrible things to browsers that really they weren't designed to do. So having new primitives in 2022 is really lovely, I can get rid of all this code and get on with the more interesting parts of my job. The first component I'm gonna talk about today is called the dialogue element. Now, dialogue can do a whole bunch of stuff, the spec is pretty wide. But the reason why we most care about it as web developers is I can create this element on my page, wherever I like, and then call showModal in JavaScript. What this does is then creates that dialogue in what's called a top layer. Now the top layer is special, it does two things for us. One is that I can't tap behind it, this focus problem has been solved, while it's visible, I can't interact with anything below it including other dialogues that I previously opened. The second thing that's really cool here is that it actually exists outside the browser's kind of normal rendering layer. It's in a thing called the top layer, and what that means is even if you're inside some weird stacking context or your Z indexes are all bizarre, then actually the dialogue will always be on top. I actually like to demonstrate this by, if you can see here, I've got this weird element that's transformed in bizarre ways. If I click this button, the dialogue is actually inside this transformed element, but the browser's just gonna ignore all of that and hoist it to the top. So in that way, it's quite cool. It's scoped and encapsulated in a way that you can use it in a component or some library and it will still appear right at the top, ready for the user to interact with it.

♪♪ ♪♪ ♪♪ ♪♪ Hey there, my name is Sam, and I'm here today to talk about ensuring your users are on the right path, the futures of Modals, and focus management. Now, that's a handful, and I submitted this talk to JSNation a while ago, and since then, I think what it should be called is basically focus management in 2022.

Now, the web has come a long way, and actually, for the first time this year, all the evergreens are supporting these amazing new features that we can use as either primitives or as part of some greater library.

So firstly, what is focus management, and why do you care? Now, I feel like this is the quintessential reason of why it's important. Now, we've got dialog here. I can click around, I can hit submit, but what I can actually do while this is out operating is press Tab a bunch of times and get behind this UI. I can still click some buttons that are on the page here. Now, this is a demo, but lots of sites have this problem if you look around, and the challenge is that it's just really hard, and for the longest time, we've got libraries and polyfills that try to really maintain this, to try to solve this problem for you, but either they're not used correctly, they just can't do what you want them to do, or people just forget, and they just use a really basic mechanism and hope that users will never get there, and this example is obviously pretty tricky, not everyone knows how to tab behind UI elements, but this kind of problem will leak out in other ways, causing users some weird behavior, and some examples here.

To be very precise, the things I want to talk about today are dialog and a note. Now, these are the two new concepts that are actually available on browsers this year, and they're both quite cool. They're actually quite old in terms of specs, they were written a long time ago, but as I've mentioned, it's the first time that you can use them in pretty much all evergreens with no hassle.

So, before we go any further, who is this guy, why am I talking to you? I'm a former Googler, I was there for over 10 years, it was obviously really fun, I was on the developer relations team, and so part of my job was to do this kind of outreach. I've actually recently left Google and gone to a small early stage startup in the green energy space called Gridcog, it's a lot of fun, I would highly recommend working in climate, it's an important thing, and I'm always happy to talk to people about that, orthogonally to the content of this talk.

Having said that, our technology is still on the web, and so we want to use these features even in our SaaS product to make our user experiences better. And my general vibe of why I'm coming here and talking about these concepts in general, and why I want this in my browser, I want this in my web app, is that to me, these new features are letting us throw away tons of old code that did weird hacks and horrible things to browsers that really they weren't designed to do. So having new primitives in 2022 is really lovely, I can get rid of all this code and get on with the more interesting parts of my job. Not dealing with focus management, but actually writing applications that do interesting things.

The first component I'm gonna talk about today is called the dialogue element. Now, dialogue can do a whole bunch of stuff, the spec is pretty wide. But the reason why we most care about it as web developers is I can create this element on my page, wherever I like, and then call showModal in JavaScript. What this does is then creates that dialogue in what's called a top layer. Now the top layer is special, it does two things for us. One is that I can't tap behind it, this focus problem has been solved, while it's visible, I can't interact with anything below it including other dialogues that I previously opened. The second thing that's really cool here is that it actually exists outside the browser's kind of normal rendering layer. It's in a thing called the top layer, and what that means is even if you're inside some weird stacking context or your Z indexes are all bizarre, then actually the dialogue will always be on top. I actually like to demonstrate this by, if you can see here, I've got this weird element that's transformed in bizarre ways. If I click this button, the dialogue is actually inside this transformed element, but the browser's just gonna ignore all of that and hoist it to the top. So in that way, it's quite cool. It's scoped and encapsulated in a way that you can use it in a component or some library and it will still appear right at the top, ready for the user to interact with it.

Now, that's the most interesting part of the dialogue for me, but there's a few other things I wanna cover before we go on.

2. Backdrop Element and Escape Key Behavior

Short description:

One of the interesting aspects of the dialogue element is the backdrop element, which provides a full-screen element for every dialogue. It also includes a built-in handler for the escape key. While this behavior may seem strange, it dates back to when it was created in 2014. If you want to prevent the dialogue from closing when the escape key is pressed, you can add an event handler for the Cancel event.

One of them is this backdrop element, and so every dialogue for free will have like a full screen element. You can change its color or background or whatever. It also has a built-in handler for the escape key. Now this is kinda bizarre but kinda reflects when it was created back in 2014, but if I can hit escape on my keyboard now, then this dialogue will close, and that's fine, but a bit weird because there's no analogy on mobile or other platforms. You know, you can't press your back button on your mobile phone to close it. That will still, unfortunately, go to the previous page. There is something coming on the pipeline called Close Watcher as a bit of an aside, which is totally in draft state at this point, which does help deal with things like closing dialogues, and in fact, it's one of the examples called out in its description, but who knows if that'll come about. My advice, honestly, is if you don't want this behavior, you can actually add an event handler for the Cancel event, and then the user hitting Escape will do nothing, right? And you can control that keyboard interaction, or maybe you close the dialog with buttons. You can do that entirely yourself.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Asynchronous UX
React Advanced Conference 2021React Advanced Conference 2021
21 min
Asynchronous UX
Top Content
"Please do not close or leave this page" may send shivers down your spine, but coding the proper UX flow for async might make you question your daily job. How can we properly handle UX for asynchronous code in highly responsive applications? Let's explore how introducing asynchronous code creates a challenge for UX.
React Native Animations Should Be Fun
React Advanced Conference 2022React Advanced Conference 2022
28 min
React Native Animations Should Be Fun
Are you afraid of animations? Well, you shouldn't be, React Native Reanimated got you covered. Your mobile application can share a story through animations, can help users through micro-interactions and differentiate your app from the others.
Game Development with ReactJS, CSS, and React Three Fiber
JS GameDev Summit 2023JS GameDev Summit 2023
22 min
Game Development with ReactJS, CSS, and React Three Fiber
In this talk, I will share my experience in game development using ReactJS/CSS. We will explore how to make the most out of the component management provided by this library, along with the capabilities of CSS for creating an appealing user interface. Additionally, we will uncover how to leverage the React Three Fiber library to create games with a 3D experience.
Remixing How We Give
Remix Conf Europe 2022Remix Conf Europe 2022
32 min
Remixing How We Give
A review of how we're using Remix at Daffy.org to change the way people give to charities.
We'll talk about why we decided to use Remix, how we've used it and migrated from our previous frontend application and some patterns and libraries we have developed internally.
Test your UI in the REAL Browser
TestJS Summit 2021TestJS Summit 2021
33 min
Test your UI in the REAL Browser
Imagine writing a complex function without unit tests. You would have to verify every scenario manually, over and over again. Cumbersome, but that's how most teams build user interfaces.
Imagine if you could build UIs and test UIs in the same place. If your components included expectations for how they were supposed to behave, you'd know the instant they broke.Storybook provides an organized approach to building UIs. You document a component's use-cases as stories, which are then rendered in isolation. Stories are like tests, but for UI. Storybook interaction testing allows you to script interactions and check expectations in the story itself. That allows you to run and debug UI tests in the same environment UI components are developed for: your browser.
Building a Custom Component Library – Fast
JSNation Live 2021JSNation Live 2021
8 min
Building a Custom Component Library – Fast
If your company is anything like the ones I’ve worked for, you have apps with seven different button designs, three different datepickers, and a bizarre collection of dropdowns that may or may not be accessible. A growing trend to deal with this inconsistency is to build a custom design system or component library. Essentially, you build The One Way™ to create a datepicker for your organization, and ask that the rest of your company to conform to your new system. But building a component library comes with a lot of challenges, like, which frameworks or libraries should you use (if any)? How do you make sure your components are accessible? And how to you distribute your components so your whole company can use them? In this lightning talk you’ll learn how to build a component library fast building on top of a library like Kendo UI. You’ll learn tips & tricks on how to get up and running, how to customize components, and how to distribute components throughout your organization.

Workshops on related topic

Should we have business logic in the UI?
JSNation 2022JSNation 2022
148 min
Should we have business logic in the UI?
WorkshopFree
Samuel Pinto
Samuel Pinto
How many times did you say or hear “this is business logic, it should not be here”?In this workshop, we will create a modern frontend application using old patterns and you will learn how to build apps that have decoupled UI and services.We will start with a React application that has its whole logic in the UI. Then step by step we will extract the rules and operations to hit that sweet spot of independence.