Some breadcrumbs aren't following established IA pattern

[laflannery]

Description

On some top level pages, the breadcrumbs are not following the established IA pattern, from Platform. There is just a single breadcrumb for "Home" when the proper pattern should be "Home > {currentPage}".

I also noticed that these pages are not using the <va-breadcrumbs> component. If these pages are able to use the component, it might be a good idea to update to this as well.

Examples

• New Harassment page
• Accessibility page
• Supporting forms page

Additional info

I was following up on older accessibility issues for the Harassment page trying to close them and realized that the issues still existed and applied to more pages. The tickets I was following up on, which state that this is the pattern that should be followed are:

• [Components and pattern standards] The components of the navigation system (i.e. URL, breadcrumb, left nav) within your content or feature don't accurately and/or consistently represent the location of the page within the IA. (04.01.2) va.gov-team#30428
• [Components and pattern standards] The components of the navigation system (i.e. URL, breadcrumb, left nav) within your content or feature don't accurately and/or consistently represent the location of the page within the IA. (04.01.1) va.gov-team#30429

I also found a related issue when the Resources and Support section was being built:

• Learning Center - Home - Breadcrumbs don't match design prototype va.gov-team#15559

Acceptance Criteria

• All pages have breadcrumbs that follow the established IA pattern
• Pages use the breadcrumb component if possible
• Accessibility Review
• Design Review

Team

Please check the team(s) that will do this work.

• CMS Team
• Public Websites
• Facilities
• User support
• Accelerated Publishing

[jilladams]

Noting: this week, content build got broken and created 1900 broken links due to a breadcrumb related issue, where some URLs are reverse engineered based on the breadcrumb. Tim and Steve know more about this, so we keep it in mind if/when we pick this up. There will be a retro and a postmortem we can read.

[randimays]

@laflannery Are we able to get as comprehensive a list as possible of the pages that don't have the appropriate breadcrumbs? Breadcrumbs have a few different ways of being created:

• Using breadcrumbs liquid template, deriving their details from the URL
• Using breadcrumbs "automagically" created through content-build's application registry (pure React app)
• Using a custom breadcrumbs implementation in vets-website

It would be helpful to add as many pages as possible so we can confidently call this done when that time comes.

[laflannery]

@randimays Do you know if the 3 ways you have noted above of breadcrumbs bring created are specific to content types and/or FE templates?

For example, the 3 example pages I have in the description are all Benefits Detail pages - do these all generate breadcrumbs in the same way? And if so what why would that be?

And a follow up question - if I were to find examples of other content types (i.e. Vet Center pages, VAMC Detail pages, etc.) do you know if each of those templates all generate breadcrumbs in the same way as well? Or is there a possibility that 2 pages of the same content type could generate breadcrumbs in different ways?

[randimays]

@laflannery The first way in the list is specific to content-build templates (not necessarily content types because each of these Benefit Detail pages uses the page.drupal.liquid template and I'm not sure what else uses that). The other two are for partially-React or full React applications. I guess my question is - do we know if this problem also exists in React apps, or is it only CMS-driven pages?

[laflannery]

I think this is just a CMS-driven issue. I've found quite a few forms (which is my only guess at react things?) that do not have this issue. Mostly I've been looking at forms on the Supplemental forms page. The discharge wizard also does not have the issue.

So with that, I'm thinking it's just a CMS issue

[randimays]

👍 Thanks for the clarification!

[laflannery]

I believe this Slack question has to do with this ticket: https://dsva.slack.com/archives/CDHBKAL9W/p1696603359744219

[jilladams]

Agree

[jilladams]

Also: turns out there's an epic: #5677 . Add this to it.

[jilladams]

@laflannery Noting: The 3 examples mentioned in the ticket body are resolved in prod. All show Home > Title in the crumbs. I suspect that was resolved by the AP recent work that established patterns for breadcrumbs for all CMS content, including cases where the FE used to be reverse engineering the breadcrumbs. Not sure if we want to keep this open for bigger eval of other pages where it may still be a problem?

[laflannery]

@jilladams From reading the related slack thread, I believe this was "solved" because Randi and other content folks went into the CMS and manually changed menu options. However, also from that thread there were some other questions and points that were raised regarding breadcrumbs. Has everything from that thread been addressed - it wasn't completely clear to me.

It might be a good idea to update this ticket to be more generalized OR close this ticket entirely because technically it is solved as you mentioned but open a more general ticket for any lingering questions.

[jilladams]

@randimays a clarification for modern times. Above in thread you'd said:

Breadcrumbs have a few different ways of being created:

1. Using breadcrumbs liquid template, deriving their details from the URL
2. Using breadcrumbs "automagically" created through content-build's application registry (pure React app)
3. Using a custom breadcrumbs implementation in vets-website

That was before the recent AP work. We know now that:

• Breadcrumbs for Drupal pages share a single breadcrumbs template.
  • Some templates use the Drupal breadcrumbs data as-is, but others have overrides that replace most data from Drupal (they all still have a Home link).
• In general, Pages with no left nav: H1 is the final crumb
• Pages with a left nav: Nav item provides the final crumb

So I think it's now true that #1 in your original list no longer applies, bc AP got rid of that pieces, and it all looks more like this today:

• Drupal pages:
  • • In general, Pages with no left nav: H1 is the final crumb
  • Pages with a left nav: Nav item provides the final crumb
  • Exceptions / overrides: https://github.com/department-of-veterans-affairs/content-build/blob/6c82218da1661c090d2883b26f40cf18e173ff98/src/applications/registry.json#L36

• Non-drupal pages:
  • Use a custom breadcrumbs implementation in vets-website (custom, V1, or V3 web component)

I'm not certain about the state of #2, Using breadcrumbs "automagically" created through content-build's application registry (pure React app). If that's easy to answer, I'd love to hear. If not, we can rat hole on it some time when you have time.

[humancompanion-usds]

@jilladams and @randimays - While working on this issue around breadcrumb guidance (thank you for filling it) I followed the thread in here and in Slack. Thus I had Micah dig into why the Veteran-facing Forms we've recently shipped were not using a web-component for breadcrumbs. Here is what he discovered:

If an application in the content-build registry.json file includes breadcrumbs, then it'll use the liquid template provided in content-build found here.

Of the 109 application entries in that registry file, there are 47 applications explicitly setting includeBreadcrumbs: true and 5 which set that property to false. So a little under 50% look to be using the aforementioned liquid template.

All instances that don't have the includeBreadcrumbs flag, or set it to false, are likely using a web component to manage their breadcrumbs.

Thus the Design System Team now has an issue to update the liquid template to use va-breadcrumb. We'll prioritize that into an upcoming sprint to be worked on hopefully this month or at the latest April.

[jilladams]

Interesting. This is many wires coming together and crossing in various ways as a result of our Sitewide PW / Facilities teams working to get custom code migrated to use V3 components, before the typography deadline. Currently, we'd asked Facilities FE engineers to assess our custom breadcrumb implementations in the liquid template, and prepare the way to adopt the component. That would apply to Facilities and Public Websites products that use the current liquid template, but it's a good call out that it may affect even more products if not all 57 custom-code applications belong to us.

Thus: would love to let the Design System team run with solving this problem, if that works for our teams. @mmiddaugh @davidconlon any objections? (cc @xiongjaneg @FranECross)

[laflannery]

@jilladams This was discussed in this Slack thread between @xiongjaneg and Matt because of the confusion and duplication. The decision was that Facilities would still own it but Matt noted 2 folks to be added as PR reviewers.

[jilladams]

Ah, thank you. Many wires.