FE: "Get updates from <system>" links should open in a new tab

[JayDarnell]

Describe the defect

On each VAMC System page, on the front end, there is a block with the heading Get updates from (Example: Get updates from Lovell Federal TRICARE health care) The links in this block all open in a new tab.

To Reproduce

1. Visit https://www.va.gov/sheridan-health-care/
2. Scroll down to the bottom of the page
3. Click any of the links in the Get updates from VA Sheridan health care block
4. Notice how all the links open new tabs

AC / Expected behavior

• All external links in the "Get updates from " that are not otherwise affected by the "external" exception list should Always have target="_blank", Always have `rel="noreferrer"
• Accessibility review

Screenshots

CMS Team

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

• Program
• Platform CMS Team
• Sitewide Crew
• ⭐️ Sitewide CMS
• ⭐️ Public Websites
• ⭐️ Facilities
• ⭐️ User support

[briandeconinck]

This issue was identified during the Collaboration Cycle Staging Review for Lovell VAMC on 2/28/2023. Applicable Collaboration Cycle labels have been added to this ticket for tracking and dashboard purposes, rather than creating a duplicate ticket.

[jilladams]

From refinement: need to confirm if non-VA links (FB, twitter, email sub links) are required to open in same tab per Federal guidance / a11y style & content guidelines. @laflannery to confirm.

Next steps:

• If all links are required in same tab: make that change
• If not: ACs should be:
  • VA link opens in same tab
  • Other links: add a11y notice for screen readers that new tab is opening.

Team discussed whether an interstitial "you are leaving the site" warning might be necessary. This is a bigger design system question that would apply to many links throughout the site, so is not in scope here.

[jilladams]

https://design.va.gov/components/link/#behavior

Open in the same window except in certain instances. Links should only open in a new tab if clicking the link will result in the user losing progress or data. Otherwise, links should open in the same window.

[laflannery]

Thank you @jilladams I knew I had found this somewhere!!

@kmariepat-cityfriends based on the VA guidance above the ticket description is accurate - all of the links in the "Get updates" section should be updated to open in the same tab.

[kmariepat-cityfriends]

Rolling into Sprint 87 to confirm the reason for the domain overide and ensure the approach outlined in this card is the preferred approach

@ryguyk to take lead on reconciling the compliance issue and governance concerns

[jilladams]

Pinged Dave Conlon in Slack to see if he has history / context on the governance conflict between the Design System guidance (open in same tab unless user will lose context) vs. the list of subdomains that are set to open in a new tab (identified here, and comes from here in the code: https://github.com/department-of-veterans-affairs/content-build/blob/main/src/site/stages/build/plugins/modify-dom/update-external-links.js#L2

[jilladams]

As far as backstory, the history of the relevant file here starts with a memory consumption fix, department-of-veterans-affairs/content-build@29bfb33. The related id, 15601, doesn't link back to a relevant Team ticket, PR, or CMS ticket/PR, so not sure what that's pointing to overall. (Combed through merged content-build PRs from Jan 2021 - May 2021, and don't see any that contain this commit. 🤷‍♀️ Looks like this era was when we split content-build and vets-website and there was a lot of build optimizing going on. Suspect it was part of that effort.)

[jilladams]

Current state of affairs: https://dsva.slack.com/archives/CBU0KDSB1/p1687446025748509?thread_ts=1687371270.904739&cid=CBU0KDSB1

Design system: Acked the tech issue re: subdomains and said (Alex Taker) that they'd ticket a docs update to reflect that.
Platform: Hasn't yet clarified the nature of the subdomains list and if it might go away. So: we need to keep it until we're informed otherwise.

In our changes, then, Ryan's notes from Slack stand:

• What is an "external" link:
  • https://github.com/department-of-veterans-affairs/content-build/blob/main/src/site/stages/build/plugins/modify-dom/update-external-links.js#L55 dictates: everything that isn't va.gov / vets.gov opens in a new tab. These are external.
  • https://github.com/department-of-veterans-affairs/content-build/blob/main/src/site/stages/build/plugins/modify-dom/update-external-links.js#L2 additionally says: some subdomains that are va. gov will also open in a new tab. These are also effectively external.
• target="_blank" will be added to "external links", and those will open in a new tab
• This is in conflict with the DS notes re: same tab / new tab, but: DS is aware and owns fixing that in docs.

@ryguyk @laflannery I think we can go ahead to code review then, of Max's PR.

[laflannery]

@jilladams I tried to review the PR you linked above but it wouldn't load - I don't know if it was because it was from a couple weeks ago and needs a new review instance?

[jilladams]

6/29/23 update: talked to Ryan, clarified the logic for what's an "external" link in bullets in my last comment above.

For all of the URLs in Max's PR: he's overriding the Platform logic that establishes what is an external link, that the Design System and Platform team have signed off on in our support thread. So: this becomes effectively a no-op, that we can't change until the Design System and Platform team get aligned on an alternate approach.

Under the hood: we should remove target="_blank" and in general: not try to specify that, in deference to the underlying rules and the design system.

@laflannery fyi. Closing this.

FYI @kmariepat-cityfriends

[jilladams]

We got updated guidance from Design system today: https://dsva.slack.com/archives/CBU0KDSB1/p1690487173146249?thread_ts=1687371270.904739&cid=CBU0KDSB1

we would like to change this logic and enforce the rule of a link opening in the same window & tab and make teams have to explicitly open any link in a different tab if it fits the exception criteria that we already have
"Open in the same window except in certain instances. Links should only open in a new tab if clicking the link will result in the user losing progress or data. Otherwise, links should open in the same window."
The sub-domain logic should stand. That said, that list of sub-domains predates both Danielle and I so we're not sure what criteria were used to create it nor how up-to-date it is. But we'll manage that at some point. For now no change to that list is needed.
External links should have rel="noreferrer" added per USWDS guidance. But we should drop the target="_blank".

So for this ticket:

• removing target="_blank" is already done and correct
• we now need to add rel="noreferrer"
  Reopening ticket to make it easy to find the history of what happened here, and let's track the newest change here.

[laflannery]

@jilladams I somehow get very lost here, could you clarify for me?

• I see that in the code you all removed the target="_blank" on all the links
• However on the front end on all the the external links (4 of the 5) this is being added back - which I believe is because of some JavaScript that is forcing this?
• All the discussion seems to be around clarifying VA subdomain behavior. Did we get a clear answer yet on what to do with external domains? Are we able to remove this forced behavior from external, non-VA domains?

[jilladams]

Yes, legitimately confusing.

So: the flow on this is (as far as I understand it):

• If a link doesn't use va.gov / vets.gov, OR if it's in the subdomain list, the existing logic will consider it "external."
  • @humancompanion-usds has said: this treatment should stand, and DS will work on figuring out what to do about it long term, as well as document the nuances here in https://design.va.gov/components/link/#behavior.
• For now: teams should not be explicitly forcing a new tab (target="_blank"), unless we're interrupting a flow. Teams should be adding rel="noreferrer".

With all of that said: you're right that we can set up our code correctly with no target="_blank" and using rel="noreferrer", and that may then get overwritten by the big blast logic that is rewriting for anything that is not va.gov / vets.gov. I believe I understand that this bigger change needs more input from Matt Dingee / Content team before we modify it. So what we're doing on this ticket is setting up our files such that if the big blast logic changes, our templates will be behaving correctly.

[laflannery]

@jilladams We have a final decision on external links and new guidance is added to the Design system. Rules are as follows for external links:

1. Always have target="_blank"
2. Always have `rel="noreferrer"
3. The link text should be very clear and indicative of where it's going, so the user can understand that they are going to a new site

