a11y: add error text to aria-describedBy for form elements

LeahMarieBush commented 5 months ago

Description

This PR updates the form fields to use aria-describedBy for error messages. This is part of the work for our recent accessibility review. I also fixed an error with the error messages when the message contains html (ex. span for email error message in marketoform). This also adds an optional field named formName to MarketoForm. This is used for the aria-label for the component.

Testing

Before link

Go to preview
On the left side, go through each of the form elements and make sure the error text is reading with a screen reader for each form element
Go to the marketo form docs in the preview
Make sure error text is reading with a screen reader. Also check that the email error message no longer includes any html like in the before link
Make sure the aria-label is added to the form element as well.

PR Checklist 🚀

Items in this checklist may not may not apply to your PR, but please consider each item carefully.

[x] Add Asana and Preview links above.
[x] Conduct thorough self-review.
[x] Add or update tests as appropriate.
[x] Conduct reasonable cross browser testing for both compatibility and responsive behavior (We have a Sauce Labs account for this, if you don't have access, just ask!).
[x] Conduct reasonable accessibility review (use the WAS as a guide or an axe browser plugin until we establish more formal checks).
[x] Identify (in the description above) and document (add Asana tasks on this board) any technical debt that you're aware of, but are not addressing as part of this PR.

changeset-bot[bot] commented 5 months ago

🦋 Changeset detected

Latest commit: c0c94d3a404bc197b7b595e4d34a4bfedec37663

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

| Name | Type | | ----------------------------- | ----- | | @hashicorp/react-form-fields | Patch | | @hashicorp/react-marketo-form | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel[bot] commented 5 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-components	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 11, 2024 7:31pm

LeahMarieBush commented 5 months ago

@mikegolus Sorry, I just found another accessibility story for the form elements that I'm going to combine in this PR. I'll tag you again when it's ready for review

LeahMarieBush commented 5 months ago

@mikegolus actually nevermind, that other change needs to be made in the web repo. This is ready for review!

hashicorp / react-components