Focus on required field if it has an error

[Nishkea]

Summary

To enhance the UX and accessibility of the form hook we should be able to add the option to auto focus on validation. e.g.: Whenever there is a substantial amount of input fields present the user should be able to quickly pin point any errors that were made during an application process.

This will also increase the accessibility of the form since a user with a screen reader wont have to tab to the missing field and will be able to adjust any mistakes in moments notice.

For example implementations:

ant-design/ant-design#45739

We should see if this feature should be optional or not via e.g.:

<Form focusOnError>
xxx
</Form>

A hacky solution with the current version is something like:

const error = snapshot.get(form).error.children

Object.keys(errors).forEach((error) => { 
   const el = document.getElementById(form.fields[error].name)
   el.focus()
}

For more information about the accessibility implications:
https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html

[EECOLOR]

I don't think this should be added to this library in the way you propose. The library does not know about the html elements. On top of that, the validation runs as soon as a value changes, you don't want to jump around during user interaction.

Theoretically you could add it to the submit handler of the form library, but then you still run into the problem of not having access to the elements.

Lastly, the form library does not know how the elements are rendered and has no concept of order. So it would not know what field would be the first with an error. The hacky solution suffers from this problem as well.

The solution would probably be something like:

• Render some data attribute on the form element if it is not validated
• On submit get the first element with that attribute (I am not sure if the DOM api makes any promises about order of fields)
• Focus the correct element

[Nishkea]

Fair, I'm still working on a good alternative. Since this is a usecase that is currently present and will be more requested in the future I'd like it to work seamless with the form library. An additional attribute / hook that can be passed into an input field might be better.