Update VAMC Health Services template with components (v3)

[laflannery]

Description

VAMC Health Service pages need the following updates to components:

Example pages:

• VAMC Boston Health Services
• VAMC Minneapolis health Services

List of Components

V1 components that need to be upgraded (Actionable)

1. Accordion
   • Accordion sections (Prepare for your visit and services) are using the v1 component and need to be updated to v3.

Not in scope

• VAMC Health Services template: adopt V1 & v3 components (incl spotlights) where components aren't used #17657

Acceptance Criteria

• Accordion component has been updated to v3
• Update and run existing test(s).
• If additional tests are needed, stub a ticket to note this for future work.
• Presentation is verified the same across all supported browsers on Mac & Win
  • Chrome
  • Firefox
  • Safari
  • Edge
  • Android
  • iOS
• Requires accessibility review

[maxx1128]

I estimate this ticket at a 3 for moving over a good amount of relatively simple elements over to components.

[jilladams]

TO DO: @jilladams split out V1 work to new ticket

[eselkin]

Do we have a ticket for the "In the Spotlight" boxes (which will eventually move to Cards) to change the links to <va-link active> links? There are slight font-weight changes since <va-link> in the active state are larger weight, but they improve in the highlighting and focus and remove icons.

[jilladams]

Due to #17807 popping up, where adoption of components ran into some browser-specific styling issues, I've added ACs here to cover cross-browser verification.

[jilladams]

@eselkin No: we haven't ticketed the build updates to in the spotlight. I added your note to a comment on the epic where i"m tracking the next ticketing work we need to get done: #15931 (comment)

And just checking: we wouldn't make the va-active-link update now because it's out of line with the rest of the current spotlight treatment?

[laflannery]

@jilladams and @eselkin We are able to move forward on updating the spotlights to use the card component, it's ticketed in the "not in scope" ticket from the description above along with the other imposter/non-component work which we are currently de-prioritizing. The work Jill noted isn't blocking the FE work to update to the card component.

Also, regarding the link update Eli mentioned, I purposefully didn't have this in either ticket (this or the other) because the work on spotlights will be updating to the Action link VADS class.

Let me know if that helps answer questions/clarify

[laflannery]

Screenshots from Eli's PR for ACs:

FF Windows

Edge (I didn't put the fancy bookmarklet on Edge but confirmed these are the v3 variant)

Chrome Windows

FF Mac

Chrome Mac

Safari

Mobile

[jilladams]

After discussing with Laura:

• Because phones can't access SOCKS, we can't verify on Tugboat or Review Instances using actual phones.
• We can verify using:
  • ngrok
  • desktop browser set to a mobile / tablet breakpoint, using something like user-agent switcher extension

We don't think it's the best use of our engineering time to stand up ngrok for all of these, so if we've verified using emulator / dev tools, that's ok for merge and we can prod verify on phones.

@laflannery: lemme know if I misstated any of that discussion.
@eselkin (and @maxx1128 ) lemme know if you have any questions about that.

cc @mmiddaugh for awareness

[eselkin]

Yeah. I recommend mobile breakpoints on developer tools of web browsers.

[laflannery]

Based on the comments regarding mobile testing I reviewed and updated my screenshots to include a mobile emulator image

[laflannery]

Confirmed on Prod: