USWDS-Site: Validation - Add clarity to guidance

[amyleadem]

Summary

Updated the guidance on the validation page to:

1. Removed the # from the data-validation-element value.
2. Made implementation instructions more explicit and clear.
3. Fixed the text-indent issue on external links found inside nested ordered lists.

Related issue

Closes #1846

Preview link

Preview link: Validation guidance

Problem statement

• The implementation guidance for the validation component has outdated guidance for the value of data-validation-element. (Related PR: #5001).
• Some items in the guidance are confusing and could be rewritten so that they are easier to understand.
• There is a styling issue with the regular expression external link on this page.

Solution

1. Changed data-validation-element="#validate-code" to data-validation-element="validate-code"
2. Simplified item 2 by separating out the benefit statement and moving it to when-to-use.md
3. Added active summaries at the top of each item to add clarity.
4. Made minor copy edits to the step-by-step instructions to add clarity.
5. Reset the text-indent on external links nested inside .usa-content-list ol li to resolve style issue.

Testing and review

To review:

• Proofread copy for error and accuracy
• Confirm that the guidance is comprehensive and produces the desired results.

---

Before opening this PR, make sure you’ve done whichever of these applies to you:

• Confirm that this code follows the 18F Front End Coding Style Guide and Accessibility Guide.
• Run git pull origin [base branch] to pull in the most recent updates from your base and check for merge conflicts. (Often, the base branch is develop).
• Run npm test and confirm that all tests pass.
• Run your code through HTML_CodeSniffer and make sure it’s error free.

[mejiaj]

This PR looks good! Added a suggestion for improving external-link mixin in USWDS.

[mejiaj]

I see this section uses usa-content-list. The external-link mixin could benefit from this change too

https://github.com/uswds/uswds/blob/69cf6929585b5c95ed9700a4502830f84e497e95/packages/uswds-core/src/styles/mixins/general/external-link.scss#L14

[amyleadem]

Opened issue https://github.com/uswds/uswds-site/issues/1960 to address this

[bonnieAcameron]

Hi @amyleadem! I added a few clarifying questions and 1 copy edit. For the clarifying questions, take them with a grain of salt, since I'm a 099 level newbie to validation, and I'm assuming anyone reading this will at least have a 101 level understanding. I just flagged places where I felt there could be a bit more explanation.

[amyleadem]

@bonnieAcameron Thanks for the feedback. I added some slight tweaks and some responses to your comments. Let me know if you see anything that needs changing.

[bonnieAcameron]

Just a quick reference to the code block, and it looks great!

[amyleadem]

@bonnieAcameron Added a reference note in 9ec48cb. Let me know if you want any changes!

[bonnieAcameron]

the "have yet to be completed" phrasing might be confusing for ESL readers. Kick it on back to me if you agree and we'll get this wrapped for ya!

[bonnieAcameron]

Looks good!