Greetings! I am making a simple modal on my page and having trouble with users interacting with the page by tabbing over phoenix inputs when the modal is open. How can I set tabindex=“-1” in phoenix forms? Or is there any easier way to do it on the whole page when the modal is loaded? Thank you in advance!
If you’re referring to users tabbing through elements that are behind the modal, then you might be looking for a “focus trap”. This is commonly handled in JavaScript. Here’s an example of what that looks like.
AlpineJS has a pretty simple implementation to handle this with the trap plugin. It uses focus-trap behind the scenes, so you could probably set up a hook with it if you didn’t want to use AlpineJS.
