USWDS-Site: Add character count accessibility tests page

[amyleadem]

Summary

• Added character count accessibility tests page.
• Added a bottom margin to the WCAG compliance tag. This allowed for more visual separation from the known issues alert. It should not have any affect on the spacing for pages without the known issues alert.
• Updated the component name assignment in a11y-note.html and test-results-summary.html. Before, the includes pulled the page.component.name, which at times is the component slug and includes dashes. Now, they pull the page title.
• Added the word "component" to the bolded copy in a11y-note.html. This changed the text "Test the character count in your own project." to "Test the character count component in your own project."

Important

We need to confirm the changelog dates before merge.

Important

This PR is based off the changes from USWDS-Site - Accessibility tests: Rename accessibility.md files (#2581). We should wait to merge this until #2581 is merged into main.

Resources

• Creating accessibility checklists process doc (Google docs 🔒)
• Accessibility checklist spreadsheet (Google sheets 🔒)

Related issue

Closes #2532

Preview link

• Character count - accessibility test page
• Character count main page

Testing and review

1. Confirm that both the main component page and the accessibility tests page have the correct compliance tag at the top.
2. Confirm that the bottom margin looks good on the compliance tag.
3. Confirm that the main component page links to the accessibility tests page in the side navigation.
4. Check that accessibility tests page provides the correct counts for each test status type.
5. Confirm the test checklist summaries and data are accurate.
6. Confirm no visual issues.
7. Confirm there is an appropriate changelog entry on both the main component page and the accessibility tests page.
8. Confirm the note in the accessibility guidance section of the main component page uses the correct component name ("character count" and not "character-count")

[amyleadem]

@sarah-sch @finekatie @amycole501 @alex-hull
This is ready for your review. From my perspective, we'll only need review from one person in each discipline, but welcome everyone's feedback if more folks want to review.

I had a some open questions below. Can you take a look and let me know what you think?

Thanks for prepping these summaries in the spreadsheet! Building the page was much quicker and easier this time 😎.

[finekatie]

I approve. I did comment on the two spots where you tagged me and/or Sarah. I'm not approving yet because I don't know if you need more feedback from me, but will when you're ready!

[alex-hull]

Took a look through your changes and made a few notes. Let me know if you need any more clarification on any comments made! @amyleadem

[sarah-sch]

@amyleadem - One important note: In several places, we are plugging in "character count accessibility tests" where it should read just "character count." (E.g., see the first three H2s on the page ... there are other places as well.) I'm assuming this just needs to be switched in one place that's getting plugged in throughout the page.

Leaving a few comments, too. I will bo OOO tomorrow, so if you are trying to publish before that I trust you and the team to address the feedback without me needing to review again.

[amyleadem]

@amycole501 @alex-hull @sarah-sch @finekatie

This is ready for your re-review. Please let me know if you have any questions or comments.

[amycole501]

The page reads well, I have one suggestion to add a success criteria check but can do that after the page is posted.

[alex-hull]

Added changes look good

[sarah-sch]

Just noting that we are still repeating "character count accessibility tests" programmatically where we should be using something along the lines of "character count" of "character count component. Other than this issue, which I assume will be fixed programmatically, the pages look good.

[amyleadem]

Important

We should confirm the changelog dates before merge

[amyleadem]

Just noting that we are still repeating "character count accessibility tests" programmatically where we should be using something along the lines of "character count" of "character count component. Other than this issue, which I assume will be fixed programmatically, the pages look good.

@sarah-sch Thanks for flagging this. I updated the component name in b1bbca8. This should resolve the issue you are seeing.

[sarah-sch]

Just noting that we are still repeating "character count accessibility tests" programmatically where we should be using something along the lines of "character count" of "character count component. Other than this issue, which I assume will be fixed programmatically, the pages look good.

@sarah-sch Thanks for flagging this. I updated the component name in b1bbca8. This should resolve the issue you are seeing.

Looks great now, @amyleadem!

[mejiaj]

Component page and new page looks good. Small requests for indentation fixes.

Also questions on the use of snake case vs camel case, but this isn't a blocker for getting page published.

[mejiaj]

Approving, but there seem to be new HTMLProofer errors.

For the Links > External check, the following failures were found:

* At ./_site/next/introduction/index.html:429:

  External link https://www.pewresearch.org/politics/2020/09/14/americans-views-of-government-low-trust-but-some-positive-performance-ratings/ failed (status code 404)

* At ./_site/patterns/create-a-user-profile/race-and-ethnicity/index.html:3150:

  External link https://www.pewresearch.org/fact-tank/2022/09/15/who-is-hispanic/ failed (status code 404)


HTML-Proofer found 2 failures!

Exited with code exit status 1

Source →

[amyleadem]

@mejiaj

Thanks for flagging that error. Based on some quick googling, it looks like the site flagged in HTML-proofer should probably be live. The Pew Research center just tweeted a link to the now-broken site an hour ago. I'm guessing it is an unexpected outage.

[mahoneycm]

PR and site looks great! Just two questions about potentially updating the process doc and checklist spreadsheet 👍

[mahoneycm]

I like the addition of "component here" as well. I went ahead and added it to the process doc for this section.

It looks like other accessibility test pages just say the component name here. Should we include this change in #2581 since all of the accessibility test pages are changed there?

ex:

uswds-site/_components/button/accessibility-tests.md

Line 8 in 491041d

lead: Any USWDS button should pass these manual accessibility tests.

[thisisdano]

Updating changelog dates...

[thisisdano]

Merging over pa11y crash