USWDS-Site - Form templates: Add guidance for labelling required fields

[bonnieAcameron]

Summary

Added documentation about using required fields in forms.

Context

@jaclinec conducted research on best practices for required fields within forms and shared them here. We worked together to find the best place and format for this required guidance.

Preview link

Preview link:

• Form template page
• Form component

Testing and review

Please:

• check for consistent formatting
• let us know if the structure makes sense
• let us know if the location of the new instructions for required fields makes sense
• let us know if we need additional information in the subheading for usability guidance, for example: "required fields usability guidance"

[mejiaj]

I'm able to see the guidance on the Form templates preview.

For some reason clicking on Components in preview returns a 404 for me.

 ---

The guidance itself looks good to me.

[amyleadem]

@bonnieAcameron @mejiaj @jaclinec
Guidance looks good! I added some suggestions in the comments above.

Additionally, I believe it would make sense to update our form templates examples to match these recommendations – specifically, add the (optional) tag to our optional fields, and make the fields in the the password reset form and sign in form required (This is at least my understanding of our guidance).

I also think it would be helpful to include a short note about required fields with a link to this guidance in the usability sections of our Address form, Name form, Password reset form, Sign-in form pages.

Let me know if you need any help with anything or if you have questions!

[bonnieAcameron]

re-requesting reviews!

[amyleadem]

@bonnieAcameron @jaclinec @mejiaj
This should be ready for another review!

Note: The build is currently failing because of an error that seems to be independent of this issue, so we can move forward with review. Resolved with 8043f40

[bonnieAcameron]

It looks great! I have two observations/suggestions:

1. The "notes" are styled in a yellow block, and this actually makes the text in the block seem more important than the lists they follow, when in actuality they are more of an aside or exception. Can we style these with a less "important" color?
2. Can we put the "examples" in the usability guidance list on a new line? For example:

Use text descriptions. Combine red asterisks (*) with a text description at the top of the form instructing the user of its meaning.

Example: “A red asterisk (*) indicates a required field.”

[jaclinec]

I agree with Bonnie's comments and otherwise think this looks good!

[amyleadem]

@jaclinec @bonnieAcameron

I wanted to share an alternative solution. I renamed the section from "Usability guidance" to "Identifying required fields". Additionally, I removed the yellow background from the note and italicized the text. Below is a preview of what it could look like (I haven't yet pushed up any code). What do you think?

[bonnieAcameron]

That's the way to go in my opinion, @amyleadem ! It looks great, and I like the title. It does a much better job than "usability guidance".

[mejiaj]

I've added Form component to preview links in PR description because it also appears there.

Everything looks good, but we should merge #2037 before this PR.

I've tested for:

• Typos
• A11Y issues
• Ran markup through HTML code sniffer

[mejiaj]

Was this file deleted because none of this applies anymore?

Nevermind, I see an a11y section on both guidance pages.

[amyleadem]

@mejiaj I have merged the form changelogs together so that they can be shared across both the component form and template form pages. Re-requesting your review.

[mejiaj]

LGTM! Added a suggestion, but doesn't block or require a re-review.

[mejiaj]

It'd be nice to have a comment at the top that says what pages this data appears on.

[amyleadem]

Great idea. Added a commented note in 0c2c662

[thisisdano]

I'll draw up a changelog PR for this change.
Changelog PR: #2096