sl-dialog - focus trap
Describe the bug
In the sl-dialog component, the focus trap does not work as expected. When navigating with the keyboard, focus is allowed to escape the dialog. After tabbing past the last focusable element inside the dialog, focus leaves the popup and moves to the browser UI instead of cycling back to the first focusable element inside the dialog. It takes several more Tab presses before focus returns to the dialog.
To Reproduce
Steps to reproduce the behavior:
- Open an
sl-dialog. - Use
Tabto navigate through all focusable elements inside the dialog. - Press
Tabagain once you reach the last focusable element. - Focus escapes the dialog and moves to the browser.
Demo
You can reproduce this issue with a minimal sl-dialog example from the documentation.
Screenshots
Not applicable (keyboard navigation issue).
Browser / OS
- OS: Windows 10, macOS Sonoma
- Browser: Chrome, Firefox
Additional information
The dialog should implement a focus trap so that pressing Tab after the last focusable element loops back to the first focusable element inside the dialog, and Shift+Tab from the first focusable element should loop back to the last. Currently, this behavior is broken.
Source: shoelace-style/shoelace