USWDS-Site - a11y: publish breadcrumb checklist

[cathybaptista]

Summary

Added accessibility tests page for the breadcrumb component to inform users of accessibility test results.

Important

We need to update the changelog dates before merge.

Related issue

Closes #2854

Changelog

Preview link

Preview link:
Link to breadcrumb accessibility test page

Problem statement

Users need an clear and consistent way to check results of accessibility tests run on USWDS components.

Solution

This page provides user with accessibility test results run on the breadcrumb component in a consistent format.

Major changes

n/a

Testing and review

Follow these steps:

• Confirm that both the main component page and the accessibility tests page have the correct compliance tag at the top.
• Confirm that the main component page links to the accessibility tests page in the side navigation.
• Confirm that the main component page links to the accessibility tests page from the accessibility guidance section.
• Confirm that the main component page shows the accessibility tests summary.
• Check that accessibility tests page provides the correct counts for each test status type.
• Confirm the test checklist summaries and data are accurate.
• Confirm no visual issues.
• Confirm there is an appropriate changelog entry on both the main component page and the accessibility tests page.
• 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 main).
• Run npm run prettier:scss to format any Sass updates.
• Run npm test and confirm that all tests pass.
• Run your code through HTML_CodeSniffer and make sure it’s error free.

[amycole501]

I think the current wording is mostly OK however there isn't and won't be a current page link, per se. The wording for whatever the current page is needs to be focusable and announced as "current" by a screen reader. But it won't be underlined nor look like a link.

Secondly, the "learn more" link is broken.

Possible alternate text (but am open to suggestion)
Breadcrumb component may not be fully interactive with a keyboard. The wording for the current page in the breadcrumb list may not be focusable with a keyboard nor recognizable as the current page using a screen reader. You will need to test on your own implementation. More information: USWDS #2818.

We have logged this issue and are prioritizing it. Learn more about this issue on GitHub.

[finekatie]

I thought I saw a typo in preview but I don't see it here in the code. All good except wondering what Amy or Alex think about the wording for one gherkin.

[finekatie]

Hey @amycole501 or @alex-hull , does this read well to you? I feel like it's a little confusing when I scan it. If I'm off, just accept and I'll move on :)

[amycole501]

It could be reworded to say "...the breadcrumb provides clarity on your location within the site."

[finekatie]

I like it @amycole501! Hey @cathybaptista who makes the change on this?

[cathybaptista]

Hi, @amycole501 and @finekatie! Apologies for the delay, these issues are fixed in b4c4c4b.

The only question I have is that I just want to verify that the "learn more" link is now going to the right place. :)

[mahoneycm]

Looking good! I left a couple questions for a11y and request for a necessary test status change.

Testing checklist

• Confirm that both the main component page and the accessibility tests page have the correct compliance tag at the top.
• Confirm that the main component page links to the accessibility tests page in the side navigation.
• Confirm that the main component page links to the accessibility tests page from the accessibility guidance section.
• Confirm that the main component page shows the accessibility tests summary.
• Check that accessibility tests page provides the correct counts for each test status type.
• Confirm the test checklist summaries and data are accurate.
  • 3.2.3 consistent navigation should be conditional
  • 2.4.8 also conditional?
    • 2.4.8 is more of a site wide option. Breadcrumb is the solution to this
    • Still, it relies on the user implementing this correctly
  • 4.1.2 - Refers to current page listing as a link (which it currently isn’t). Also uses refers to it as “Furthers to the right” which we might want to rephrase to final list item or something along those lines.
• Confirm no visual issues.
• Confirm there is an appropriate changelog entry on both the main component page and the accessibility tests page.

[mejiaj]

LGTM pending comments being resolved.

[mejiaj]

chore: Will need to add date before final merge.

[mejiaj]

chore: Will need to add date before final merge.

[mahoneycm]

All previous conflicts resolved, LGTM! Thanks @cathybaptista 👍

[mejiaj]

Approving since comments have been resolved. Ready for FFR.