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.
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.