Determine guidelines for using links with icons and new tab behavior

[stephiescastle]

We should come up with a policy on links to external sites and links that open in a new tab, and how both of these cases should be made clear to the user. We currently do not have a set policy, which has led to mixed design language.

What does the "external site" icon mean? Currently, it has mixed meanings:

• external site
• will open in a new tab

This means a link that opens in a new tab but links to an internal page would have the icon.
This also means a link to an external site that opens in the same window would have the icon.

Scenarios to consider:

• link to external site that opens in a new tab
• link to external site that opens in the same tab
• link to internal page that opens in a new tab

This gets more complex for links that already have specific styling:

• Primary style for BaseLink has a animated caret. If we implement a policy where an external site icon needs to be used, what do we do in this case?
• Secondary style for Baselink. There may need to be some styling finesse for icons paired with bold all-caps text.
• ArticleCarousel and TopicsCarousel: both have arrows that appear on hover. Do they also need an icon of some sort if they will open in a new tab?

[stephiescastle]

Preferred solution just discussed with @kaelynrichards and @Scotchester:

• Generally, no links will open in a new tab or window, even if it's a link to an external site
• Possible exception: if the user is entering data in a form, and it seems likely the user will need to click on certain links while entering data

I do think it's helpful for users to know if they're clicking on a link that goes to an external site, so they can better decide how to click on the link. But should showing an icon if it's an external link or a document download always be a requirement? I bring this up as it may have implications on existing components. Some examples:

• Article Carousel: sometimes the items in the carousel can link to external sites, but we currently don't have a design solution for including the "external link" icon in the carousel item
• WWW homepage Carousel: same issue as above: sometimes the carousel items link to an external site, but there is no design solution to signify an external link

[Scotchester]

Collected resources on opening links in a new tab, roughly in order of reputation/authority:

• https://www.nngroup.com/articles/new-browser-windows-and-tabs/
• https://www.nngroup.com/articles/top-10-mistakes-web-design/ (no. 9)
• https://www.nngroup.com/articles/the-top-ten-web-design-mistakes-of-1999/ (no. 2)
• https://www.w3.org/TR/WCAG20-TECHS/G200.html
• https://css-tricks.com/use-target_blank/
• https://design-system.service.gov.uk/styles/typography/#opening-links-in-a-new-tab
• https://webaim.org/techniques/hypertext/hypertext_links#new_window
• https://it.wisc.edu/accessible-content-tech/develop-accessible-websites/when-to-open-links-in-a-new-tab/
• https://diversity.wustl.edu/framework/advisory-best-practice-groups/website-accessibility/links-opening-new-tabs/
• https://www.tempertemper.net/blog/opening-links-in-a-new-tab-or-window-is-better-avoided
• https://medium.com/the-metric/links-should-open-in-the-same-window-447da3ae59ba