When the inputmode prop is set to email we should add the following attributes to reduce user frustration:
autocomplete="email"
autocapitalize="none"
autocorrect="off"
spellcheck="false"
This will stop browsers automatically changing user input on fields that expect grammatically incorrect data—like email addresses. The first attribute might do the following 3 automatically so that should be tested. But the end result is that we want the browser to not change input when entering a valid email address.
Details
This is the first in a series of improvements we should make to our inputs where we support a specific type. So more to come. More on autocomplete.
Tasks
[ ] Add autocomplete="email" to va-text-input when input mode = email. Test. If acceptance criteria is met, stop. If not, continue to next task.
[ ] Add the attributes described above to va-text-input.
Acceptance Criteria
[ ] Entering text into a va-text-input with inputmode set to "email" should prevent the browser from auto-correcting a valid email address when entered into the field.
[ ] If a user has an email address registered with the browser, that email address should auto-populate into the field when the user is unauthenticated (when authenticated we should be populating email from VA.gov Profile)
When the inputmode prop is set to email we should add the following attributes to reduce user frustration:
This will stop browsers automatically changing user input on fields that expect grammatically incorrect data—like email addresses. The first attribute might do the following 3 automatically so that should be tested. But the end result is that we want the browser to not change input when entering a valid email address.
Details
This is the first in a series of improvements we should make to our inputs where we support a specific type. So more to come. More on autocomplete.
Tasks
Acceptance Criteria