fix(chat): show composer focus ring for keyboard

[rubyycheung]

Summary

• add the shared focus outline when keyboard focus enters the ChatComposer editor
• suppress the composer-level ring for pointer focus
• leave focus indication on internal buttons instead of ringing the whole composer
• document the behavior and add a patch changeset

Why

The elevated composer intentionally preserved its legacy low-to-medium shadow change on focus, but shadow depth is not a reliable WCAG focus indicator. WCAG 2.4.7 requires visible keyboard focus, and WCAG 1.4.11 requires an author-supplied focus indicator to reach 3:1 against adjacent colors.

This keeps elevation as visual depth and adds a separate, theme-controlled focus outline.

References:

• https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html
• https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html#related-focus

Verification

• pnpm exec vitest run packages/core/src/Chat/ChatComposer.test.tsx packages/core/src/Chat/ChatComposerInput.test.tsx
• pnpm --filter @astryxdesign/core exec tsc --noEmit
• pnpm exec eslint packages/core/src/Chat/ChatComposer.tsx packages/core/src/Chat/ChatComposer.test.tsx
• pnpm check:changesets

@rubyycheung

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
astryx	Ready	Preview	Sep 2, 2026 8:03am UTC

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

Chat _{(@astryxdesign/core)} · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	5464	-
Complexity	N/A	Very High (447)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.8KB	1.2KB

Accessibility Audit

Status: No accessibility violations detected.

Visual Regression

Status: No visual change across 14 compared shot(s).

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}

[xinzi-bot]

Automated review confirmed the keyboard focus ring at the current head. One documentation mismatch remains: the Chinese and dense elevation descriptions still omit the new keyboard-only ring. Updating both would keep the published focus contract aligned.

[Automated review]

[xinzi-bot]

Thanks for the cleanup. The keyboard focus behavior now checks out at this head, but the Chinese and dense public docs still describe the old elevation-only contract. Could you update those two elevation entries too so all docs mention the keyboard-only body ring and pointer behavior?

[Automated review]

[xinzi-bot]

Approved at exact head; docs and keyboard-only focus behavior are aligned. @imdreamrunner, this looks ready for your approval.

[Automated review]

[rubyycheung]

Synced this branch with current main, including the current interaction-modality architecture from #5734.

Added explicit regression coverage for its last-input invariant:

• programmatic editor focus after keyboard input shows the composer ring
• programmatic editor focus after pointer input keeps the composer ring hidden

Local verification passed:

• pnpm exec vitest run packages/core/src/Chat/ChatComposer.test.tsx packages/core/src/Chat/ChatComposerInput.test.tsx (62 tests)
• pnpm exec eslint packages/core/src/Chat/ChatComposer.tsx packages/core/src/Chat/ChatComposer.test.tsx
• pnpm --filter @astryxdesign/core exec tsc --noEmit
• pnpm check:changesets
• pnpm check:knowledge
• repository pre-commit checks

The updated Storybook preview should be used for the architecture record’s real-browser verification of keyboard focus, pointer suppression/clearing, internal-button ownership, and programmatic focus after both modalities.

[cixzhang]

Thanks, the keyboard-only composer ring works across keyboard, pointer, touch, programmatic focus, and internal-button ownership.

One thing still blocks this head: the new Chat RTL target never measures an assistant bubble. core-chat--default renders assistant responses as Markdown, so that selector matches zero and pr-rtl stays red. Please target two elements that both exist in the story, or add a dedicated fixture, so D2 produces a real result.

[Reviewed by Robohands]

[cixzhang]

Thanks, the prior RTL blocker is fixed: the Mixed Content target now measures both sender bubbles. Exact-head focus ownership also passes.

[Reviewed by Robohands]