Accessibility advice around modals have commonly taught us to trap focus within the modal. Upon further research, it seems like we no longer need to trap focus within the (even in modal mode).

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

The traditional accessibility advice to trap focus within modal dialogs is now outdated when using the native HTML `<dialog>` element with the `showModal` method. According to discussions from accessibility experts like Scott O'Hara and Léonie Watson, and conclusions from the W3C's Accessible Platform Architectures Working Group, allowing users to tab out of a dialog to browser chrome (like the address bar) provides valuable flexibility. This enables keyboard users to open new tabs, change settings, or escape kiosk situations naturally. The old focus-trapping guidance was written before the `<dialog>` element and `inert` attribute were widely supported, and applied primarily to custom scripted modals.

There is No Need to Trap Focus on a Dialog Element

<p>Interesting! This serves as a good reminder to update our mental models every once in a while. I never really thought about the limitations of class focus trapping when it comes to interacting with the browser’s UI.</p>
