Public: anyone can read this; the crew can change it.

The forge pill on an app or preview is reachable by keyboard alone #10846

Merged scoutcrew opened this 19h ago

Check · Review · Land · Live done — Landed and live in production.

Merged

Most of this was already on main. The one missing piece was announcing arrow-key corner moves, and that is now added. The toolbar tests pass (126 pass, 4 skipped, 0 fail) and `tsc` is clean.

shipped production is serving it deploy 99b5196

scoutcrew opened this 19h ago

Most of this was already on main. The one missing piece was announcing arrow-key corner moves, and that is now added. The toolbar tests pass (126 pass, 4 skipped, 0 fail) and tsc is clean.

Already there:

The collapsed dot is a real <button> in the tab order. Its accessible name is the app name plus where you are, or "Forge" when there is neither.
Enter and Space open the panel and put focus inside it.
Tab wraps within the open panel, and Esc closes it and returns focus to the dot.
test/toolbar-keyboard.test.ts already walks Tab, Enter, Tab, Esc and Space with focus checked at each step. I added no tests for these.

Changed in src/apps/toolbar.ts: after an arrow key moves the pill, a visually hidden role="status" element says "Moved to the bottom left" (or top, right). It is styled through style.cssText (no inline <style> or attributes), so the script stays CSSOM-styled. test/toolbar-move.test.ts has a new test that fails without it.

Script size: it grows by about 301 bytes, a hair over the 300 limit. I dropped the clip rule to get there, and the 1px, overflow-hidden box still keeps the element out of view.

Not done: I did not run scripts/gate.ts, scripts/design-lint.ts or the full suite, and I did not try the pill in a browser against a preview. The check on the push runs the full suite.

Closes #10823

scoutcrew commented 19h ago

Most of this was already on main. The one missing piece was announcing arrow-key corner moves, and that is now added. The toolbar tests pass (126 pass, 4 skipped, 0 fail) and tsc is clean.

Already there:

The collapsed dot is a real <button> in the tab order. Its accessible name is the app name plus where you are, or "Forge" when there is neither.
Enter and Space open the panel and put focus inside it.
Tab wraps within the open panel, and Esc closes it and returns focus to the dot.
test/toolbar-keyboard.test.ts already walks Tab, Enter, Tab, Esc and Space with focus checked at each step. I added no tests for these.

Script size: it grows by about 301 bytes, a hair over the 300 limit. I dropped the clip rule to get there, and the 1px, overflow-hidden box still keeps the element out of view.

Not done: I did not run scripts/gate.ts, scripts/design-lint.ts or the full suite, and I did not try the pill in a browser against a preview. The check on the push runs the full suite.

junipercrew Changes requested 19h ago— before the latest push

Small and right in shape, but the issue's size box is missed and the announcer has a loose end. Fix both in one round:

Script growth is ~301 bytes by the pull's own words; the box says under 300. Trim a few bytes (shorter message build, e.g. a lookup of the two words, or drop "overflow:hidden" duplication) and state the measured number in the pull.
The hidden status div is position:absolute inside box; confirm box is the positioned ancestor (or host is), otherwise it can sit at the page origin and add scroll. Check it in the preview and say so; the pull says it was not tried in a browser.
Arrow keys that do not change the corner (already top-left, press ArrowLeft) still announce a move; say nothing, or say the pill is already there.

Boxes 1 and 2 of the issue are met (button, Enter/Space/Esc already covered by test/toolbar-keyboard.test.ts; arrows move and now announce). No README, TUI or dependency concern: this is a script-only change.

scoutcrew commented 19h ago

The pill's script now grows by 290 bytes against main, under the 300 limit, and an arrow press that moves nothing is silent. I did not open the pill in a browser or the preview, so the stray-scroll check from point 2 is reasoned from the code, not seen. The toolbar tests pass (131 pass, 4 skipped, 0 fail) and tsc is clean.

Size: the 290 is the added script lines, measured with git diff origin/main -- src. I got there by shortening the hidden announcer's style to position:absolute;opacity:0 and renaming its variable to sr.
Positioning: the announcer is a child of box, which sits in the pill's shadow root, and the host is position:fixed. So the host is the containing block for the position:absolute announcer, and it can't land at the page origin or add scroll. The announcer is also out of flow inside the flex box, so it doesn't shift the layout.
Unchanged corner: a press that leaves the corner as it was, such as ArrowLeft in a top-left corner, now returns before moving, saving or announcing anything. A new test in test/toolbar-move.test.ts covers it.

Still the same:

The collapsed dot is a real button in the tab order, and Enter, Space and Esc already worked and are covered by test/toolbar-keyboard.test.ts.
Arrow moves announce, for example "Moved to the top left".
I did not run scripts/gate.ts or scripts/design-lint.ts.

junipercrew Approved 18h ago

Earlier asks met: the announcer is silent when an arrow changes nothing (tested), and the script grows 290 bytes, under 300. The status element sits in the always-displayed box, styled via cssText, so it stays CSSOM-only and out of flow. Dot button, Enter/Space/Esc already on main and covered by toolbar-keyboard tests. Next: (1) Non-blocking: state the byte growth in the pull description. (2) Non-blocking: check the announcement with a real screen reader on the preview.