[ryandmonk]

Phase 2 step 6 (docs/blocks/PHASE-2-RELEASE-PLAN.md, §10), as the owner authorized it on 2026-10-16: accessibility hardening for the Astryx beta path, to WCAG 2.2 AA. Not for automatic merge. No deploy, no Cloudflare change, no paid model call.

What it adds

Automated coverage (e2e/composer-blocks-a11y.spec.ts, in the experimental config that CI runs). Each Astryx block (records-table, auth-form and guide-steps) is built through the hosted path with a stubbed gateway, so no model is called. Each is built from four calls: the approved example, the smallest valid call, every optional prop at its maximum, and the same with unbroken tokens.

Every surface is checked at 1280 x 900, at 640 x 512 and 320 x 256 (200% and 400% zoom of a 1280 x 1024 window), and at 320 x 720:

• axe with wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa over the whole canvas, with nothing excluded, at every size and with a dark preference. Contrast that axe leaves undecided is decided from computed colors, compositing a translucent color over what lies beneath it. Text that another element covers fails.

• Structure: the title is the surface's one level-2 heading, and each table region is named by its columns.

• Keyboard:

  • Tab and Shift+Tab reach every control in order, by name, with no trap.
  • Every focused control has its own indicator of 3:1 or more.
  • In forced colors, every focused control keeps an outline.
  • No focused control is entirely hidden (SC 2.4.11) at any size.

• Layout:

  • targets of 24 px;
  • text spacing (SC 1.4.12) at every size;
  • reflow at every size: nothing scrolls sideways or is cut off, and no box but a table's region scrolls its own content;
  • every line of text is scrolled into view and sampled across its width. A line fails if another element covers it, even one that ignores the pointer, or a box that does not scroll cuts it off;
  • neighbouring parts of a surface must not overlap: their boxes must not intersect;
  • no column is crushed.

  A data table scrolls only inside its own focusable region.

Two specs check Preview. One covers an accepted block: heading, axe and focus ring, plus layout, text spacing, axe and keyboard at the narrow sizes. The other covers every Astryx reference surface's axe, layout and text spacing at every size. It allows one pre-existing violation outside the blocks, by name. A third imports two model-shaped surfaces the blocks never produce (inline dialogs, a children-mode table, Astryx's large type, empty display text) and checks them the same way. Checks are soft, so one run lists every defect. apps/composer/app/astryx-renderers-a11y.test.ts server-renders the Astryx renderers. The shadcn/ui v3 scans run for information only and never fail.

Fixes. Each failed first; details and file references are in docs/blocks/ACCESSIBILITY.md. Rows marked (review) came from the first independent review, (second review) from the second, and (verification) from its verification.

