feat(diagnostics): add accessible writing guidance UI

[seonghobae]

Closes #288.

Stack authority

This Draft is the canonical Task 5 writing-diagnostics UI lane and stacks on #257.

• exact parent: feat/writing-diagnostics-controller@bc7d4fbc9ca6136c1eadc83d2bc9909ef3d7980f;
• exact head: feat/writing-diagnostics-ui@70a9c29d35ed152720686e3e3731725a739347d0;
• protected shipped truth: main@3b38ead2d00f44eb578d0689087b9293b3dabe1e;
• dependency order: docs(adr): define revision-bound host-owned writing diagnostics #248 → feat(diagnostics): add strict writing diagnostic contract #249 → feat(diagnostics): resolve revision-scoped text selectors #254 → feat(diagnostics): add fail-closed editor decorations #256 → feat(diagnostics): bind diagnostics to exact editor revisions #257 → feat(diagnostics): add accessible writing guidance UI #266.

The branch remains non-destructively stacked on the exact current controller parent. The stale Task-5 lineage that once carried an unrelated release-workflow edit was deliberately not restored; protected main and #118 remain the release authority.

Implemented scope

Task 5 provides Inkspan's built-in accessible presentation layer for already-validated host diagnostics: named writing-guidance region/count, ordered diagnostic cards, keyboard/roving navigation, explicit range focus and actions, disabled Apply without replacement/application authority, polite ordinary status, assertive real conflict alert, async focus stability, a trusted internal EditorFrame slot, non-color-only priority underlines, visible focus, forced-colors/reduced-motion support, 44px targets, responsive layout, print omission by default with explicit non-interactive appendix opt-in, and no diagnostic markup when the host supplies nothing.

Inkspan only renders/navigates/reports actions for host-supplied diagnostics. It performs no grammar/tone/spelling/quality inference and no model/provider/network/database/persistence/host transport work. Host strings remain React text; no keyword/regex/phrase-list/domain/language/nearest-text semantic fallback exists.

Accessibility focus-handoff contract

Issue #288's earlier statement that successful dismissal left keyboard focus on a removed control is stale relative to the active implementation: WritingDiagnosticsPanel.tsx already performs a deterministic focus handoff after a successful dismissal, preferring the next diagnostic, otherwise the previous diagnostic, and focusing the guidance region when the last diagnostic is removed. Failed dismissal does not invoke that handoff.

Current test-only head 70a9c29d35ed152720686e3e3731725a739347d0 adds a stateful dismissal harness in src/components/WritingDiagnosticsPanel.dismissalFocus.test.tsx. Unlike the existing static controller stubs, the harness removes the selected diagnostic during the action and asserts that focus remains on the surviving roving-focus card; a one-diagnostic case asserts focus lands on the still-mounted guidance region. This is assurance for already-present product behavior, not a new semantic-authority change.

Exact-current-head evidence

The current exact head is new and predecessor evidence does not transfer. The live stacked-PR workflow gap tracked by #298/#299 means this head has not yet acquired qualifying repository PR workflow evidence. Until exact-head CI/Security/SAST/coverage/package/browser/accessibility evidence exists and passes, this generation is non-passing regardless of earlier focused evidence. Formal qualifying approval is absent.

Keep this PR Draft behind #257. Before any lifecycle transition, refetch exact ancestry and live governance, acquire applicable exact-current-head workflows once the stacked-PR CI owner path is available, obtain qualifying independent approval, resolve only addressed threads, and respect #118's release boundary. This PR does not claim Task 6 replacement application, release status, or Naruon runtime integration.

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[seonghobae]

#266 was restacked onto the current #257 head e1bb7a4.

Exact head: feba32d

The single styles conflict was resolved by preserving both the current forced-colors editor focus rule and the diagnostics focus, border, and underline rules in one ordered media block.

Verification on that tree:

• focused diagnostics UI and reflection tests: 8 files, 33 tests passed
• forced-colors and print regression tests: 3 files, 12 tests passed
• isolated capacity rerun: 2 tests passed after one unrelated suite-load timeout
• full Vitest coverage rerun: 179 files, 1027 tests passed
• statements, branches, functions, and lines: 100%
• effective PR delta remains the intended eleven files
• hosted head/base OIDs and file list re-fetched after push; mergeable is MERGEABLE

@codex review

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.