Autocomplete a11y fixes

hursey013 commented 2 years ago

Fixes https://github.com/usagov/test-at-home/issues/287

For the extra inline "action" prompt, it's within an sr-only tag so only exposed to screen readers. Would love feedback on whether or not the call to action is clear: https://github.com/usagov/test-at-home/compare/bh-autocomplete-a11y?expand=1#diff-44438ce218f5287c58d0017f965d888715635d94280669896f75841fbd7b4cd7R47

porta-antiporta commented 2 years ago

"Press enter to view more entries" works for our release tomorrow imho.

hursey013 commented 2 years ago

"Press enter to view more entries" works for our release tomorrow imho.

Updated

hartsick commented 2 years ago

Checked this out on voiceover and think it's much clearer!

[x] Label associated with input (reads "Address")
[x] Clear indication of what needs to be done to expand options
[x] User redirected to text box with invalid attribute if they bypass autocomplete

I did experience the same thing we heard with Dan, about it skipping over the first entry in the dropdown (we thought it was due to cursor, but I don't think it is). It's a little confusing (going from 1234 Fake St Apt to 1234 Fake St Apt 2, unless you arrow key up one to 1234 Fake St Apt 1) but recoverable.

I have two general UX questions that can be handled as issues separate from this (neither are specific to a11y and I think are just changes in behavior, not reflections of bugs):

If someone skips autocomplete and enters their own address right now there is no error message, only a redirection to the autocomplete box with the "no results" dropdown shown. Is this confusing?
It seems like if person bypasses the autocomplete then we just say their address is invalid rather than sending off the address to the US Street validation API. Should we allow free entry and validate, rather than making them select something from autocorrect? I think supporting both would be nice.

hartsick commented 2 years ago

@hursey013 @porta-antiporta I just pushed this to the same URL as before in case y'all want to re-test tomorrow morning: test_at_home-autocomplete_testing-0.cloud.gov

I'm going to leave this unmerged in case you want to address anything above before moving onto staging, since we don't need this merged to staging in order to have in deployed environment for testing. But I'm good merging as-is!

hursey013 commented 2 years ago

If someone skips autocomplete and enters their own address right now there is no error message, only a redirection to the autocomplete box with the "no results" dropdown shown. Is this confusing?

There is no instant feedback, but if you were to press submit with that address in the input it would then be invalid and the error message would be shown. Are you thinking that it should also be validated on blur?

It seems like if person bypasses the autocomplete then we just say their address is invalid rather than sending off the address to the US Street validation API. Should we allow free entry and validate, rather than making them select something from autocorrect? I think supporting both would be nice.

This would be difficult with the way things are set up right now - our validation expects all of the address components to be split out into individual fields (street address, city, state), but if we were to accept freeform we'd need to first be able to parse that string into all of those individual pieces for our current frontend (and backend) validation. Otherwise we'd need to build in another condition that turns off validating the individual fields and rather just pass the entire autocomplete string to Smarty.

hartsick commented 2 years ago

first: somehow I didn't get error message on submit the first time, but I did now. so ignore that!

second: is a great point, hadn't thought about.

usagov / test-at-home

Autocomplete a11y fixes #288