Building Modals in Livewire
This episode is for members only

Sign up to access "Building Modals in Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
10. Trapping focus in modals

Episodes

0%
Your progress
  • Total: 1h 1m
  • Played: 0m
  • Remaining: 1h 1m
Join or sign in to track your progress

Transcript

00:00
A really important part of building modals is trapping focus within the modal window, particularly for accessibility. So we're going to take a look at the problem and then we're going to look at a solution using the focus plugin with Alpine. OK, so I'm going to go and open up this first modal.
00:17
Now, we have a couple of buttons in here. Of course, they don't look like buttons at the moment. We've got three buttons here. How would we usually navigate that just with the keyboard? Well, we'd go ahead and use the tab key. But as you can see, what's happening is the focus is on the entire page, not specifically for this modal. So I just can keep tabbing.
00:37
I can get to these eventually, but it's a little bit confusing. And then our tab gets put up here as well. So ideally, what we want to do is trap the focus inside the modal that is currently visible. So how do we do this? Well, very easily, we use the focus plugin.
00:53
So we don't need to install this because we already have this bundled in with Livewire and Alpine. As we have set this up, you might need to go ahead and install this and go ahead and register the plugin. So let's open up our modal wrapper and look at where we can add this. So the plugin is called focus. It was previously called trap.
01:11
So the API has remained the same. So we use X trap. And then the value that we give in here is just when we want this to be enabled. And we know we want this to be enabled when the modal is visible. So we can just use visible and that Boolean to enable this.
01:25
OK, let's go over and take a look at the difference here. So when I open the first modal, I'm going to hit tab and you can see that the focus is now trapped within this modal. So I can just navigate in this modal. Of course, we've just got a few buttons here. But if you have things like input, so, you know, you might have a login form here or a registration form.
01:45
That's really helpful to be able to tab down and, of course, submit the form with the keyboard. OK, so let's take a look at a couple of other things that we can do here. If we head over to the docs here, we'll come down and look at some modifiers. So we've got the inert modifier and it says here that when we're building things like dialogues and modals, which we are doing,
02:07
it's recommended that you hide all the other elements on the page from screen readers when you are trapping focus. So it's just as easy as adding a dot inert to this. So we're just going to add that in a modifier. Let's take a look at this. If we just head over and open that first modal and we go ahead and try and inspect another element on the page.
02:26
So let's just say here these will have that added to this, for example, here. If we get rid of this, sure enough, that disappears. So that's just added that label onto there for accessibility. Now, we also have no scroll, which is really interesting. We can't really scroll on this page at the moment.
02:45
But if we just head over to our dashboard and say on the outer wrapper, set this to height screen, not the best solution, but that gives us a little bit of room to scroll down. When I open a modal, you'll notice that we can sort of scroll the background window and it's a little bit annoying and it's not great for accessibility. So we can use the no scroll on here as well.
03:06
So let's go over and add that modifier to our modal wrapper. No scroll. And let's see the difference that makes. Let's click on our first modal. And sure enough, I'm trying to scroll up and down. This just isn't working. So we're fully trapped now within this modal until we exit out of it.
03:24
And then, of course, we can go ahead and scroll down again. So the last thing we want to check is that this works with our nested modals. So, for example, if I open the second modal, I want to know that the focus is trapped within there. And sure enough, it is. When I close this off, the focus is trapped within this one.
03:41
And then I can close this off and we are back to having no modals displayed. So feel free to play around with that. There are a couple of other things that you can do with it. But then two things are probably the most important to add on here. So you can create a nice modal experience, particularly for accessibility.

Episode summary

In this episode, we're zeroing in on a crucial aspect of building modals: trapping focus for accessibility. First, we look at the problem—without focus trapping, pressing the Tab key just jumps around the entire page, not just the modal, which can be disorienting for keyboard users. Not good!

To fix this, we use Alpine's focus plugin to make sure that when a modal is open, keyboard navigation is trapped inside that modal. You'll see a demo of how to wrap your modal component with x-trap, so users can Tab through fields and buttons inside it without escaping to the rest of the page.

Then, we take things a bit further by adding the .inert modifier. This hides everything outside the modal from screen readers while it's open—super important for accessibility. We also try out .no-scroll, which stops the background page from scrolling when the modal is active. If you've ever had a popup open and accidentally scrolled the whole page, you know how useful this is!

We wrap up by testing nested modals to make sure focus trapping still works as expected. All in all, you'll walk away knowing how to make your modals way more accessible and user-friendly.

Episode discussion

No comments, yet. Be the first!