Behavior
Kappa uses Ark UI Vue primitives for supported interactions. They manage the base keyboard, focus, and ARIA behavior. Use the documented Kappa parts together, and pass labels and state to the correct part. An application still needs to test its completed flow.
For custom controls, keep the semantic element and forward ARIA attributes and event listeners. Do not remove the visible keyboard focus indicator.
Forms
Use Field to connect a label, control, helper text, and error text. Its helper text is linked with aria-describedby. When a field is invalid, its control receives aria-invalid and aria-errormessage; error text uses a polite live region.
Keep a visible label when possible. Show a clear error message and do not add a second live region for the same error.
Layers and Focus
Dialog manages focus, Escape dismissal, and focus return through its Ark UI primitive. Give the dialog a clear title. Choose an initial focus target when the default first focusable element is not the safest action.
If a dialog contains a long scroll region, make that region keyboard-focusable when needed. Check nested popups in the actual application flow.
Visual State
Keep focus, selected, disabled, invalid, and loading states clear in light and dark modes. Use Kappa semantic tokens, not a separate palette in each component. The Colors contrast reference lists token pairs and measured contrast.
Respect prefers-reduced-motion when you add transitions. Do not use color alone to explain a state or an error.
Check Your Work
- Move through the full flow with only the keyboard. Check focus order, visible focus, Escape, and focus return.
- Check control names, helper text, and errors with a screen reader.
- Check light, dark, and reduced-motion settings at the sizes your application supports.