Primitive libraries provide a strong behavioral foundation. The finished application still owns its labels, content, contrast, composition and testing. A component library cannot certify every screen built from it.
Keyboard and focus
Buttons must work with their native activation keys. Accordions need discernible triggers and accurate expanded state. Dialogs need a title, initial focus, focus containment, Escape dismissal where appropriate and focus restoration to the trigger.
Use the documented target composition. Replacing a primitive trigger with an arbitrary clickable element can break both state and keyboard behavior.
Labels and status
Icon-only buttons need an accessible name. Loading actions should expose their state and prevent duplicate submissions. Label fields explicitly; associate descriptions and validation messages with the relevant control.
Contrast
Theme Studio includes AA/AAA validation and suggestions for supported color pairs. These checks help you evaluate token choices; they are not a full application accessibility audit. Verify rendered text, disabled states, focus indicators, charts and overlays in context.
If the agent reports that the contrast check could not run because no colour pairs are defined, ask a Design System maintainer to document the text and background tokens used together, with their actual colour values, in the design context. For example, a pair can be written as <text token> <colour> on <surface token> <colour>. Use your Design System’s values. Approve and adopt that update, then rerun the check. Until the check runs, the result remains unverified.
Motion with a purpose
Use motion to show cause and effect: a panel opening, a press being acknowledged, a dialog entering focus. Keep durations short and avoid repeated motion that competes with reading.
@media (prefers-reduced-motion: reduce) {
.component-preview {
animation: none;
transition: none;
}
}The component examples respect reduced-motion preferences. Test your application’s own transitions alongside keyboard and screen-reader behavior.
Test the finished experience
Navigate without a mouse, test with a screen reader, zoom the page, try narrow viewports and enable reduced motion. Confirm that text and actions remain available when animation is disabled.