json-schema-org / json-schema-org/website

🐛 Bug: Theme toggle dropdown is not keyboard accessible

Open
#2,118 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

🐛 Bug Status: Stale Status: Triage
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.