Make Motion-tab layer rows and palette presets usable with a keyboard and screen reader

Open Beginner friendly
  • Is something wrong?
#9 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
88/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript
Domain
accessibility, frontend

Research direction

Read web/app.mjs at the layer row header and palette preset rendering, then check the focus styles in web/app.css. Make the layer toggle keyboard operable with an updating aria-expanded value and give all eight presets distinct labels. Run npm test and npm run check; done when the stated keyboard, label, and focus ring checks pass.

Written by the indexing model from the issue text.

Description

accessibility good first issue

In the Motion tab, each layer row opens its fields when you click its <header>. The header is a plain element with an onclick and no tabindex or role, so a keyboard user can tab to the ↑ and ✕ buttons but can never open a layer to edit its text, timing or position. Nothing tells assistive tech whether a row is expanded.

In the Style tab, all eight palette preset buttons have the same aria-label="Use palette". A screen reader announces eight identical buttons.

Task:

  • turn the clickable part of the layer header into a real <button> (layer name + summary) with aria-expanded, and keep ↑/✕ as sibling buttons
  • give each palette preset a distinct label, e.g. its index plus the bg and accent hex values
  • check the focus ring still shows with the :focus-visible rule in app.css

Where: web/app.mjs:357-362 (layer row header), web/app.mjs:424-425 (palette presets); styles at web/app.css:37 and web/app.css:163-166.

Done when: using only Tab and Enter/Space you can open and close any layer row in the Motion tab, the new toggle button's aria-expanded flips between "true" and "false", ↑/✕ still work without toggling the row, [...document.querySelectorAll('.presets button')].map(b => b.getAttribute('aria-label')) returns eight distinct labels, and the focus ring is visible on the new button.

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.