Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups

Rate this content
Bookmark

Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. Proposed updates to the web platform are about to make building these a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, modality and the top layer.

Hidde de Vries
Hidde de Vries
10 min
01 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Talk discusses the use of dialogues and popovers in web development. Dialogues can be modal or non-modal and are now accessibility-supported. Popovers are versatile and can be added to any element without JavaScript. They provide suggestions, pickers, teaching UI, list boxes, and action menus. Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Browser support for these features is expanding, but there are still open questions about positioning, semantics, and other use cases.

1. Introduction to Dialogues and Popovers

Short description:

I want to chat to you about dialogues and about popovers. The dialogue element and the popover attributes are two things that can help you with putting stuff on top of other stuff in the web. Dialogues have become accessibility-supported and can be used as modal or nonmodal dialogues. Popovers are a new set of behaviors that can be added to any element to create form element suggestions, content pickers, teaching UI, list boxes, and action menus. They work without JavaScript and can be easily created by adding the popover attribute to an element.

I want to chat to you about dialogues and about popovers. Now, we all know that the web used to be just linear, right? We had text and we had images. Increasingly, we like to put stuff on top of other stuff. I'm going to talk to you today about two things that can really help you with that, from the HTML specification.

One is the dialogue element that has been around for a while, and as of recently, it has become quite accessibility-supported as well. Then, secondly, the popover attributes, which is a brand-new attribute coming to the web. It has been put into Chrome just last week and stable Chrome. It is being developed in all of the other browsers as well.

One example of a popover is when you have a bit of UI and you want to explain it to your users. In this case, there's an article from The Economist. They have an audio player, and they show the user, you know, you can click this to listen to your article. You can do all sorts of things with popovers, like the other day when I was in a very serious business meeting and Microsoft Teams told me to use Excel integrations. That's something they do. They've also told me to be my expressive self, my expressive self, by using like an avatar. You can use popovers for all sorts of things. Slack does it slightly better by telling you you look nice when you hover over yourself. I prefer that to the previous one, to be honest.

Now let's look at the differences between dialogues and popovers, starting with the dialogue element. So dialogue is a HTML element, so I'm not talking about just any dialogue that you're building, but the actual element in HTML. It comes with the dialogue role, so semantics are built in, and it has a modal setting. Now the way you use it is in the script, so you can find the element in the DOM and then just call showModal on it. That shows it as a modal dialogue. And then you can also call show, which will do a nonmodal dialogue.

Now popover is a new set of behaviors that you can add to any element that you like. So it's an attribute that you add to an element in order to build things like form element suggestions, content pickers, teaching UI, list boxes, and action menus. And the cool thing about popover is that it works without JavaScript as well. The way you make a popover is basically by slapping the popover attribute onto any element that makes it a popover. Then you give it an ID and then you can point to that ID from a popover-targets attribute on a button. From that moment onward, that button becomes a toggler for your popover. So I've done a really ugly one in this screenshot, but basically you have the button, you have your div, and you can put whatever you like in there.

2. Popover Patterns and Modal vs Non-Modal

Short description:

Popover can be controlled without JavaScript. Modal vs non-modal: modal blocks user interaction, non-modal allows other actions on the webpage. Dismissal methods include explicit dismiss and light dismiss. Layering with Z index controls element stacking. Top layer elements have a separate layer and can't be positioned relative to other elements. Backdrops draw attention and indicate modal status. Top layer elements come with a backdrop. Keyboard focused traps can be used in modals.

It becomes a popover that's controllable without JavaScript. Now, of course, you can also do it in JavaScript. So you can call the show popover method onto your element, and that is also going to show it. Then you can use that if you want to do timed popovers, like Microsoft Teams was doing on me, that one just appeared and disappeared at certain times.

Now, working on popover and dialogues and kind of learning about how they work, I had this question popping into my head, how are these patterns actually different? They seem quite similar. So I wanna take you through a couple of different axes on which they are indeed different.

One is modal versus non-modal. Now, modal means that an element, if it's modal, it is the only thing that the user can interact with. Everything else is blocked, so you cannot select text, you cannot tap, you cannot scroll, ideally. So anything else is impossible, you can just do the modal bits. That's useful when you've decided to track your users, and according to European law, you need to ask for consent. So if you do that, you probably want to use a modal, because you can't really place any cookies before you've asked the permission, and you also don't want your users to go on your website without tracking them, I guess, because that's your goal there.

Non-modal dialogs are things like menus in your applications, like this one, where you're editing an image, and you get some options for that image, or chat widgets that can pop up over your content. Now, they need to be dismissible easily, and it is important you can do other stuff on the webpage, like in this case, I can imagine people just want to go on with booking their trip, and they don't want to talk to you or chat, so you want to make that easy to dismiss. Talking about dismiss, there are different ways of dismissing. One is explicit dismiss, which is what happens when you have a button and you need to click that, or when a script actually removes it, and there is light dismiss, which is some kind of auto-magic dismiss. So when you're choosing a font in Google Docs, you get this list of fonts, but when you kind of start scrolling or you click outside of it, it just disappears. You don't need to do anything special to make it go away.

