A11y: Conditions 660 663/prototype autocomplete labels

[bacitracin]

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

• No, I'm not changing any folders (skip to TeamSites and delete the rest of this section)
• Yes, I'm removing, renaming or moving a folder

⚠️ TeamSites ⚠️

Examples of a TeamSite: https://va.gov/health and https://benefits.va.gov/benefits/. This scenario is also referred to as the "injected" header and footer. You can reach out in the #sitewide-public-websites Slack channel for questions.

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

• No
• Yes, and I used the proxy-rewrite steps to test the injected header scenario

Summary

This change only affects the Autocomplete component that appears on the Apple & Cherry prototypes under user-testing/new-conditions.

Previously we were using the form systems labels, and not the built in labels of VATextInput. So when you clicked on the label text, it didn't activate the text input and move focus there. This PR uses those labels instead. This also fixes the screenreader reading out "*required" separately from the rest of the label.

Related issue(s)

For

• https://github.com/department-of-veterans-affairs/vagov-claim-classification/issues/660 and
• https://github.com/department-of-veterans-affairs/vagov-claim-classification/issues/663

Testing done

To test:
Go to http://localhost:3001/user-testing/new-conditions/new-conditions-apple/0/condition?add=true

OR

http://localhost:3001/user-testing/new-conditions/new-conditions-cherry/0/condition?add=true

1. Scroll down to the add conditions box and use the mouse to click on the label "Enter your condition (*Required)". Focus should move to the text input, as seen in the Loom video below under "Screenshots".
2. Using a screen reader, navigate to the label "Enter your condition (*Required)". You should land on the label and it all read out together, not separating "(*Required)" out.

Screenshots

https://www.loom.com/share/1d56fc2b4f574b44a667c7da8958e31a?sid=0b6f6e02-52bf-4784-919c-d3e638557ca5

What areas of the site does it impact?

• http://localhost:3001/user-testing/new-conditions/new-conditions-apple/0/condition?add=true
  and
• http://localhost:3001/user-testing/new-conditions/new-conditions-cherry/0/condition?add=true

Acceptance criteria

Quality Assurance & Testing

• I fixed|updated|added unit tests and integration tests for each feature (if applicable).
• No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
• Linting warnings have been addressed
• Documentation has been updated (link to documentation *if necessary)
• Screenshot of the developed feature is added
• Accessibility testing has been performed

Error Handling

• Browser console contains no warnings or errors.
• Events are being sent to the appropriate logging solution
• Feature/bug has a monitor built into Datadog or Grafana (if applicable)

Authentication

• Did you login to a local build and verify all authenticated routes work as expected with a test user

Requested Feedback

(OPTIONAL) What should the reviewers know in addition to the above. Is there anything specific you wish the reviewer to assist with. Do you have any concerns with this PR, why?

[williamphelps13]

Nice fix here! I tested the before (clicking on label does not bring focus into input and screenreader does not read label or required when focus on field) and the after (clicking on labels brings focus and screenreader reads "Enter your condition *Required" first on focus).

Potentially the reason I implemented this field with ui:title instead of using the VaTextInput label (like we do on the addDisabilities page) was to avoid the need to hide the default ui:title label text with CSS like we do in the addDisabilities page. However, the hideLabelText option creates a clean solution here and of course fixes the issue the ui:title created. Good job identifying this option.