feat(lab): InfoTip — accessible info-icon help affordance (RFC #3349)

[thedjpetersen]

Draft — lab experiment accompanying RFC #3349; graduation to core gated on the RFC + hardening.

What

Adds InfoTip to @astryxdesign/lab: an inline info-icon help affordance — a small "i" button that reveals a tooltip on hover and keyboard focus.

• Composed entirely from core primitives: Tooltip + Icon (registry "info" icon via getIcon(), no hardcoded SVG) + a real <button> trigger.
• Minimal props: content (ReactNode, mirrors Tooltip's content), label (accessible name, default "More information"), size ('xsm' | 'sm' | 'md' | 'lg', maps 1:1 to Icon sizes; default 'sm').
• Styling: tokens only; :hover color change guarded behind @media (hover: hover); focus ring per system convention (2px solid --color-accent on :focus-visible, matching Button/IconButton).
• Escape dismissal via a small controlled-state machine over Tooltip's isOpen (dismissed until pointer/focus leaves the trigger, then triggers re-arm).
• Exported from the lab barrel; InfoTip.doc.mjs follows the lab doc convention (docs / docsZh / docsDense).

Why

Gap report from an internal-tool builder (Meridian): they needed an "i" info/help affordance next to labels/values and hand-composed an info Icon inside a Tooltip. This is one of the most common internal-tools affordances (permission notes, metric definitions, field help).

The a11y-wiring argument (see RFC #3349): Tooltip requires the consumer to supply a correct trigger, and the naive Icon-in-Tooltip composition gets accessibility wrong by default — Icon renders aria-hidden and unfocusable, so keyboard users never see the tooltip, there is no accessible name, and no touch-sized target. Composition can do this correctly; the value of InfoTip is that the a11y wiring naive composition (and LLM codegen) gets wrong is pre-wired. No new visuals.

Testing

• npx vitest run packages/lab/src/InfoTip — 9/9 passed: renders with default accessible name; custom label; aria-describedby links trigger to tooltip layer; trigger Tab-focusable; tooltip on hover; tooltip on keyboard focus; Escape closes; re-opens after Escape once trigger is left; ReactNode content.
• npx vitest run packages/lab — 116/116 passed (8 files, whole lab package).
• pnpm -F @astryxdesign/lab lint — clean.
• pnpm -F @astryxdesign/lab typecheck — clean.

Open questions

• Standalone InfoTip vs a helpTip slot on FieldLabel/Field? External systems diverge (Ant/Carbon/Polaris ship a component; Radix/shadcn leave it to composition) — worth vibe-testing both shapes.
• Prop name for content: content mirrors Tooltip; is that the right family convention, or should it be children?
• Should this graduate at all, or land as a documented recipe (accessible-trigger composition) if the RFC concludes composition + docs is enough?
• Touch behavior: core Tooltip suppresses hover on touch devices; should InfoTip add explicit tap-to-toggle before graduation?

Notes

No changeset: @astryxdesign/lab is private: true (canary-only) and scripts/check-changesets.mjs rejects changesets referencing private packages — PR #3235's changeset targeted @astryxdesign/core only because it also changed core. This PR touches only packages/lab.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview, Comment	Jul 2, 2026 1:31am

[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.6KB	0B

Accessibility Audit

Status: No accessibility violations detected.

---

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

[cixzhang]

Internally this is the help message. I think we should use hover card if the content is more complex than a string since tooltips have an inverted palette and we should also make sure to double check that the content is accessible.

[cixzhang]

Thanks. Since this is in lab I'll stamp so we can see it.