[a11y-defect-3]: Your VA Payments breadcrumbs should add a current link instead of replacing the previous link

[1Copenut]

Point of contact

Trevor Pierce

Severity level

3, Moderate. Should be fixed in 1-3 sprints post-launch.

Details

The breadcrumb in the Your VA Payments view updates the link title and swaps out the previous current link instead of adding a third link. This was confusing because the breadcrumbs did not behave consistently when I tried to go back to the previous page. This could have an impact on screen reader, keyboard, and voice command users. Screen shots attached below.

---

---

Reproduction steps

1. Log into a test user account and navigate to the va-payment-history/ view
2. Click the "View your VA payments history" link
3. Observe the breadcrumb text updates but does not add a third breadcrumb
4. Also observe clicking the breadcrumb does not go backward to the previous page

Proposed solution or next steps

Ideally the breadcrumb list adds a third breadcrumb when users click "View your VA payments history" link. It would also be helpful if this page to view payments had a more descriptive heading that was dissimilar from the previous page, so the breadcrumb links could also be more distinct.

References, articles, or WCAG support

1. Understanding SC 2.4.4: Link Purpose (In Context) (Level A)

Type of issue

• Axe-core
• Screenreader | assistive tech & device support
• Keyboard
• Zoom
• Color, typography, & visual elements
• Components and pattern standards
• Content organization
• Focus
• Headings
• Content style guide
• Link and button labels
• Semantic HTML
• Markup and metadata
• Non-text content and media
• Overall user experience
• Cognitive | user flows & navigating
• URL standards
• Something else

[dysbo]

Refinement notes:

• Need to discuss with content folks (@jstrothman, @rallencf, others?) about making the text change outlined above
• Breadcrumbs appear to live in the content-build repository; see if we can find documentation on how those are constructed

[dysbo]

@rallencf to meet with CAIA to discuss and determine next steps.

[rallencf]

@1Copenut @dysbo @jstrothman I found another breadcrumb issue. From the "Download VA benefit letters page" (in staging) if you click on "Get your VA benefits" the breadcrumb properly adds the next page to the breadcrumb trail, but the text in link 2 of the breadcrumb trail changes from "Records" to "VA records" and then links to a different records page not found in the original navigation path.

[rallencf]

Requested a brief chat with CAIA in slack to get their input. I also wonder if breadcrumb issues are a broader issue than these couple of pages.

[jstrothman]

@1Copenut @dysbo @jstrothman I found another breadcrumb issue. From the "Download VA benefit letters page" (in staging) if you click on "Get your VA benefits" the breadcrumb properly adds the next page to the breadcrumb trail, but the text in link 2 of the breadcrumb trail changes from "Records" to "VA records" and then links to a different records page not found in the original navigation path.

@rallencf Great that you found this--I think it could use a separate GH issue

[dysbo]

Thanks @rallencf for finding that other breadcrumb issue - let's create a separate GH issue for that one. I believe @1Copenut is looking at that page in #95086 (correct me if I'm wrong) so he may have already started one. Julie beat me to this haha

[rallencf]

I scheduled a chat with CAIA for Thursday to discuss both breadcrumb issues.

@1Copenut Left a comment for you in #95086 asking if you'd like to include my new finding in your VA Benefit Letters audit, or if I should create a separate ticket.

[rallencf]

Met with CAIA and @1Copenut to review breadcrumb issues. We're all in agreement about the desired content and functionality. CAIA is close to publishing breadcrumb guidance in the design system that we'll reference for updating the issues in this ticket.

[dysbo]

We will wait for the guidance on breadcrumbs to be finalized and published before we action on this to avoid rework.

[salihaghaffar]

@rallencf @1Copenut @dysbo tagging you guys to put a reminder for a follow up on the above.

[dysbo]

Thanks to @rallencf and @1Copenut for helping me find these links 😄

Breadcrumb guidance has been updated, seen on the VA Design System site here.

Per the guidance, we should look into updating the breadcrumbs on the Your VA Payments page to display

VA.gov home > View your VA payment history > Your VA payments

Additional discussion in this ticket involve potentially updating the title of the Your VA payments page to differentiate it better from the previous page. I would like @rallencf's input on that piece of it before we move on changing any of the page titles.

Also note: it is likely that we will have to make these changes outside of the vets-website repo and may need to familiarize with another build/approval process for breadcrumb updates, as I believe they are part of the site-wide static content build rather than the React code we typically work in.

Edit to include the PR for the updates to the breadcrumb guidance so I can find it again later 😅