Alpine.js Focus Plugin

Caleb Porzio released a new focus plugin for Apline.js, which allows you to manage focus on a page:

That new plugin I was talking about earlier? It's out: https://t.co/BXXbKKUI7B

Dig it

— Caleb Porzio (@calebporzio) January 13, 2022

What's neat about this plugin is that it allows you to trap focus within an element via the x-trap directive. Here's a demo:

The focus plugin also supports nesting dialogs, which tracks newly trapped elements and tracks the previously focused element. When the element is no longer trapped, it restores focus to where it was initially, allowing for intuitive nested tabbing:

Other features include arrow focus navigation between elements and an advanced focus API to help control focus on a granular level. Check out the official Focus Alpine.js documentation if you'd like to learn more.