Defect on main	WCAG 2.2	Fix
Block titles were <p>: no headings	1.3.1, 2.4.6	The display variants render h1 and h2. h3 stays a paragraph: it is Astryx's body-scale large (review). A variant without text is never an empty heading (review)
Every table region was named "Table"	2.4.6	Named by its columns
Header text cut off with an ellipsis	1.4.4, 1.4.10	Header text wraps
Columns crushed below a letter's width at 320 px	1.4.10	A 96 px column floor in data tables and, from the review, children-mode tables; the table scrolls in its region
Long words and labels ran out of the card	1.4.10	Words break when they must; badges wrap
guide-steps' tables overlapped by 20 px, hiding a row; every table region overlapped its neighbours by 4 px	1.4.3, 1.4.10	The rule removing Astryx's vertical table bleed now matches Composer's canvas (review)
The auth form held the surface 24 px past 320 px	1.4.10	Surfaces narrow with the Astryx canvas
An inline dialog overflowed a 320 px viewport; narrowed, it was cut off, then its 75vh cap scrolled its content in a box of its own at 320 x 256. A fullscreen one kept the viewport's height, and an alert dialog's footer cut off "Keep my archived projects" under text spacing	1.4.10, 1.4.12, 2.1.1	A dialog fits its container's width (review) and takes its content's height (second review; fullscreen too, verification). Its footer's buttons wrap onto rows of their own (verification)
Button labels cut off with an ellipsis: "Continue with Microsoft" under text spacing at 320 px	1.4.12	Labels wrap; a one-line button keeps Astryx's 32 px (review). A word too long for its line breaks, and icon-only buttons keep Astryx's own size (second review)
The studio's green focus ring at 2.41:1 on the canvas white	1.4.11	Astryx's own indicators (#0064E0, 5.4:1); an inset ring on table regions
In forced colors a focused field showed only its caret	2.4.7	An outline on the focused field (review)
A dark OS preference retinted the canvas; Astryx's dark primary button is 3.11:1	1.4.3	The Astryx canvas draws light
The sticky header hid focused controls: with Shift+Tab at 640 and 320 px, and every one at 320 x 256. From 721 to 960 px it was up to 325 px tall	2.4.11	At 960 px wide or less, or 600 px tall or less, the header scrolls away (review; widened in the second); otherwise scroll padding follows its height
The Build options made the page 11 px too wide at 320 px	1.4.10	Each option wraps under its label

Docs.

• docs/blocks/ACCESSIBILITY.md (new) covers:
  • what the checks prove, and each fix;
  • what this environment could and could not check by hand;
  • what still needs a person, and the proposed waivers;
  • one finding outside the blocks, for information.
• docs/blocks/BETA.md (new): the beta's known gaps, the auth-form SC 1.3.5 exception first, with its host mitigation.
• The decision record gains "Step 6, authorized", with the owner's scope in the owner's words.
• The release plan's status note and docs/BLOCKS.md record that step 6 is built.

Production-visible changes

These fixes are in shared code, so the default build carries them too:

• packages/astryx-renderers (Text, Table, Badge): every Astryx surface in production's Preview, and the Studio exhibit. The exhibit gets only these, not Composer's CSS or shell.
• apps/composer/app/globals.css, scoped to [data-astryx-canvas]:
  • the focus indicators and the light scheme;
  • surface narrowing;
  • the table bleed;
  • dialog width and height, and dialog footers that wrap;
  • wrapping of buttons named by their label;
  • the forced-colors field outline.
• The composer shell:
  • The header is no longer sticky at 960 px wide or less, or at 600 px tall or less. On a phone, a tablet or a narrow window it now scrolls away (af-ui.css).
  • The scroll padding applies only while the header is sticky (composer.tsx).
  • The Build options wrap (build-view.tsx).

They change no request byte, no /api/models reply and no block code path. The default artifact still carries none of check-default-artifact's markers. They change the default artifact's bytes, by design; the comparison is below. If the owner prefers, the shell changes (709725f, ec1a3e9, and the header rule in a6ffba4) can be split out.

Boundaries kept

• No block signature, template, prompt, model selection, frozen evaluation evidence or release-admission decision changes.
• No vocabulary is added upstream. auth-form's SC 1.3.5 gap is documented, not fixed.
• No shadcn renderer change. An earlier commit narrowed every surface in the shared A2uiCanvas, but the shadcn information scan showed it would move a wide shadcn table into a container shadcn does not make focusable. So 7aa423c reverts A2uiCanvas and scopes the rule to the Astryx canvas.
• No deploy, Cloudflare change or paid model call. A push triggers Cloudflare Workers Builds' preview build of the branch, as on every branch; production is unchanged (below).

Not changed, with reasons.

• Table-region names stay complete, however long, and two tables with the same columns share a name. Truncating would drop the columns that tell two tables apart.
• The plan-comparison reference's aria-required-children. It is not a block, and it predates this step. It is recorded in ACCESSIBILITY.md, for a separate change.
• A row of buttons outside a dialog's footer still overflows when the longest words of its labels together are wider than the row. Only a model-written row could; the blocks' rows fit at every size, with text spacing too. Breaking words anywhere would split "Cancel" in every tight two-button row at 320 px.
• The button rule's two latent edges, neither possible today: an icon-only button with an empty label, and a labelled button while it loads. Both are recorded in ACCESSIBILITY.md.

Commits

Commit	What
6429340	Fail-first tests: the e2e spec and the renderer unit tests
59eb822	Fail-first tests for the column floor and the dark scheme; a fix to the spec's own unfocused-border baseline
f5c0ed9	Astryx renderer semantics and reflow (Text, Table, Badge)
22ba739	The Astryx canvas keeps Astryx's focus indicators and draws light
709725f	Composer shell: focus clear of the sticky header; 320 px Build options
7aa423c	Surface narrowing scoped to the Astryx canvas (shared A2uiCanvas back to main's)
6a5ec26	Docs: ACCESSIBILITY.md, BETA.md, the step 6 authorization
057606a	Docs, outside step 6: the owner's step-5 confirmations, recorded
be6864f	Fail-first tests for the review's findings
3521742	Renderers: h3 stays body text, no empty heading, a children-mode column floor
3203749	The Astryx canvas: the table bleed, dialog fit, button wrapping, the forced-colors field outline
ec1a3e9	Composer shell: a narrow or short window lets the header scroll away
09f4e60	Docs: the accessibility record after the review
38082fe	Fail-first checks for the second review's findings: text line by line, scroll boxes, contrast everywhere, reference axe
a6ffba4	Canvas and shell: dialog height, button rule scoped and breaking long words, header static to 960 px
0af44ba	Docs: the accessibility record after the second review
316081b	Fail-first checks for the verification's findings: every line sampled, covers that ignore the pointer, the surfaces beyond the blocks
f04061d	The overlap check: neighbours overlap only where their boxes intersect
c8824ee	Canvas: a dialog takes its content's height; its footer's buttons wrap
d6b2859	Docs: the accessibility record after the verification

Evidence

Fail-first.

• Against main (d7251db): the renderer tests failed 8 of 10; the two that passed guard what must not change. The e2e failed all 13 Astryx specs, and the 6 shadcn scans passed, as information.

• After the first fixes: the 320 px reflow check still failed on the 8-column call (crushed columns), and the added dark pass failed 9 of 12 surfaces. The column-floor unit test failed before its fix.

• The review's findings, against 057606a's build: the new checks failed all 14 Astryx specs:

  • overlaps on every block with a table, and a covered cell in guide-steps;
  • every focused control hidden at 320 x 256, in Build and Preview;
  • "Continue with Microsoft" cut off under text spacing at 320 px;
  • caret-only field focus in forced colors;
  • the inline dialog cut off at 320 px.

  3 of 13 renderer tests failed. All pass after the fixes.

• The second review's findings, against 09f4e60's build: the strengthened checks failed only the reference spec. The delete-project dialog at 320 x 256 scrolled its content in a box of its own, with and without text spacing, and axe reported scrollable-region-focusable on it.

• The verification's findings, against 0af44ba's build: the new beyond-the-blocks spec failed.

  • At 320 x 256 the fullscreen dialog cut its content off.
  • With text spacing at 640 x 512 and 320 x 720, the alert dialog's footer cut off "Keep my archived projects".

• The text check finds what it claims. With defects injected into the page, it caught each of these, and reported nothing on the clean page:

  • a row moved over the next;
  • a caption's covered lower half;
  • text cut off by a box;
  • a dialog footer pulled over its description;
  • a cover over the last two lines of a 2,529 px cell at 320 x 256;
  • a cover that ignores the pointer.

  The check before the verification missed the last two.

• The overlap check still catches the original defect. With Astryx's vertical table bleed injected again, it reports the original 4, 20 and 4 px overlaps.

Suites.

• Full local run at d6b2859, CI's steps in order, with a clean tree before and after: green except the known local agent timeout.
  • check-sync passes, and typecheck is clean.
  • Unit tests:
    • composer-core 445/445, composer 485/485 (13 new) and block-bench 268/268; every other workspace passes.
    • The agent workspace is 49/50. Only rediscover > restoredConflict fails, at 5401 ms against its 5000 ms limit. It times out locally in every run; CI passes it, and this change does not touch apps/agent.
  • Smoke 39/39, agent e2e 49/49, and the exhibit 106 passed with 4 skipped.
  • Experimental 57/57, 21 of them new: the 12 Astryx surfaces, the 3 Preview specs and the 6 shadcn scans.
  • The composer build passes, with check-default-artifact: 29 files clean of 15 markers. So do the experimental build, the beta deploy check and the web build.
• CI on d6b2859: green. test (run 39001296397) passed at 04:17:18Z, and Workers Builds' preview build of the branch passed.

Production unchanged where it must be.

• Request bytes. The Phase 0 oracle in hosted-build.test.ts passes, and /api/models is pinned byte for byte by blocks-beta.test.mjs; both are in the composer unit run above. No request builder, Worker, sidecar or block code changed.
• The default artifact at d6b2859 against main's (d7251db), built locally. 21 of 29 files are byte-identical. Its JavaScript is byte-identical to 09f4e60's build: every change to the artifact since is CSS. The 8 that differ:
  • the HTML and index.txt: Next's per-build ids and asset names only;
  • the CSS: the [data-astryx-canvas] rules and the header rule;
  • the app chunk holding the composer and the Astryx renderers: the step 6 code;
  • one Astryx vendor chunk, re-bundled because TableRender now imports Astryx's own proportional();
  • the page chunk: the new chunk names only, at the same size;
  • the webpack runtime: the new chunk names and hashes, and the minifier's renamed local variables, at the same size.
• Production still serves build E_2CpGYfe1p1n1xjWkdjJ with main's CSS and runtime: checked at 04:21:42Z, after the last push's preview build and CI. Each push's Workers Builds run is a preview build of the branch.

Independent accessibility review.

• The first review, of 057606a, found two blocking findings: the guide-steps table overlap, and focus hidden at 320 x 256. It also found four should-fix findings (dialog clipping, large as h3, button labels under text spacing, forced-colors field focus), nits, and gaps in the list of checks that need a person. All are addressed above, except the two left as they are, with reasons.

• The second review, of 09f4e60, found nothing blocking in the three blocks, and confirmed five of the first review's six findings fixed. Its should-fix findings:

  • F1: inline dialogs cut off at 320 x 256 by their height cap;
  • F2: the "nothing drawn over" claim was broader than the checks.

  Its nits: F3 icon-only buttons, F4 long words in labels, F5 a tall sticky header from 721 to 960 px, and F6 doc wording. All are addressed above; the F4 remainder is recorded.

• The verification of 0af44ba confirmed:

  • F1, F3 and F5 fixed;
  • F2 fixed, with a sampling gap;
  • F4 and F6 partly fixed.

  It found the three blocks ready for the owner's decision, apart from the checks that need a person. It asked for three things, all done in d6b2859:

  • N1, a fullscreen dialog's height;
  • the dialog footer wrap;
  • every line of text sampled.

  N3, covers that ignore the pointer, is fixed too, and N4 is recorded.

• The final check of d6b2859 found it ready for the owner's decision on the three blocks, apart from the checks that need a person.

  • Everything listed is fixed: N1, the F4 footer, N2, N3, the overlap check, and the new spec.
  • The new spec failed on 0af44ba's build exactly on the two defects.
  • Nothing new needs fixing. One optional nit, a try/finally around the text check's temporary style, is left as is.
  • In a regression sweep, all 6 reference surfaces and the reviewer's 6 imported probe surfaces are clean at every size, apart from plan-comparison's known violation.

Still needs a person

No screen reader is installed here, and Chromium is the only browser: no NVDA, VoiceOver or TalkBack pass was done, and none is claimed. Still needed (ACCESSIBILITY.md has the detail):

1. Screen-reader passes: NVDA with Firefox or Chrome, VoiceOver with Safari on macOS and iOS, and TalkBack on Android. They include listening to long and shared table-region names.
2. A keyboard pass in Firefox and Safari.
3. Real 200% and 400% browser zoom, at desktop window heights too; text-only zoom; text spacing with a bookmarklet.
4. Windows forced colors, in a light and a dark theme, beyond Chromium's light emulation.
5. Focus indicators with motion on: every automated pass runs with reduced motion.
6. Touch on a phone, in portrait and landscape.
7. Speech input (SC 2.5.3).
8. Input purpose by hand, in a host (SC 1.3.5).
9. guide-steps' tables by eye, in Build and Preview.
10. Astryx surfaces that are not blocks: model-generated and imported.
11. The composer shell on a tablet, and at 721 to 1000 px wide.
12. The Studio exhibit's heading outline, now h1 and h2.
13. The judgements in the proposed waivers.

Proposed waivers (for the owner)

1. auth-form input purpose (SC 1.3.5): the recorded exception and host mitigation (docs/blocks/BETA.md). GA stays blocked.
2. Astryx's resting field border, 1.5:1 (SC 1.4.11): a judgement. Each field is labelled, and its focus border is 5.4:1. The alternative is a canvas-only override in Composer.
3. "Start" and "Save guide" (SC 2.4.6): template text, unchanged in this step.
4. shadcn/ui v3 findings: not fixed, since shadcn/ui v3 is withheld. These are the wireframe Separator chips' contrast, and records-table's page overflow at 320 px.

🤖 Generated with Claude Code

https://claude.ai/code/session_01R6Ax8qvfN3gYUC85oSGnoi

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
✅ Deployment successful! View logs	dspack-studio-composer	d6b2859	Oct 17 2026, 04:08 AM