Update Other nearby locations directions link with sr-only solution

[laflannery]

Description

This is related to #13837 and #12085

The Directions links should include text for screen readers to specifically indicate which location the link is providing directions for. Screen reader users may navigate pages by only focusable items, which means they only hear "link Directions (Google Maps)" without the surrounding context.

Ideally all the directions links through the site should be implemented in the same way, so that this is consistent and users can expect the same experience whenever they encounter a directions link.

• Visually the link text should be "Get directions on Google Maps" as this is more clear and also consistent with what is being used in the Facility Locator.
• It would then include screen reader only text class="sr-only" that would include the title of the specific location that would make these unique links.
  This would include the directions link for locations under "Other nearby locations" also.

Steps to Recreate

1. Go to a VAMC Locations page, or Vet Center Locations page
2. Scroll down to the Other nearby locations section
3. Notice that the directions links for these locations do not follow the pattern indicated in the description.

Acceptance Criteria

• The directions links should be programmatically unique and provide information as to the location the directions pertain using the sr-only pattern
• All links should open in a new tab with target="_blank"
• All directions links should also have noreferrer attribute
• All directions links visually say "Get Directions on Google Maps"
• Accessibility review

Possible Fixes (optional)

Add screen reader only text:
<a href="#">Get directions on Google Maps <span class="sr-only">to Erie Health Care Medical Center</span></a>

This is already done on the Facility Locator search results Directions links for reference and in the 2 tickets mention in the Description

WCAG or Vendor Guidance (optional)

• Ensure that links with the same accessible name serve a similar purpose
• Link purpose (in context)

Screenshots

[mmiddaugh]

May make sense to do at the same time as "Other nearby VA locations" list on VAMC page #13896

[eselkin]

This is still open because the builds keep failing on required steps (e.g. it'll build on dev and prod but not staging and have to be rebuilt, or it'll run tests then one test will timeout waiting for a runner and then need to be restarted and then a subsequent test will do the same). So many hours of instability.

EDIT: Finally enough re-running of tests passed. Merged.

[jilladams]

Verified the sr-only appears correctly,

screenshots:


One missing piece: Not all directions links include noreferrer. I'm pretty sure the spirit of the AC is for Google links on Locations page to be treated the same, so I do think we should clean this up if that's easy to do, before call it done here. Notes:

https://www.va.gov/north-florida-health-care/locations/
Main: 🔴 does not
Health clinic: 🔴 does not
Other nearby: 🟢 does

https://www.va.gov/ocala-vet-center/locations/
Main: 🔴 does not
Satellite: 🔴 does not
Other nearby: 🟢 does

[eselkin]

They are separate areas managed by other components. Only the ones in other nearby were supposed to be updated here. I can modify the ticket if needed to list all areas, but those aren't the only google driving directions either, I think.

[jilladams]

@laflannery can confirm -- I'm ok breaking the missing noreferrers into a separate ticket since they're separate components if we need to.

[laflannery]

@jilladams You are correct that this ticket was supposed to get everything all nicely cleaned up and it has from a strictly accessibility standpoint. However noreferrers is another request for external links that was added with the updated external links guidance - it is not an accessibility request but rather just a general thing Platform would like external links to have now. This guidance didn't happened until after the previous tickets (#13837 & #12085) were completed which is why those are now behind.

That being said - I think it's your call whether we:

1. Expand the scope of this ticket to go backwards and add the noreferrer to those previous directions links or
2. Make a new backlog ticket to add noreferrer to the previous directions links

[jilladams]

Ok. That in mind, closing this ticket as complete in prod for Other nearby locations, and have created #15670 as a blanket ticket to mop up whatever has been left behind in our products / Google links.

[eselkin]

Putting a note here and there where to find the main facility listing & satellite listings google directions links (they are in content-build in src/site/includes/directions-google-maps.liquid not in vets-website like these were).