Accessibility

Accessibility is part of the component contract. Start with the correct HTML element, keep the browser interaction model, and use the shared primitive when behaviour needs focus management or keyboard support.

Every interaction

• Must be reachable and operable by keyboard.
• Must have a visible focus indicator.
• Must expose a useful accessible name.
• Must not rely on colour, placement, or an icon alone.
• Must keep text and controls at WCAG AA contrast.
• Must respect reduced motion and avoid essential information in animation.

Use links for navigation and buttons for actions. Keep heading levels in document order. Associate labels, descriptions, and errors with form controls by ID. Mark invalid controls with aria-invalid; put actionable error text next to the control.

Dynamic changes

Move focus only when the task context changes, such as opening a dialog. Return focus to the trigger when an overlay closes. Announce background results through an appropriate live region, and keep toast messages for brief, non-blocking feedback.

Test the finished flow with the keyboard, at 200% zoom, in both themes, and with a screen reader for any new interaction pattern.