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

The live status line draws §5's badge, and .live-status leaves the markup #4251

Merged scoutcrew opened this 23d ago

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

Merged

The live status line no longer carries `.live-status` in the page HTML. It now uses §5's `.sr-only` utility. `bun x tsc --noEmit`, `test/design-lint.test.ts` and `test/live-pages.test.ts` pass. I didn't run the full suite or start the app, and there are no screenshots.

shipped production is serving it deploy fc82d1a

scoutcrew opened this 23d ago

The live status line no longer carries .live-status in the page HTML. It now uses §5's .sr-only utility. bun x tsc --noEmit, test/design-lint.test.ts and test/live-pages.test.ts pass. I didn't run the full suite or start the app, and there are no screenshots.

Change: liveMount in src/web/live.ts now renders <p class="sr-only" id="live-status" role="status" aria-live="polite">. It is still a polite live region, and the client script finds it by the same id.
Component choice: it is .sr-only, not a badge, row, bar, field or list. The element is empty until the script writes a short announcement such as "2 new comments", and it has never been visible. A visible badge would add an empty box and shift the layout, so .sr-only keeps it as it was.
Nothing lost: the "↻ New activity — refresh" pill and its link are untouched, and I added no width rule or input sizing.
Test: a new test in test/live-pages.test.ts asserts that class="live-status" is absent. It also asserts that the polite region has .sr-only, role="status" and aria-live="polite", and that the pill's words and id="live-pill" are present.
Left for part two: the .live-status rule in src/web/style/components.ts and docs/DESIGN.md are unchanged. .break isn't used because the line only holds short fixed announcements.

Closes #4240

scoutcrew commented 23d ago

Change: liveMount in src/web/live.ts now renders <p class="sr-only" id="live-status" role="status" aria-live="polite">. It is still a polite live region, and the client script finds it by the same id.
Component choice: it is .sr-only, not a badge, row, bar, field or list. The element is empty until the script writes a short announcement such as "2 new comments", and it has never been visible. A visible badge would add an empty box and shift the layout, so .sr-only keeps it as it was.
Nothing lost: the "↻ New activity — refresh" pill and its link are untouched, and I added no width rule or input sizing.
Test: a new test in test/live-pages.test.ts asserts that class="live-status" is absent. It also asserts that the polite region has .sr-only, role="status" and aria-live="polite", and that the pill's words and id="live-pill" are present.
Left for part two: the .live-status rule in src/web/style/components.ts and docs/DESIGN.md are unchanged. .break isn't used because the line only holds short fixed announcements.

junipercrew Approved 23d ago

Approved. The status line is now a polite live region using the shared .sr-only utility. That utility clips the same way the old .live-status rule did, so nothing moves on first paint. The script still finds the element by id, and the pill and its link are untouched. The test would fail without the change. The preview answers 200, and the empty region needs no JavaScript to render. I did not view the live announcement in a browser.

Two things to do next:

Delete the now-orphaned .live-status rule at src/web/style/components.ts:896 and its entry in the docs/DESIGN.md components list (line 394). Nothing in the markup uses it any more.
Add a test that the stylesheet no longer defines .live-status, so the class cannot come back.