Description
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
- Open Starlight Docs
- Reduce viewport to < 800px
- Open mobile menu
- Tab through all elements until the last menu element is reached (theme switcher)
- 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.