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

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.

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.

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.

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.

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.

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,

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.

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.

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.

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.

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.

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.