Then layering. We're probably all familiar with the Z index in CSS. It allows you to stack elements on top of each other and control the order in which that happens. So if you slap Z index one on one element and Z index two on the other, two is going to be above one because it's a higher number, and we've probably all seen very high numbers in our code bases. Now the cool thing about top layer is it happens on top of everything. So the Z indexing happens in your body, and you can see this as a layer that is separate from anything else in your body. It also means that you can't position anything relative to stuff that's not in the top layer.

Then backdrops, they can sometimes be useful to draw attention to certain elements, and for modal elements it also helps to show that they are modal and that the other stuff is currently not available. Top layer elements, they come with a backdrop for free in the browser, and you can style that with colon colon backdrop in your CSS, and you can then do stuff like change the color or add some blur or do all sorts of other things that CSS allows you to do. So that is very useful, and only happens with top layer elements specifically.

And then lastly there are keyboard focused traps. So when you're building a modal, you sometimes want to trap people inside of that modal.

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

Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
Accessibility at Discord
React Advanced Conference 2021React Advanced Conference 2021
22 min
Accessibility at Discord
Build a Design System with React and Tailwind CSS
React Summit 2022React Summit 2022
27 min
Build a Design System with React and Tailwind CSS
Top Content
Tailwind CSS, with its utility-first approach is known for speeding up the development process. Combining it with the power of React, let’s see how you can build a custom design system for your project to further speed it up, make it scalable and also easy to maintain.
Configuring Axe Accessibility Tests
TestJS Summit 2021TestJS Summit 2021
30 min
Configuring Axe Accessibility Tests
Top Content
Axe-core is a popular accessibility testing engine that is used Google, Microsoft, and hundreds of other companies to ensure that their websites are accessible. Axe-core can even integrate into many popular testing frameworks, tools, and IDEs. In this advanced session, we'll be learning how to configure axe and its integrations to fine tune how it runs and checks your pages and code for accessibility violations.
Walking the Line Between Flexibility and Consistency in Component Libraries
React Summit 2022React Summit 2022
27 min
Walking the Line Between Flexibility and Consistency in Component Libraries
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
Find Out If Your Design System Is Better Than Nothing
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.

Workshops on related topic

Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
React Summit 2023React Summit 2023
109 min
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
Workshop
Asaf Shochet Avida
Eitan Noy
2 authors
In this hands-on workshop, we’ll equip you with the tools and techniques you need to create accessible web applications. We’ll explore the principles of inclusive design and learn how to test our websites using assistive technology to ensure that they work for everyone.
We’ll cover topics such as semantic markup, ARIA roles, accessible forms, and navigation, and then dive into coding exercises where you’ll get to apply what you’ve learned. We’ll use automated testing tools to validate our work and ensure that we meet accessibility standards.
By the end of this workshop, you’ll be equipped with the knowledge and skills to create accessible websites that work for everyone, and you’ll have hands-on experience using the latest techniques and tools for inclusive design and testing. Join us for this awesome coding workshop and become a ninja in web accessibility and inclusive design!
Automated accessibility testing with jest-axe and Lighthouse CI
TestJS Summit 2021TestJS Summit 2021
85 min
Automated accessibility testing with jest-axe and Lighthouse CI
Workshop
Bonnie Schulkin
Bonnie Schulkin
Do your automated tests include a11y checks? This workshop will cover how to get started with jest-axe to detect code-based accessibility violations, and Lighthouse CI to validate the accessibility of fully rendered pages. No amount of automated tests can replace manual accessibility testing, but these checks will make sure that your manual testers aren't doing more work than they need to.
Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
React Advanced Conference 2022React Advanced Conference 2022
118 min
Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
Workshop
Richard Moss
Richard Moss
In this workshop, we'll take a tour through the most effective approaches to building out scalable UI components that enhance developer productivity and happiness :-) This will involve a mix of hands-on exercises and presentations, covering the more advanced aspects of the popular styled-components library, including theming and implementing styled-system utilities via style props for rapid UI development, and culminating in how you can build up your own scalable custom component library.
We will focus on both the ideal scenario---where you work on a greenfield project---along with tactics to incrementally adopt a design system and modern approaches to styling in an existing legacy codebase with some tech debt (often the case!). By the end of the workshop, you should feel that you have an understanding of the tradeoffs between different approaches and feel confident to start implementing the options available to move towards using a design system based component library in the codebase you work on.
Prerequisites: - Familiarity with and experience working on large react codebases- A good understanding of common approaches to styling in React
Creating Accessible React Native Apps
React Summit Remote Edition 2021React Summit Remote Edition 2021
91 min
Creating Accessible React Native Apps
Workshop
Scott Vinkle
Scott Vinkle
React Native is a framework used to create native iOS and Android apps in a way web developers may already be familiar with. But how do you ensure your React Native apps are inclusive and usable everyone? Scott will share tips on how to test and build React Native apps with accessibility baked-in!