Create component states

Create hover, focused, disabled, and loading states for the form input component used on Sign Up and Settings. Add keyboard focus ring and a subtle shake for invalid. Link the states to the existing input component as variants and ensure the default instance on Sign Up uses the focused state when autofill is expected. Deliver by Wednesday end of day and call out any spacing or token conflicts.

Before I add states to the input, make approving the change easy for product and accessibility reviewers. Show contrast ratios for each state, surface how the focus ring will affect layout on small screens, list potential form validation transitions that could feel jarring, and flag any tokens that will need updating so engineers can implement CSS variables consistently.

Product asked for an invalid-state shake on the email input and I created that animation as a variant, but I don’t know whether the shake will confuse screen reader users or fail automated tests. What’s the likely accessibility risk here, what quick tests should I run, and what’s the least-change alternative that keeps the UX signal without harming a11y?

We keep adding visual states in isolated files and only discover accessibility or spacing regressions during QA, which costs two-week rebuilds. Is the root cause inconsistent token usage, missing review gates, or designers working in forks? Recommend one governance change, one tooling check, and one team habit that will prevent these regressions going forward.