fix(MobileMenuToggle): trap keyboard focus inside the mobile menu#3911
fix(MobileMenuToggle): trap keyboard focus inside the mobile menu#3911timothyjordan wants to merge 1 commit into
Conversation
When the mobile menu is open, Tab and Shift+Tab now wrap focus between the first and last visible focusable elements inside the surrounding `<nav>` instead of escaping to the underlying page content. Closes withastro#2697
🦋 Changeset detectedLatest commit: cb0c019 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for astro-starlight ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Hello! Thank you for opening your first PR to Starlight! ✨ Here’s what will happen next:
|

Description
Fixes #2697.
When the mobile menu is open on narrow viewports, Tab navigation currently escapes the menu after the last focusable element (the theme switcher) and lands on the underlying page content.
This PR extends the existing
StarlightMenuButtoncustom element with akeydownhandler that wraps Tab / Shift+Tab focus between the first and last visible focusable elements inside the surrounding<nav>while the menu is expanded (body[data-mobile-menu-expanded]).The trap is scoped to the same
<nav>already used for the Escape listener and is gated on the existing data attribute, so there is no behavioural change while the menu is closed.Test plan
packages/starlight/__e2e__/mobile-menu.test.ts:Changeset
Patch bump for
@astrojs/starlightincluded.