[Component Audit] ChatComposerDrawer: keep hidden attachments out of keyboard reach

[cixzhang]

User impact

This audit keeps people using a keyboard or screen reader out of visually hidden attachment actions after the composer drawer collapses, and gives the disclosure control the shared visible keyboard focus indicator.

No public API, default, child composition, or collapsed-summary design changes. The separate visual proposal in #5399 remains untouched.

Audit identity

• Package: @astryxdesign/core/Chat
• Base: 6298680a9002c6db7669a49eb0e461bf13707a05
• Head: 2a895f1f2c8b5ee05cfe03f54ea52b1e0daff375
• Rubric: Night Watch 1.16.6
• Mode: manual guarded merge after exact-head gates and independent private review

Scorecard

Baseline: 72.3/100 (C), 3 BLOCKs, §5b not measured
After local remediation: 88.5/100 (B), 0 BLOCKs, §5b not measured
Projected after complete exact-head rendered evidence: 89.0/100 (B), 0 BLOCKs

Section	Weight	Before	After	State / evidence
§1 Accessibility	16	2.5	4.5	Collapsed descendants are inert; the disclosure uses the shared focus indicator.
§2 Theming	14	4	4.5	Root target and collapsed axis are now directly discoverable; semantic tokens remain unchanged.
§3 Public API	14	4	4	Props, defaults, exports, ref, BaseProps, and controlled/uncontrolled behavior are unchanged.
§4 Behavior	12	4	4.5	Mouse, Enter, Space, controlled, and uncontrolled collapse remain covered.
§5a Objective design	6	4.5	4.5	Logical CSS, semantic tokens, component-local paint order, and disclosure collapse remain intact.
§5b Rendered design	4	—	—	Pending exact-head browser pixels; no local visual claim is inferred.
§6 Testing	8	3	4.5	Red-before-green inert regression, keyboard/callback tests, and three direct browser fixtures.
§7 Code health	8	4.5	4.5	Local render-derived state; no Effect, observer, listener, timer, or resource.
§8 Docs/Storybook	8	3	4.5	Copyable example fixed; direct usage, anatomy, target metadata, contract, and stories added.
§9 i18n/RTL	5	—	5	Catalog-backed labels and logical CSS; exact-head RTL result pending.
§10 Responsive/touch	5	—	4	Direct 480px fixture; narrow/coarse browser result pending.

Closed FR5 public-surface inventory

12/12 rows accounted; 0 unaccounted public surfaces.

ID	Public surface / state partition	Evidence and disposition
FR5-01	./Chat export and ChatComposerDrawerProps	Package/export checks; unchanged.
FR5-02	Required children and arbitrary child composition	Type, docs, direct stories; unchanged.
FR5-03	count omitted	Source/test: content visible, no disclosure.
FR5-04	Uncontrolled expanded/collapsed	Unit test + direct stories; collapsed descendants now inert.
FR5-05	Controlled expanded/collapsed	Source and contract; isCollapsed remains authoritative.
FR5-06	Mouse, Enter, Space, callback value	Focused tests; opposite effective state requested once.
FR5-07	aria-expanded + aria-controls	Focused tests; controlled region remains mounted and resolvable.
FR5-08	Keyboard focus visibility	Shared focus helper + exact-head KeyboardFocus play fixture.
FR5-09	Default/custom label and count summary	Catalog/source/docs; representation unchanged and #5399 untouched.
FR5-10	Root ref, DOM props, xstyle, className, style	Source/type review; unchanged root ownership.
FR5-11	chat-composer-drawer target and collapsed axis	Runtime target plus ComponentDoc metadata; no new target.
FR5-12	Docs, observational contract, a11y/RTL/visual fixtures	Knowledge/type/build checks pass; exact-head browser gates pending.

Objective authority and changes

• WCAG 2.4.3 and 2.4.7: a visually collapsed subtree no longer leaves keyboard focus on invisible child actions.
• architecture:interaction-modality INV1–INV4 and INV9: the disclosure remains the semantic focus owner and now paints the shared keyboard focus indicator.
• architecture:knowledge-contracts INV11/INV16 and spec:AST-029: the draft contract records shipped behavior and the objective restoration without deciding the separate collapsed-summary visual question.

