search

department-of-veterans-affairs / vets-website

Frontend for VA.gov
Creative Commons Zero v1.0 Universal
242 stars 125 forks source link

VACMS-19516 Fix email input focus on error #33080

Closed randimays closed 3 days ago

randimays commented 5 days ago

Are you removing, renaming or moving a folder in this PR?

:warning: TeamSites :warning:

Did you change site-wide styles, platform utilities or other infrastructure?

Summary

When the email signup widget has an error, the focus should be thrown to the header of the input so that the next element in the tab order is the input. This fixes that issue as well as resolves an issue with not enough color contrast between the character counter text and the blue background. (Color contrast guidance from Laura here).

Also includes a tweak to make the input a VaTextInput so it will be properly attached to the React binding and event listeners. It was causing a console error that I did not notice before.

Related issue(s)

Testing done

Requires testing locally with content-build running and pointed to https://cms-g1rglcuobmlvgewnhny9uo7f6vigntwi.demo.cms.va.gov/ - This is how you get the new email form because the feature toggle is in the correct state. Otherwise you will only see the old form.

  1. Turn on Mac VoiceOver so you can tell where focus is thrown
  2. Type in an invalid email address and tab out of the field (blur the input)
  3. Validate that the focus is thrown to the header of the input (Sign up to get the latest VA updates)
  4. Immediately after the header is read, the error message should be read
  5. If you hit the tab key, the next element that you should focus on is the input where you can edit the email
  6. Edit the email address to a valid input
  7. Tab again to Sign up and verify that the button works correctly

Screenshots

For the focus updates:

https://github.com/user-attachments/assets/73ae9c8b-cae9-418e-8a17-4c269474ad64

For the color contrast updates:

Screenshot 2024-11-19 at 10 15 18 AM Screenshot 2024-11-19 at 10 15 13 AM

Acceptance criteria

randimays commented 4 days ago

@laflannery If you would like to review the changes for focus behavior and character count color, I dropped a video and some screenshots here. The code changes require running both VW and CB together locally and I don't think you want to do (though - let me know if you're ever interested).

The review instance won't work as expected because it requires a CMS feature toggle being in the correct state and I don't think I can reliably change that without affecting other PRs.

I will let you know when this code merges and is ready on the other Tugboat you validated before so you can physically test it. Note that there wasn't a PR for the prior changes because I had to get everything merged to main and then set up the Tugboat in order to get all the things in the correct place.

laflannery commented 4 days ago

I watched the video, that looks good. Thanks!

chriskim2311 commented 4 days ago

@randimays Hmm I am not getting the error message read to me after tabbing to the header after the invalid email address.

https://github.com/user-attachments/assets/abb9692f-da12-4524-952b-c0f0c47869ba

randimays commented 4 days ago

Spoke with Chris and Laura in DMs about the focus behavior being different than expected on Chris's machine. We think it has to do with different macOS versions (and thus different Mac VoiceOver behavior) and the way the web components are laid out in markup.

Laura said accessibility folks have been looking at error handling in general on form fields and there are known issues with error messages being read out as expected. We're going to accept the behavior differences as-is and work on getting this addressed at the web component level (most likely).