Repository navigation
[Component Audit] InfoTip: the docs page gets worked examples, and hover, focus, pin, and Escape are proven in a browser - #9940
Conversation
…e toggletip states are proven in a browser
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
|
AI review status for this pull request.
|
github-actions
Bot
added
the
needs:design-review
PR Analysis Report🔎 Preview ·
|
| Component | Size | LoC | Visual · A11y · RTL |
|---|---|---|---|
| InfoTip · Storybook | 36.8 kB (0) · 5.0 kB CSS (0) | 160 (0) | — · ✓ · — |
Package size:
- @astryxdesign/cli 3.34 MB packed (+1.1 kB); no new dependencies
- @astryxdesign/core 6.32 MB packed (+324 B); no new dependencies
API changes: none in this pull request
Committed API report behind this build: cli 8 rows, theme-butter 1 row, theme-chocolate 1 row, theme-gothic 1 row, theme-matcha 1 row, theme-neutral 1 row, theme-stone 1 row, theme-y2k 1 row; run pnpm api:report.
Touched components checked; add ci:run-visual to run the full suite.
Generated by PR Enrichment workflow | View full report
cixzhang
changed the title
![astracat-bot[bot]](https://avatars.githubusercontent.com/in/4796231?s=60&v=4){kind=small}
There was a problem hiding this comment.
Changes requested: the InfoTip examples, anatomy and browser audit hold up, but one fix is needed before this can merge.
apps/sandbox/scripts/next-export-routes.jsonneeds/templates/InfoTipMetricDefinitions/,/templates/InfoTipPermissionNotes/and/templates/InfoTipShowcase/(sorted after/templates/IconStatusIcons/); without themapps/sandbox/src/route-manifest.test.tsfails and the Sandbox build in the docs deploy stops, which matches the docs preview failure on both commits.
The Chromium audit spec passes all 17 of its tests against a Storybook built from this head, and the new unit test covers the icon at every size. CI started on this head when it was marked ready and had not finished when this review was written.
[Automated review]
| "aliases": [] | ||
| }, | ||
| { | ||
| "name": "example-info-tip-metric-definitions", |
There was a problem hiding this comment.
The shadcn route lock gets the three new blocks, but the Sandbox route list does not: apps/sandbox/scripts/next-export-routes.json also needs /templates/InfoTipMetricDefinitions/, /templates/InfoTipPermissionNotes/ and /templates/InfoTipShowcase/, sorted after /templates/IconStatusIcons/. Without them apps/sandbox/src/route-manifest.test.ts fails, and the Sandbox build that the docs deploy runs stops in verify-export.mjs with "Static route mismatch".
cixzhang
added
ci:run-a11y
…ox export contract
There was a problem hiding this comment.
Approved pending CI: the required build, test and docsite-test suites were deferred on this push and still need to run before merge.
The three Sandbox routes fix the earlier route-contract and docs-deploy failure: the Sandbox route test and build pass on this head, and the docs preview now deploys. The InfoTip examples, anatomy and toggletip wording match the component's contract, and the focus, click, Enter and Escape states check out in Chromium. The description still reads as the draft placeholder.
[Automated review]
There was a problem hiding this comment.
Changes requested: one wording fix in the changeset before this can merge.
- Miss:
.changeset/info-tip-audit-examples.mdsaysastryx component InfoTipnow has worked examples, but that command prints the new Anatomy table and no example (they appear only with--showcaseand--blocks), so name those flags in the changeset and in the description's User impact.
Everything else holds on this head: the showcase, the two examples, the anatomy list and the toggletip sentence match InfoTip's contract, and CI is green, including the 16 Chromium audit frames.
[Automated review]
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [docs] InfoTip: the component page and `astryx component InfoTip` now have worked examples — a showcase metric label, a row of metric definitions, and read-only settings with permission notes. InfoTip's docs list its anatomy (trigger button, info icon, help surface) and say it follows the toggletip pattern: the button reports `aria-expanded="true"` while the help is pinned, and a screen reader hears the help once when it pins. |
There was a problem hiding this comment.
Miss: on this head astryx component InfoTip prints the new Anatomy table but no example; the blocks appear only under astryx component InfoTip --showcase (the showcase source) and --blocks (the list). Suggested wording: "the component page, astryx component InfoTip --showcase and astryx component InfoTip --blocks now have worked examples". The description's User impact makes the same claim.
There was a problem hiding this comment.
Changes requested: one sentence in the pull request description still needs the fix the changeset got.
- The description's User impact says
astryx component InfoTipnow shows the showcase and the two examples, but on this head that command prints the new Anatomy table and no example (they appear only with--showcaseand--blocks), so name those flags there as the changeset now does.
The changeset, the three blocks, the anatomy list and the toggletip sentence match InfoTip's contract, and the 16 Chromium audit frames pass on this head. The description's Audit result and Evidence sections also still cite the previous head. One non-blocking inline suggestion covers the InfoTip.tsx header length.
[Automated review]
| * - /docs/specs/components/InfoTip/InfoTip.spec.md (contract) | ||
| * - /packages/core/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior) | ||
| * - /packages/core/src/InfoTip/index.ts (exports if types change) | ||
| * - /packages/cli/assets/templates/blocks/components/InfoTip/ (showcase and example blocks) |
There was a problem hiding this comment.
Miss, non-blocking: with this line the file header holds 13 lines between /** and */, past the about-12-line header that architecture:knowledge-contracts INV29 allows. Keep this SYNC: line and fold @input and @position onto one line each, for example @input React, StyleX, useTooltip, Icon, the translator, the shared hit area, tokens.
There was a problem hiding this comment.
Approved: the InfoTip showcase, the two example blocks, the anatomy list and the toggletip sentence match InfoTip's contract, and the description now names --showcase and --blocks, which is where the examples appear.
CI is green on this head, including the 16 Chromium audit frames, and the new size test fails when the icon ignores size or uses other artwork. The earlier non-blocking note on the InfoTip.tsx header length stays a follow-up.
[Automated review]
User impact
Builders now see InfoTip in use. The InfoTip docs page,
astryx component InfoTip --showcase, andastryx component InfoTip --blockshad no showcase and no examples, so a builder or a code assistant had only the prop table to learn from. They now show a metric label with an InfoTip, a row of metric definitions, and read-only settings whose labels say who can change each value. The docs now list InfoTip's anatomy (trigger button, info icon, help surface) and say that it follows the toggletip pattern: the button reportsaria-expanded="true"while the help is pinned, and a screen reader hears the help once when it pins.People who use InfoTip get the same control as before, now proven in a real browser: one named native button per InfoTip, in the tab order, with a decorative info icon centered in a round box at 12, 16, 20, and 24 px per size; hover and keyboard focus show the help and describe the button; a click or Enter pins it with
aria-expanded="true"; Escape closes it and keeps the focus outline. The component's runtime, DOM, styles, and public API do not change.Audit result
core/InfoTip(released in@astryxdesign/coreunder./InfoTip)1.16.62951a3ac323b463b428a6a28c30c30a8c0b35330572d85d260404aa29fd8e0398a1e4ee0c42c380cInfoTip.spec.md(authority: current), unchanged. No observational backfill was needed.SYNC:header line)aria-expandedandaria-controls, keyboard pin and close, focus outline, coarse-pointer hit area (existing touch spec); the fine-pointer target is measured in Needs Review 2colortransitionsnot measuredlimited: an inline icon control; touch reach is graded in §1limitedandnot measuredsections are reported for information, and their weight is redistributed across the measured sections (91 of 100 before, 95 after). §11 is not run for an existing core component.Why the score moved: the block templates close the §8 BLOCK and the anatomy and pattern docs close its FIXes (2→5); the size test closes the §6 gap (4→5); the verified-N/A entry closes the §9 RTL coverage gap (4→5); §5b is now measured. §2 stays at 4 because its finding needs an owner decision.
Pre-fix score: scored from base source before any change. Night Watch records only the landed post-fix result in the score ledger, so the pre-fix score lives here.
Findings fixed
astryxvalidation reports it ascomponent_without_examplearchitecture:cli-surfaceDEC-13;architecture:template-authoringblocks/components/InfoTip/, withexampleFor: 'InfoTip'and completecomponentsUsed. The registry route lock gains their three routes, andInfoTip.tsx'sSYNC:header names the foldercomponent:InfoTipDesign relationshipsusage.anatomylists the trigger button, the info icon, and the help surface, as the contract names themcomponent:InfoTipAR2;component:TooltipAR6infoartwork atsize,smby defaultcomponent:InfoTipFR1, Public concepts;architecture:component-test-sufficiencydata-sizeand artwork against a referenceIconfor each size and the default. Mutation proof: droppingsize, or rendering another icon, fails only the new test; every other InfoTip test still passesarchitecture:rtl-audit-evidenceINV5core/InfoTipverified-N/A entry with its reason and the sha256 of the story, source, barrel, and shared hit-area filescomponent:InfoTipFR1, FR2, AR2; WCAG 2.5.8aria-expanded,aria-controls, and the descriptionNeeds Review
architecture:component-theming-surfaceINV1 says Core components provide targets, metadata, and anatomy dispositions, and INV3 says anonedisposition is a valid, recorded outcome. Whether InfoTip gets aninfo-tiptarget on its button or a recordednoneis a public theming decision, so this audit does not make it.sm, the button is 20 by 20 CSS px under a mouse;xsmis 16 by 16. It passes WCAG 2.5.8 through the spacing exception wherever a 24 px circle on its center clears other targets, which every story frame proves. A caller who puts another control within about 2 px of it would fail. AR1 covers only coarse pointers. Whether InfoTip should promise 24 px under every pointer is a visual decision.@astryxdesign/core@0.7.7publishes./InfoTip. Its verification map does not list the new size test or browser spec. Changing a current record needs an owner-approved record change, so it stays out of this pull request.InfoTip.tsx. This pull request changes one header comment line there; whichever lands second rebases one line.SYNC:line this pull request adds makesInfoTip.tsx's file header 13 lines, one past the about-12-line guidance inarchitecture:knowledge-contractsINV29. Folding@inputand@positiononto one line each fixes it; it is left for the next change to that file so this audit head does not rerun CI for a comment.Evidence
2951a3a: noblocks/components/InfoTip/folder;usage.anatomyabsent; the two mutants above survive every base InfoTip test;pnpm rtl:audithas no InfoTip target and no verified-N/A entry; no browser spec covers fine-pointer states.pr-a11y-evidence-572d85d(sha256:7607aed19df82641943997062349f8a4068451516bc4d19c33faed7bd8b5c5e5), each bound to build572d85d;xsm,sm,md, andlgat Neutral, and thexsmandsmboxes pass through the spacing exception in every frame;pr-rtl (core):core/InfoTipisverified-nawith no applicable dimension, so the entry is not stale.Closed evidence inventory
InfoTip,InfoTipProps,InfoTipSizeInfoTip/index.tsInfoTip.doc.mjsarchitecture:public-component-apiINV1type="button", in the tab order, no wrapperInfoTip.tsxlabel, else the translated defaultInfoTip.tsxlabelaria-labelin every frameinfoicon atsize,smby defaultInfoTip.tsxsize, anatomysizes-*: 12/16/20/24 px iconsuseTooltipdefault-*-hover-*,next-to-a-label-*-focus-*component:Tooltiparia-expanded,aria-controlsInfoTip.tsx*-click-pin-*,*-key-pin-*useTooltip*-escape-*useTooltipInfoTip.tsxref,xstyle,className,styleon the buttonInfoTip.tsxcontent,label,size,xstyleInfoTip.tsx,utils/hitArea.tsInfoTip.tsxpackages/lab/src/InfoTipInfoTip.tsxarchitecture:component-theming-surfaceINV1, INV3pr-rtlverified-naarchitecture:rtl-audit-evidenceINV5FR10 eligibility report
{ "schema": "astryx.audit-eligibility/v1", "component": "InfoTip", "package": "core", "mode": "night-watch", "rubricVersion": "1.16.6", "repository": { "base": "2951a3ac323b463b428a6a28c30c30a8c0b35330", "head": "572d85d260404aa29fd8e0398a1e4ee0c42c380c" }, "contract": {"id": "component:InfoTip", "authority": "current", "changed": false}, "inventory": {"closed": true, "rows": 15, "open": ["theming participation"]}, "unresolved": { "objective": [], "manual": [ "theming target or none disposition (component-theming-surface INV1, INV3)", "fine-pointer target size guarantee", "record drift in component:InfoTip (released status, verification map)" ], "ownedElsewhere": [] }, "remediations": [ {"id": "X6/X7", "kind": "doc-drift", "evidence": "InfoTip block templates and route locks"}, {"id": "X4", "kind": "doc-drift", "evidence": "usage.anatomy"}, {"id": "X16", "kind": "doc-drift", "evidence": "toggletip pattern in usage text"}, {"id": "V3", "kind": "objective-test", "evidence": "two mutants killed only by the new size test"}, {"id": "I17", "kind": "objective-test", "evidence": "pr-rtl verified-na for core/InfoTip"}, {"id": "V15", "kind": "browser-evidence", "evidence": "InfoTipAudit receipts, 16 frames"} ], "approvals": {"specOwner": "success (no record change)"}, "checks": "all green at 572d85d (CI run 41847196147 attempt 2, pr-a11y and pr-rtl included)", "eligible": false, "reasons": ["spec:AST-029 is phase accepted; FR11 activation has not shipped"] }