Align behavior with Primer guidance behind only-validate-on-blur toggle

[joelhawksley]

Problem

Us folks working on improving the GitHub.com signup flow are looking to address a UX/a11y concern with the auto-check element: it validates on every keystroke.

• This UX is frustrating to users who may not have provided a complete input yet, such as a partial email address in our case.
• This UX is frustrating to screen reader users who are spammed with announcements on every keystroke.

Proposed solution

We should modify the behavior to align with https://primer.style/ui-patterns/forms/overview#inline-validation, which states:

Don't attempt to validate an input before the user is done with it. Validation may be performed as the user is typing or making their selection, but only after the first time the input has been validated and the input is in an invalid state. This gives the user early positive feedback by removing the error if the user makes a change that fixes it.

I've done so behind an opt-in only-validate-on-blur (anyone got a better name?) toggle. My hope is to ship this change and then test it across our use-cases on GitHub.com. If it proves to be viable in all cases, I'll make the case to change the default value to true in a breaking release ❤️

I've validated this proposal with both Primer and a11y folks.

Notes for reviewers

Most of my notes are left as code comments: I found this tricky to test at times but was able to figure out coverage for most of it. I did exercise it locally as much as possible.

I did run into a little bit of friction when setting up my local development environment, so I've included a few small docs updates as well.

Closes: #75

[jonrohan]

Seems fully baked 👍🏻 Thanks for the tests