mobile menu does not contain focus to the menu on tab navigation

[techfg]

What version of starlight are you using?

0.31.1

What version of astro are you using?

5.0.5

What package manager are you using?

npm

What operating system are you using?

linux

What browser are you using?

chrome, firefox

Describe the Bug

When navigating the mobile menu with the tab key, focus is not contained to the menu resulting in tab navigation continuing to the current page after the last item in the menu is reached.

Steps to reproduce

1. Open Starlight Docs
2. Reduce viewport to < 800px
3. Open mobile menu
4. Tab through all elements until the last menu element is reached (theme switcher)
5. Tab again

Expected Result
The logo should be focused

Actual Result
Focus continues to the underlying page, first with the summary tag, then the anchor tag for "Astro framework", etc.

Link to Minimal Reproducible Example

Note

For some reason, when initially loading the project on stackblitz, an error The collection "docs" does not exist or is empty. Ensure a collection directory with this name exists. is encountered and visible in the console. Terminating and restarting npm run dev resolves the issue. I'm unable to reproduce this behavior locally so not sure what is going on but you will need to cancel and restart to view the site in the repro.

https://stackblitz.com/edit/withastro-starlight-a96pv7eh

Participation

• I am willing to submit a pull request for this issue.