[V1 & 3 Components] Implement available components for Resources & Support landing page

[FranECross]

Background

The Design team is releasing a Typography update (sometime in March), which means that the PW team needs to upgrade any of our products where components aren't currently being using, but a V1 or V3 component is available.

If the updates aren't made prior to the Typography update, there's a chance that Veteran-facing issues may occur.

The following have been identified by Laura Flannery:

Resources Landing Page

Elements that are not using components that should be

1. Breadcrumbs Covered by Spike: Breadcrumbs for content-build and impact of USWDS V3 component #17162
   - Not using any component but should be using v3
2. Link
   • We should be using the V1 component wherever we can
3. Search input
   • We should be using the v3
4. Radio buttons
   • There might be some technical limitations here, I'm not sure but if possible we should be using v3 components
5. Button
   • Show all topics button should use v3 component

Documentation

Sitewide V3 DS component review spreadsheet

User story

AS A PO/PM for Public Websites products
I WANT to implement available V1 or V3 components in features & products currently under Public Websites management where components aren't currently being used
SO THAT all PW products are in alignment with the current component version
AND Veterans and other users have a consistent experience throughout VA.gov tools and information

Engineering notes / background

Analytics considerations

Quality / testing notes

Acceptance criteria

• Breadcrumbs are using V3
• Link is using V1
• Search is using V3
• Radio button is using V3
• Buttons are using V3
• other features display correctly
• verify/review the E2E tests
• check desktop and mobile
• a11y review

[randimays]

@FranECross @jilladams Can I remove breadcrumbs from the scope of this ticket, given that we have #17162?

[jilladams]

Yep - we confirmed that yesterday live. Making the change here.

[randimays]

I am working on this one plus #17199. Struggling with pagination (from #17199) as the v3 component has elements in the shadow DOM, and we have to add a click handler to change the pages and can't access the shadow DOM elements. I have been communicating with Jami from the DST about it here: https://dsva.slack.com/archives/C01DBGX4P45/p1708967336736359 hopefully we can find a solution!

All other components have been completed, but we still need an accessibility review of everything once it's complete.

[randimays]

Update: The PR (department-of-veterans-affairs/vets-website#28236) is ready for review. It excludes any web component updates for <button>. There is a single <button> used for the expand/collapse behavior on mobile:

This does not need to be converted to a web component as it is stylistically very different from the web component. I have request an accessibility review that we can hopefully get on Monday when Laura returns from PTO.

[randimays]

Accessibility review is completed and the changes are verified in production. Closing!