🛠️ Fix your modal dialog with 2 LiveView helpers!

Notes

When we create modals, we can create a bad experience if we don’t consider which elements should be focused.

There are two things we can fail to take into account:

1. Making elements behind the modal tab-accessible (that’s terrible for accessibility)

2. Not focusing the first input in the modal (the user has to tab all the way around to get to the first place).

Thankfully, LiveView comes with awesome helpers to help us deal with that. 🥳

We can look at Phoenix’s CoreComponents module (which gets generated) to see how they handle that.

If you look in there, you’ll notice there are two awesome helpers to help us deal with that:

• <.focus_wrap>
• JS.focus_first/2

The <.focus_wrap> component will keep the focus in the modal dialog. So, no more tabbing into the background!

And with JS.focus_first/2 we can target the modal (when we click on the button to open that modal) and push the focus to its first focusable element (a.k.a. that input!).