Make the studio fully operable without a mouse

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

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
68/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
css, html, javascript
Domain
accessibility, frontend

Research direction

Start with the listed sections in web/index.html, web/app.mjs, web/app.css, and README.md. Read the existing tab, radiogroup, scene list, layer controls, and global key handler, then run the app and inspect keyboard behavior. Done means the requested keyboard patterns and scene/layer controls work, focus is visible, shortcuts are limited to body or viewer focus, and the README Keys row is updated; run npm test and npm run check.

Written by the indexing model from the issue text.

Description

accessibility help wanted

The README's "Using the studio" table describes several interactions that only work with a pointer, and the global shortcut handler gets in the way of keyboard navigation:

  • Scene reorder is drag-and-drop only (ondragstart/ondrop on the <li>). There is no keyboard alternative such as Alt+↑/↓ or move buttons.
  • Scene length on the timeline is a pointerdown-only .handle. The Length field in the Scene tab is the only alternative, which is fine, but the handle should be hidden from assistive tech or be a proper slider.
  • Tabs and the Mode radiogroup have role="tab" / role="radio" but no arrow-key behaviour, no aria-controls, and no roving tabindex.
  • Arrow keys are hijacked. The document keydown handler treats ←/→ as frame-step and ↑/↓ as scene change whenever focus isn't in an input or a dialog. With focus on a tab, a radio, a scene card or a button, arrows scrub the playhead instead of moving within the widget.
  • Scene cards are tabindex="0" <li> elements, but the :focus-visible rule only covers button, input, select and textarea, so a focused card has no visible focus.
  • Only ↑ (Move up) exists for layers, so moving a layer down takes several up-moves on other layers.

Task:

  • implement the WAI-ARIA tabs and radio-group keyboard patterns
  • restrict the global ←/→/↑/↓ shortcuts to when focus is on the body or the viewer
  • add keyboard scene reordering and a Move down button for layers
  • add a focus style for .scene-card
  • update the Keys row in the README

Where: web/index.html:33-36, web/index.html:80-87; web/app.mjs:147-168 (renderSceneList), web/app.mjs:181-189 (length handle), web/app.mjs:360 (layer Move up), web/app.mjs:628-632, web/app.mjs:642, web/app.mjs:646-654 (global keydown); web/app.css:37; README.md:141-143.

Getting started: Node 22, no npm install needed: git clone, npm start, open http://127.0.0.1:4520 in Chrome or Edge, and run npm test and npm run check before the PR. Comment here to claim it. Questions → Discord.

Dominant language
JavaScript
Stars
42
Forks
6
Avg merge
12h 31m
Merged PRs (30d)
3

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/GenMotion

All issues in blixvip/GenMotion

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.