Fix keyboard behavior of the AI tools dock tabs and Escape

Open
  • Is something wrong?
#48 0 comments 0 reactions 0 assignees View on GitHub

@jay23606 is already working on this.

Since Nov 6, 2026.

  • #50 by @jay23606 — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
20/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
javascript
Domain
accessibility

Research direction

Start with public/site-shell.js around the tab setup, Escape handler, and setDockOpen(); compare the reference tabs in editor.mjs:358-412. Check the dock tabs and iframe markup, then verify arrow-key navigation, Tab order, Escape behavior with a page modal open, and focus returning to #nullAiToggle when the dock closes. An open linked pull request (#50) already tracks this work.

Written by the indexing model from the issue text.

Description

accessibility help wanted

The AI dock built in public/site-shell.js is on every workspace page, and its keyboard behavior has three gaps.

  1. Tabs without the tab pattern. Line 62 gives the four buttons role="tab" inside a role="tablist". But all four stay in the Tab order, arrow keys do nothing, and there is no role="tabpanel"/aria-controls link to the iframes. The editor's reference tabs already do this right (editor.mjs:358-412).
  2. Global Escape. Line 128 closes the dock on any Escape anywhere. On /index.html, one Escape inside a template modal closes the modal and the dock together.
  3. Lost focus. When the dock closes via Escape or "Hide", setDockOpen() (135-149) sets dock.inert = true while focus may still be inside, so focus falls to <body>.

Fix direction: use a roving tabindex with Left/Right/Home/End in selectTool(), and give each tab and iframe an id plus aria-controls. Handle Escape only when focus is inside the dock and !event.defaultPrevented. Before closing, move focus to #nullAiToggle if the dock contains document.activeElement.

Done when arrow keys switch tools, Tab enters the tabs once, Escape in a page modal leaves the dock open, and closing the dock returns focus to the toggle.

Dominant language
HTML
Stars
1.2k
Forks
109
No merged PRs in 30d

Getting set up

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.

More from blixvip/NullMotion

All issues in blixvip/NullMotion

Similar issues

More Accessibility issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.