Update VAMC top task buttons to make them action links

[xiongjaneg]

Description or Additional Context

Make VAMC top tasks vertical instead of horizontal for accessibility and Design System.

Currently, the existing top task buttons which are lined up horizontally may be using a component not consistent with the Design System or accessibility best practices.

This is also in prep for VBA MVP as shown in the following image. Private Zenhub Image

Steps for Implementation

• [ ] Identify current component.
• [ ] Make the top task links action links.

Acceptance Criteria

• [x] The top tasks links use the Design component for action links and meet accessibility best practices.
• [x] Accessibility Lead review

Follow up communication

• Update / close the tickets where this defect was logged:
  • [x] #11364
  • [x] [Components and pattern standards] Design components or patterns don't align with Design System guidelines. #64437

Team

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

• [ ] CMS Team
• [ ] Public Websites
• [x] Facilities
• [ ] User support
• [ ] Accelerated Publishing

[xiongjaneg]

Link to Design System action links https://design.va.gov/components/link/action

[davidmpickett]

Added some follow up tasks to close out the Collab Cycle tickets where this was logged as a defect

[eselkin]

Do we know what the margin between the links is? I'm venturing a guess that the middle link has a y-margin of 2 (vads-u-margin-y--2).

The following is with that margin:

Also, this button set appears in 2 separate files, are we fixing both: src/site/facilities/facilities_health_services_buttons.drupal.liquid and src/site/facilities/main_buttons.drupal.liquid It seems like we should but the defect ticket had the health service locations but not the main location buttons, but they are the same issue.

An example for the facility button/links is in: https://va.gov/boston-health-care/locations/brockton-va-medical-center/

An example for the main buttons is in: https://va.gov/boston-health-care/locations/

on main locations it changes:

original	new

The 508-defect-3 says they should open in new tabs, but none of the "buttons" currently do this. Should we do the "_blank" target for these links @xiongjaneg @laflannery?

[laflannery]

@eselkin Answers below:

1. Yes I think we should change both locations to now be the actions links. @xiongjaneg and @mmiddaugh should probably confirm though
2. I'm not seeing where any of the tickets/ACs are asking for these to open in a new tab. However, none of them should. All these new actions links should open in the same tab because they are all internal VA links.

[mmiddaugh]

Thank you for identifying this opportunity, @eselkin Will this also cover the top task buttons on [Health services]https://www.va.gov/boston-health-care/health-services/) pages? (same button style and functionality - just different endpoints for 1 of the 3)

[eselkin]

Yes, the Health Services page is also covered @mmiddaugh

[eselkin]

This is in QA now, @laflannery has reviewed and approved.

[laflannery]

@eselkin I'm not seeing this on Prod - is this just because it hasn't gotten there yet?

[xiongjaneg]

@eselkin I'm reopening this ticket. Would you please check the ACs that you've completed so far? Also there are some ACs under the Follow Up Communication heading in the ticket body. Would you please check those off as you complete them?

If you need help with those, please let me know. Thank you!

[eselkin]

Not sure why it said I closed this, all I did was merge it. It had remained unmerged because of a change Max wanted. Then that was fixed.

[eselkin]

On prod now: https://www.va.gov/greater-los-angeles-health-care/locations/los-angeles-va-clinic/

[xiongjaneg]

Laura reviewed as part of #11364 so marking those ACs done and closing