Verification practice
Using the Component Lab as evidence
What Gummy UI’s Component Lab reveals, what automated tests add, and why a specimen page cannot replace browser and assistive-technology verification.
By Gummy UI · Published
Keep canonical source in the specimen
The Component Lab imports the same component files used by the catalogue and registry. It does not maintain a second visual-only implementation for screenshots. This makes state review useful: a focus, validation, overlay, or responsive finding can be traced back to the source that a consumer would receive.
The Lab groups related components and shows live compositions beside persistent state specimens. Forced focus or hover classes help compare several visuals at once, while live controls remain necessary for keyboard, pointer, value, and focus checks. The two modes answer different questions.
Inspect environmental axes
Theme, direction, motion preference, and viewport size can change both visual material and behavior. The Lab exposes dark and RTL contexts and includes responsive content designed to wrap. Shared styles include reduced-motion rules that can be reviewed with the browser preference enabled.
A useful audit records the viewport, theme, direction, input path, state, finding, fix, and re-inspection. Without those details, “checked responsive behavior” is difficult to repeat. Gummy UI’s existing audit notes are local evidence, while a production launch still requires a fuller recorded browser matrix.
Pair visuals with executable checks
Vitest and Testing Library cover roles, labels, state, keyboard paths, and form behavior for the current public sources. Axe inspects representative rendered states in jsdom, and selected token-level tests calculate stable colour contrast. Registry verification copies and type-checks the declared files.
Each layer has limits. jsdom is not a browser layout engine, token checks cannot see every blended pixel, and a type-check does not invoke a package-manager installation journey. The Lab provides human-readable context around those checks but does not erase their boundaries.
Turn findings into source changes
A visual audit is complete only when a finding leads to a fix and a second inspection. If a narrow header leaves an empty status shell, the responsive layout changes. If a forced focus specimen differs from live focus, both the reference and actual selector are reconciled. Notes should describe the outcome rather than declare taste-based approval.
The most useful role of a Lab is therefore diagnostic. It concentrates meaningful states, exposes shared regressions, and gives contributors a repeatable place to compare behavior and material. Release evidence still expands outward to clean consumers, real devices, assistive technology, performance, and deployed security.