For 1 I think there might be some JS happening somewhere? Because I can see that the target attribute has been removed from the original code however then on the front end it's back again, so something is happening in the middle to add this back. That being said, do we need to add this to our links?

For 3, if the text of these links need to change, I would consider this out of the scope of this ticket and something were the content team may need to get involved. So for now, for this ticket, I think we should be considering 1 & 2 only and then we can close this.

[jilladams]

From refinement:

1. We will put target blank back
2. noreferrer is already present but is now clear in the ACs
3. we will not tackle the text update right now. Laura to follow up on that with the content team.

[CherylEvans]

This ticket was recreated in va.gov-team # 64835

[laflannery]

Removing CC labels because ticket was recreated

[xiongjaneg]

@xiongjaneg To find YouTube ticket as partner tickets for next sprint

[eselkin]

Question about the To Reproduce step:
All links EXCEPT the VA Sheridan health care operating status link open in new tabs.
ALL links already have attribute rel=noreferrer
(not an AC All links EXCEPT VA Sheridan health care operating status have attribute rel=noopener)

Are we saying in this ticket that we want to remove the VA Sheridan health care operating status from opening in a new tab? It already opens in the same tab because it's in the same domain.

Or, are we saying we want all links from this section that do open new tabs to replace each other in that same new tab?

Multiple comments are using "same" for different reasons, I think.

[laflannery]

@eselkin Ya this is confusing because of how complicated this got and how much back and forth. Let's see if I can make this clear:

1. VA Sheridan health care operating status
   1. Should open in the same tab
   2. Should NOT have target="_blank"
   3. Should NOT have rel="noreferrer"
2. All other links within the "Get Updates" section
   1. Should open in a NEW tab
   2. Should have target="_blank" attribute
   3. Should have rel="noreferrer" attribute

Regarding the rel=noopener attribute you asked about, I don't know about this because it is not mentioned anywhere in the guidance, I have never heard anyone talk about this. However, I did a very brief search and I found that we probably don't need this anywhere because implicitly I think it's the same as target="_blank" (I think?). I got this from the blue box on the MDN article here. If I'm reading that right, I think we can remove rel=noopener from everywhere.

[eselkin]

So basically, the only change is removing rel=noreferrer from the VA link in that section.

And, right, noopener is antiquated because of how _blank now works on most browsers (I wouldn't remove it, just to be certain of backward compatibility).

[jilladams]

Working on sprint report so went ahead and verified: all external domains open in a new tab, Operating status points to VA.gov and opens in same tab. Closing!