Build and test an accessible UI component

Implement [COMPONENT] in [FRAMEWORK] for [USER TASK]. The design reference is [REFERENCE], and the component must work from [MIN WIDTH] to desktop.

Define semantic HTML and accessible name/description relationships before styling. Specify keyboard behaviour, focus order, visible focus state, reduced-motion behaviour, touch target size, loading/empty/error states and colour-contrast checks. Implement without breaking the existing design system. Add interaction tests for mouse, keyboard and screen-reader-relevant state changes. Include a manual device checklist and note anything automated tests cannot prove.

Avoid div-as-button shortcuts, focus traps, hover-only information, disabled controls with no explanation and hidden content that is still keyboard-focusable. Return changed files, tests and remaining visual-verification limits.