#2503·shoelace

sl-dialog - focus trap

Author: doe-githubCreated Aug 29, 2025Updated Aug 29, 2025
Labelsbug

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:

  1. Open an sl-dialog.
  2. Use Tab to navigate through all focusable elements inside the dialog.
  3. Press Tab again once you reach the last focusable element.
  4. 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.