@rightxt/focus-trap-vue demo - ESM
In the demos below, you'll be able to tell that a focus trap is active because it will turn pink. You should also be able to tell because it will trap your focus!
When a trap is active, you can deactivate it by pushing its deactivate button or, if the demo allows, pressing the Escape key.
Before you try the demos, if you're using macOS, make sure you have enabled keyboard navigation in order to use the Tab key to move focus between all controls.
In Ventura (v13), you'll find this under System Settings > Keyboard. Prior to Ventura, it may have been under System Settings > General.
FireFox and Safari, for example, respect this setting and without it enabled, you won't get a good experience. Chrome appears to ignore it (at least in v109). While focus-trap will still trap all the right nodes, the browser/OS will not let you access all tabbable nodes on the page, nor in any traps you activate, while using the Tab key.