Red → green evidence

Finding	Before	After
Collapsed child reachability	The controlled region had no inert; focusable children remained reachable while the row was visually collapsed.	The failing regression now passes and verifies expanded → collapsed → expanded availability.
Keyboard focus visibility	The role-button toggle had no focus-visible style.	The shared focus indicator is applied; the direct Storybook play requires a ≥2px non-none outline.
Copyable example	The xstyle example omitted required children.	The example now includes drawer content and matches the public type.

Local verification

• Focused ChatComposerDrawer tests — 4 passed, including preserved red-before-green evidence.
• Core source and docs typechecks — passed.
• Storybook workspace typecheck — passed.
• Strict lint and repository checks — passed.
• Core and production Storybook builds — passed.

Needs Review

No new product decision is required for this repair. The existing count-badge versus plain-text visual proposal remains owned by #5399 and is deliberately outside this PR.

Exact-head gates

Exact-head CI, Storybook plays, accessibility, RTL, rendered evidence, visual acceptance, spec-owner reconciliation, and the independent private review all passed. The owner-exempt review-required status was emitted by GitHub Actions App 15368.

Final result

• Merged: 20777236fb41228ea370c3af52c11167ea1433f3
• Final score: 89.0/100 (B), 0 BLOCKs
• Ledger: 5dca49ea8afd9228d33a62810e475992f0a18c32

[vercel]

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

Project	Deployment	Actions	Updated
astryx	Ready	Preview	Sep 21, 2026 10:47am UTC

[astracat-bot]

AI review status for this pull request.

Review status	Updated
🟡 Reviewed (for maintainers only)	Sep 21, 2026, 10:50 AM 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.

No new or modified components detected.

Bundle Size Summary

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

Accessibility Audit

Status: 36 accessibility violation(s) found — 2 critical, 34 serious.

Button pattern - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/18 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

ChatComposer - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/19 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

ChatComposerInput - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/14 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

ChatReasoning - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 4/5 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

ChatToolCalls - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 10/11 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Checkbox pattern - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/33 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

CheckboxList - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 4/17 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

ClickableCard - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/5 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

CodeEditor - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 3/7 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

CodeEditorPerf - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/2 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

CodeEditorTheme - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 13/14 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

CodeTheme - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 14/16 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

DateRangeInput - 1 issue(s)

• 🔴 critical: Ensure an element's role supports its ARIA attributes
  • Rule: aria-allowed-attr · Affects 1/21 stories · Learn more
  • WCAG: 4.1.2 (Level A)

FileInput - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 3/15 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

GridMasonry - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/3 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Heading - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/16 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Icon - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/18 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

LogStream - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/3 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

MediaTheme Auto - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/5 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

PowerSearch - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/26 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

ProgressBar - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/18 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Radio group pattern - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 3/26 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

RadioList - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 3/14 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

RichTextEditor - 2 issue(s)

• 🟠 serious: Ensure every ARIA input field has an accessible name
  • Rule: aria-input-field-name · Affects 2/18 stories · Learn more
  • WCAG: 4.1.2 (Level A)
• 🔴 critical: Ensure every form element has a label
  • Rule: label · Affects 1/18 stories · Learn more
  • WCAG: 4.1.2 (Level A)

SelectableCard - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/4 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Stepper - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/30 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

TableGroupedRows - 1 issue(s)

• 🟠 serious: Ensure ARIA attributes are used as described in the specification of the element's role
  • Rule: aria-conditional-attr · Affects 3/3 stories · Learn more
  • WCAG: 4.1.2 (Level A)

TableTree - 1 issue(s)

• 🟠 serious: Ensure ARIA attributes are used as described in the specification of the element's role
  • Rule: aria-conditional-attr · Affects 8/9 stories · Learn more
  • WCAG: 4.1.2 (Level A)

Text - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/23 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Theme - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/5 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

PopArt - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 3/6 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Thumbnail - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/12 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Timestamp - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/20 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Token - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/10 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Tokenizer - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/24 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Visual Regression

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

---

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