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

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.