Hook to manage the focus of the form and its children when they are invalid. (Inspired by Kent's suggestion in the focus management lesson in the Epic Web second workshop.)

useFocusInvalid.ts

export function useFocusInvalid(
  formRef: HTMLFormElement | null,
  hasErrors: boolean,
) {
  useEffect(() => {
    if (!formRef || !hasErrors) return

    if (formRef.matches('[aria-invalid="true"]')) {
      formRef.focus()
    } else {
      const invalidElementFirst = formRef.querySelector('[aria-invalid="true"]')
      if (invalidElementFirst instanceof HTMLElement) {
        invalidElementFirst.focus()
      }
    }
  }, [formRef, hasErrors])
}