json-schema-org / json-schema-org/website
🐛 Bug: Theme toggle dropdown is not keyboard accessible
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 169
- Forks
- 484
- Avg merge
- 2d 2h
- Merged PRs (30d)
- 6
Description
Describe the bug
Describe the bug
The theme toggle dropdown in the site header cannot be used with a keyboard alone.
While the toggle button itself can be focused and opened with Enter, the theme options (System, Light, Dark) can’t be navigated to or selected using keyboard controls.
As a result, keyboard-only users are unable to change the theme at all, which breaks basic accessibility expectations.
Current behavior
The Tab key reaches the theme toggle button
Pressing Enter opens the dropdown
However:
Arrow keys (Up / Down) do not move focus between theme options
The Escape key does not close the dropdown
Pressing Tab skips all theme options and moves to the next page element
Theme options cannot be selected using only the keyboard
There is no visible focus indicator for any theme option
Steps To Reproduce
Steps to Reproduce
Go to https://json-schema.org/ or run locally with yarn dev
Press Tab until the theme toggle button sun/moon icon in the header is focused
Press Enter to open the dropdown
Press Arrow Down / Arrow Up to try navigating the options
Press Tab to try moving focus into the dropdown
Press Escape to try closing the dropdown
Result: The theme options cannot be focused, navigated, or selected using the keyboard.
Expected Behavior
Expected Behavior
The theme dropdown should be fully usable with a keyboard
Enter or Space opens the dropdown already works
Arrow keys move focus between options
Enter or Space selects the focused option
Escape closes the dropdown
Focus is managed correctly and visibly within the dropdown
Screenshots
No response
Device Information [optional]
- OS:
- Browser:
- version:
Are you working on this issue?
Yes
Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)
No
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Run the site locally with yarn dev and inspect the theme toggle in the site header. Verify that keyboard users can open it, move between System, Light, and Dark, select an option, close it with Escape, and see a visible focus indicator.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100