Accessibility in Depth: Colour, Motion, Forms, Live Regions

// an accessible field and a live region: labelled, described, invalid-associated, focus on submit, announced counts
function AccountField({ value, onChange, error }: Props) {
  const id = useId()
  const describedBy = [`${id}-hint`, error && `${id}-err`].filter(Boolean).join(' ')
  return (
    <div className="field">
      <label htmlFor={id}>Account number <span aria-hidden="true">*</span></label>
      <p id={`${id}-hint`} className="hint">10 digits, no spaces</p>
      <input id={id} inputMode="numeric" autoComplete="off" required value={value} onChange={onChange}
             aria-invalid={error ? true : undefined} aria-describedby={describedBy} />
      {error && <p id={`${id}-err`} className="error"><Icon name="warning" aria-hidden /> {error}</p>}
    </div>
  )
}
function onSubmit(e: FormEvent<HTMLFormElement>) {
  e.preventDefault()
  const errors = validate(form)
  if (errors.length) { setErrors(errors); requestAnimationFrame(() => document.getElementById(errors[0].fieldId)?.focus()); return }   // focus the first invalid field
  submit()
}
// a status region: present (empty) from first render; text set when the event happens
function ResultCount({ count, loading }: { count: number; loading: boolean }) {
  return <div role="status" className="visually-hidden">{loading ? '' : `${count} matching ${count === 1 ? 'account' : 'accounts'}`}</div>
}
// .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }   // in the tree, not on screen