feat(ay): P12 accessibility — accessibility.css + WCAG 2.2 AA sweep (final reboot phase)#453
Merged
Conversation
…L phase) Cut feature/accessibility off next (P0-P11 merged). Scope = parity-charter §3.10 accessibility.css (reduced-motion/forced-colors/focus-visible/sr-only) + a11y behaviour polish across all P1-P11 surfaces + WCAG 2.2 AA sweep. The final parity screenshot sign-off (all surfaces) is HUMAN-owned — the accumulated P5-P11 manual legs converge. No new port/ADR expected. After P12 merges: present final review + open (don't merge) next→develop (the original /goal end-state). Next: /spec:requirements. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
17 REQ-AY + 10 NFR-AY. accessibility.css 3rd global layer (reduced-motion guard over the 5 keyframes + forced-colors system-color mapping + :focus-visible ring + .sr-only) registered in both CSS pipelines; a11y behaviour sweep (ARIA/labels/live-regions/keyboard); modal focus trap+restore at the P5/P7/P8/P10 seams; WCAG 2.2 AA bar. REQ-AY-001..016 automatable (TEST-AY-*); REQ-AY-017 = the HUMAN final parity screenshot sign-off (all surfaces, the single final epic gate, not self-claimed). Additive (no surface regresses). CLAR-AY-001 (read the actual claudian accessibility.css at design) + CLAR-AY-002 resolved. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
claudian accessibility.css = 41 lines, focus-rings only (meet that; beat with the rest). accessibility.css = 6 .specorator-root-scoped rule groups (reduced-motion global guard + explicit spin halt + forced-colors system-color mapping + forced-colors visible borders + :focus-visible ring reusing existing --sp-focus-ring/--sp-shadow-focus-ring + .sr-only), lightningcss-safe; joins tokens.css+animations.css at both import sites. Behaviour-fixes mostly verify-only (ChatSurface aria-live + TabBar tablist + Obsidian Modal native focus trap already present) + targeted fills (aria-expanded, icon-only labels, RG-4 selectors). TEST-AY-001..016 automatable; TEST-AY-017 = HUMAN final parity screenshot sign-off (the single final epic gate). No new port/ADR. Chunks: css+registration · behaviour sweep · tests. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
T-AY-001 baseline+guard-verify+parity-screenshots scaffold; C1 accessibility.css (RG-1..6) + register both import sites + RED rule/registration tests (T-AY-002..005); C2 behaviour-fix sweep RED + fills (aria-expanded/icon-labels/notice live-region/modal trap verify, T-AY-006..013); C3 gate tests (additivity diff + no-raw-HTML scan + screenshots-matrix, T-AY-014..016); GATE T-AY-018 (full verify + build:web + draft PR into next) then T-AY-017 👤 HUMAN final parity screenshot sign-off (the single final epic gate). No new key/port/ADR (CSS layer + additive ARIA; reuse --sp-focus-ring). Post-merge: present final review + open (don't merge) next→develop. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Scaffolds the test-plan baseline (token/import-site/reduced-motion/forced-colors references + the claudian meet/beat split), the parity-screenshots.md matrix (all charter §3 surfaces × 320/520/720 × light/dark + a11y-condition columns, the human TEST-AY-017 sign-off artifact), and the implementation log. Records the guard verdict: NO guard-relax, NO new InjectionKey/port/component/ADR, manifest + locales untouched. No src/ change. Implements REQ-AY-016. SPEC-AY-001/002/003/006, NFR-AY-002/004/008. TEST-AY-016. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ibility.css RED file-read tests: RG-1 reduced-motion guard, RG-2 explicit spin halt (animation: none), RG-3 forced-colors system-colour mapping, RG-5 :focus-visible ring consuming --sp-focus-ring (no bare :focus), RG-6 .sr-only clip technique, the CSS discipline scan (no hex / no raw var outside forced-colors, ASCII comments). RED registration test: accessibility.css imported as the 3rd CSS import after tokens + animations at both src/plugin/main.ts and src/ui/main.ts. RED until T-AY-002 (file + imports absent). Implements TEST-AY-001/002/003/004/005/007/009/015. SPEC-AY-001/002/003/011, REQ-AY-001/002/003/004/005/007/009/015, NFR-AY-002/006, EC-AY-001. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…oth CSS entries New src/ui/styles/accessibility.css with the six rule groups, .specorator-root scoped, ASCII-only lightningcss-safe comments, no hex / no raw non --sp-* var outside the forced-colors block: - RG-1 reduced-motion global guard (!important, the only !important in the file) - RG-2 explicit spin halt (animation: none, not a near-zero duration) - RG-3 forced-colors surface mapping (forced-color-adjust + system colours) - RG-4 forced-colors border guarantee (T-AY-005 enumerates the full selector list) - RG-5 :focus-visible ring reusing --sp-focus-ring / --sp-shadow-focus-ring (no new token) - RG-6 .sr-only clip utility (never display:none / visibility:hidden) Registered as the 3rd CSS import after tokens + animations at src/plugin/main.ts and src/ui/main.ts; vite.config.ts unchanged. Greens TEST-AY-001/002/003/004/005/ 007(file)/009(file)/015(css); folds in the RED test-helper corrections (assertions unchanged). vue-tsc 0, lint 0 errors, build:web lightningcss green. Implements SPEC-AY-001/002/003. REQ-AY-001/002/003/004/005/006/007/009/015, NFR-AY-002/005/006. TEST-AY-001/002/003/004/005/007/009/015. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Completes the RG-4 background-cue-only control enumeration per SPEC-AY-006: the toggle switch (.sp-toggle-switch), state pills ([data-state]), file/image chips (.sp-chip), tab badges (.sp-tab), and the selected dropdown option ([role=option][aria-selected=true]) each gain border: 1px solid currentColor inside the forced-colors block, so each stays distinguishable under HCM. Adds the TEST-AY-006 file-read leg asserting the enumeration. Inert outside forced-colors (default render unchanged). vue-tsc 0, lint 0 errors. Implements SPEC-AY-006, SPEC-AY-001 (RG-4). REQ-AY-006, NFR-AY-009, EC-AY-003. TEST-AY-006 (file leg). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Marks Chunk 1 (accessibility.css + registration) complete: ticks the T-AY-001..005 DoD checkboxes, sets implementation-log.md + test-plan.md to in-progress, moves stages 7/8 to in-progress, records the Chunk-1 hand-off note (commit SHAs + the green vue-tsc/lint/test/build:web results + the remaining Chunk 2/3/gate work). SPEC-AY-001/002/003/006. T-AY-001..005. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…tors Adds the TEST-AY-006 mount leg: mounts the RG-4-listed background-cue-only controls (tab badge / service-tier switch / file chip / image thumb / selected permission option) and asserts each exists in the rendered DOM, and that RG-4 enumerates a selector matching each real swept control. The mount leg surfaced that the T-AY-005 RG-4 enumeration used placeholder selectors (.sp-toggle-switch / .sp-chip) that match no real component. Corrects RG-4 to the real swept-component selectors: [role="switch"] (the toggle switches), .sp-file-chips__chip / .sp-image-thumb (the chips), [data-state] (state pills), .sp-tab (tab badges), [role="option"][aria-selected="true"] (selected option). Additive, forced-colors-only — no default-render change. Updates the TEST-AY-006 file-read leg to the real selectors. Implements SPEC-AY-006. TEST-AY-006. REQ-AY-006, NFR-AY-009, EC-AY-003. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…+ names Adds the TEST-AY-007 mount leg + TEST-AY-008: mounts the audited toolbar / composer / chat controls (tab badge/close/new, composer textarea/attach/send, file chip link/remove, image thumb preview/remove, service-tier + permission toggles) and asserts each matches the RG-5 focus-visible target selector (so the keyboard ring reaches it) and exposes a non-empty accessible name. Verify-only: every audited control already carries an aria-label / role / tabindex (the per-phase a11y sweep was thorough) so no icon-only-label fill is needed. Implements SPEC-AY-007, SPEC-AY-008. TEST-AY-007, TEST-AY-008. REQ-AY-007/008, NFR-AY-001, EC-AY-005, EC-AY-006. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
… host) Adds the TEST-AY-010 mount leg. Two legs: - busy region (verify-only): ChatSurface streaming busy region carries aria-live="polite" + role="status" (passes against current code). - notice host (RED): asserts a NoticeLiveRegion announces error=assertive (role=alert) / info=polite (role=status) via an aria-live region that mirrors the notice text declaratively, without stealing focus. RED until T-AY-011 lands NoticeLiveRegion.vue (driven by the existing sp:notice channel). Adds a busyRole() accessor to ChatSurface.po. Implements SPEC-AY-004. TEST-AY-010. REQ-AY-010, NFR-AY-001, EC-AY-011/012. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…e/info polite)
Adds NoticeLiveRegion.vue: a visually-hidden (.sr-only) ARIA live region that
announces non-blocking notices to screen readers in the standalone / GitHub
Pages host. It subscribes to the existing sp:notice CustomEvent channel that
LocalStorageBridge already dispatches (no new port, no new channel). Error
notices map to aria-live="assertive" + role="alert"; info/success/warning map
to polite + role="status". The notice text is bound declaratively as {{ }}
text (no innerHTML/v-html). The region is passive (never calls .focus()), so an
announcement never steals focus. The .sr-only clip gives zero visible footprint
-> the default render stays additive (REQ-AY-014).
Wires it into the standalone entry alongside ChatSurface inside ErrorBoundary.
The ChatSurface busy region (aria-live=polite + role=status) was already
present -> verify-only (T-AY-008 green leg).
Implements SPEC-AY-004. REQ-AY-010, NFR-AY-003, EC-AY-011/012.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…y/label Adds the TEST-AY-011 + TEST-AY-009 mount legs. Asserts (a) the SpCollapsible header (reused by every rich block: tool call / thinking / subagent / write-edit) exposes aria-expanded that flips on Enter/Space/click and an accessible name; verified through a direct mount + through ToolCallBlock; and (b) icon-only controls (file-chip-remove, image-thumb-remove) carry a non-empty aria-label while their decorative glyph is aria-hidden="true". Verify-only: every collapsible already binds aria-expanded + a dynamic aria-label, and every icon-only control already labels itself -> no aria-expanded / icon-label fill needed (T-AY-010/T-AY-012 are verify-only). Implements SPEC-AY-005, SPEC-AY-007. TEST-AY-011, TEST-AY-009. REQ-AY-009/011, EC-AY-007. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds the TEST-AY-012/013 structural verify: asserts all 8 Specorator modal seams (ProviderConsent, DeleteConfirm, ForkTarget, InstructionConfirm, InlineEdit, ImagePreview, McpServerHost, McpTestHost) extend Obsidian Modal, which natively traps Tab/Shift+Tab and restores document.activeElement on close (D-AY-3). The live Tab-cycle + focus-restore is the human TEST-AY-017 leg / the Obsidian runtime; this is the structural Modal-subclass property the JSDOM harness can assert. Verify-only -> no hand-rolled trap. A modal NOT extending Modal would be a defect-escalation (ADR-AY-001 + a new task); all 8 conform. Adds a minimal Modal export to the shared obsidian test stub (additive) so the extends chain forms for the structural verify. Implements SPEC-AY-009. TEST-AY-012, TEST-AY-013. REQ-AY-012/013, EC-AY-008/009. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…gresses) Adds the TEST-AY-014 additivity proof, the cardinal P12 counter-metric: - locale output byte-identical to next (git diff --name-only next -- locales empty); - manifest.json byte-identical to next (NFR-AY-008); - the entire src/ diff vs next touches ONLY the P12 allow-list (accessibility.css, the two CSS-import entry edits, the new .sr-only NoticeLiveRegion) -> no swept component template under src/ui/chat / src/ui/agent / src/plugin/modals changed, so the P0-P11 default render is byte-identical at the source; - representative swept components (TabBar, FileChips, ImageThumb, ChatComposer) keep their visible default-render structure (the aria-* attrs + the .sr-only clip do not alter the visible render). Implements SPEC-AY-010. TEST-AY-014. REQ-AY-014, NFR-AY-004, EC-AY-010. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
… diff)
Adds the TEST-AY-015 diff leg (the CSS token/comment leg rides T-AY-003): scans
the added (+) lines of the P12 src/ diff vs next and asserts no
innerHTML/outerHTML assignment, no insertAdjacentHTML call, no v-html directive,
and no new eslint-disable of the raw-HTML / v-html guards. The additive ARIA
edits bind attributes declaratively and the .sr-only notice text renders as
{{ }} text -> the fills are declarative. Green against the actual diff.
Implements SPEC-AY-011. TEST-AY-015. REQ-AY-015, NFR-AY-003.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…matrix Adds the TEST-AY-016 artifact-completeness check: asserts parity-screenshots.md lists every charter §3 surface (§3.1..§3.9) at 320/520/720 px in light + dark, each paired with a claudian baseline + a Specorator capture leg, plus the two a11y-condition columns (reduced-motion / forced-colors). Artifact-completeness only — the visual judgment is the human TEST-AY-017 leg. Marks the matrix complete (status: complete; the row/cell structure is fully populated, baseline column filled from claudian); the Specorator + a11y-condition cells are left for the human reviewer to populate + judge at T-AY-017. Implements REQ-AY-016. TEST-AY-016. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…lose-out Logs Chunk 2 (T-AY-006..013) + Chunk 3 (T-AY-014..016): the forced-colors mount leg + RG-4 real-selector correction, focus/keyboard/labels verify, the live-region RED + the NoticeLiveRegion fill, the collapsible/icon-only verify, the 8-modal-seam trap/restore verify, the additivity invariant, the discipline scan, and the parity-screenshots completeness. Records T-AY-010 + T-AY-012 as verify-only (no gap). Ticks the T-AY-006..016 DoD boxes; updates workflow-state Stage-7 close-out (implementation-log in-progress: T-AY-017 human + T-AY-018 gate remain, parent-owned). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
REVIEW-AY-001 verdict approve-with-nits (0 P1/P2). accessibility.css 6 rule groups (RG-1..6) present + scoped + registered both import sites; build:web lightningcss green. Additivity proven: src/ diff = ONLY accessibility.css + plugin/main.ts + ui/main.ts + NoticeLiveRegion.vue (no swept component/locale/manifest change). WCAG 2.2 AA met at the automatable level (focus-visible, modal trap/restore native, forced-colors, reduced-motion, aria-live, sr-only). No new port/ADR. TRACE-AY-001 REQ↔SPEC↔TEST chained; REQ-AY-017 HUMAN final parity screenshot sign-off recorded PENDING (the single final epic gate). Nits R-AY-001/002 (doc-sync) low/non-blocking. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Shipped CSS rebuilt for P12 — the accessibility.css rules (reduced-motion guard, forced-colors mapping/borders, :focus-visible ring, .sr-only) bundled in. FINAL-phase gate green: typecheck 0, lint 0, vitest 296 files/2234 passed (0 errors), build + build:web (lightningcss) + docs:api clean, npm audit (high) clean. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0d08caf115
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Comment on lines
+72
to
+75
| render: () => | ||
| h(ErrorBoundary, null, { | ||
| default: () => [h(ChatSurface), h(NoticeLiveRegion)], | ||
| }), |
There was a problem hiding this comment.
In the standalone app this new live region never receives the notices produced by the UI, because NOTIFICATION_PORT is still the MockBridge instance and its showError/showInfo methods only append to noticeLog/console rather than dispatching the sp:notice event that NoticeLiveRegion listens for. As a result, flows such as toolbar deferred notices or error-boundary notices remain silent to screen readers in the GitHub Pages/dev host unless a test manually dispatches sp:notice; either the standalone notification port needs to emit that event or the live region should subscribe to the actual notification source.
Useful? React with 👍 / 👎.
Comment on lines
+38
to
+39
| severity.value = detail.severity ?? 'info'; | ||
| message.value = detail.message ?? ''; |
There was a problem hiding this comment.
When the same notice text and severity fires twice in a row, these assignments leave the reactive values unchanged, so Vue does not update the live-region DOM and screen readers generally have no new mutation to announce. This affects common retry/error scenarios like repeatedly failing the same save action; clear/re-key the region before setting the message, or include an announcement nonce so every notice event produces a DOM change.
Useful? React with 👍 / 👎.
Luis85
added a commit
that referenced
this pull request
May 27, 2026
* fix(ay): make the P12 additivity/discipline diff tests CI-resilient The T-AY-014 additivity + T-AY-015 discipline-scan tests shelled out to `git diff next -- …`, which works in the dev worktree (local `next` branch) but ERRORS in CI's shallow PR checkout (no local `next` ref) — green locally, red in the PR CI (#453's unit job). Add a resolveBaseRef() that tries `next` then `origin/next` and returns null when neither is reachable; the diff-based legs `it.skipIf(BASE_REF===null)` / `describe.skipIf` so they run wherever a baseline exists (locally + base-fetched CI) and skip gracefully otherwise — never error. The mount-based render-additivity checks still run unconditionally. `BASE_REF!` (non-null) under the skip guard. 9/9 local; typecheck + lint 0. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(ay): guard discipline-scan git diff against a null baseline ref describe.skipIf only skips the it() runs — the describe factory body still executes at collection time, so addedSrcLines() ran `git diff <null> -- src` in CI's shallow checkout (no `next`/`origin/next` ref) and crashed the suite. Return [] when no baseline is reachable; the it bodies remain skipped. TEST-AY-015 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Luis Mendez <hallo@luis-mendez.de> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
P12 — Accessibility (claudian-reboot, the FINAL phase)
The accessibility layer + WCAG 2.2 AA behaviour sweep closing the reboot (charter §3.9/§3.10/§4 P12). Spec:
specs/accessibility/(PRD-AY-001, DESIGN-AY-001, SPEC-AY-001..011, no new ADR, TASKS-AY-001 = 18 tasks).Delivered (T-AY-001..016)
src/ui/styles/accessibility.css— the 3rd global CSS layer (registered at both import sites), 6.specorator-root-scoped rule groups: reduced-motion guard (softens/halts the 5 keyframes incl. an explicitspinstop), forced-colors system-color mapping + visible borders on background-cue-only controls,:focus-visiblering (reuses the existing--sp-focus-ring/--sp-shadow-focus-ring— no new token),.sr-only. lightningcss-safe; meets claudian's focus-ring layer + beats it on the other four.aria-live+role=status, TabBartablist+roving tabindex, the 8 modal seams' native focus trap/restore, collapsiblearia-expanded, icon-only labels) + 2 real fills:NoticeLiveRegion.vue(the standalone notice live-region gap, pure Vue on thesp:noticechannel) + the RG-4 real-selector correction.src/diff is ONLYaccessibility.css+ the 2main.tsimports +NoticeLiveRegion.vue; no swept component template / locale /manifest.jsonchanged; P0–P11 surfaces behaviourally + visually unchanged for existing users.Gate (local, green)
vue-tsc0 ·eslint0 · vitest 296 files / 2234 passed (0 errors) ·build+build:web(lightningcss) +docs:apiclean ·npm audit --audit-level=highclean.Parity self-review (Stage 9)
review.mdapprove-with-nits (0 P1/P2). 6 rule groups + both registrations confirmed; additivity proven; WCAG 2.2 AA met at the automatable level; no new port/ADR. Two low doc-sync nits (non-blocking).Deferred — the SINGLE FINAL epic gate (human)
TEST-AY-017 / REQ-AY-017 — the human cross-surface final parity screenshot sign-off (all surfaces, light+dark, 320/520/720), into which the accumulated P5–P11 manual-Obsidian + parity-screenshot legs converge. Agent presents; never self-claims.
This is the last implementation phase of the claudian-reboot epic (P0–P12). After merge, the whole rebuilt plugin is on
next; thenext→developPR is opened for the human's parity call (not auto-merged).🤖 Generated with Claude Code