Gutenberg: Links that open in a new tab/window need to inform users a new tab/window will open

[afercia]

There are some cases where links use target="_blank". For example:

current link html:
<a href="https://codex.wordpress.org/Excerpt" target="_blank">Learn more about manual excerpts</a>

In all these cases, the link should inform users a new tab/window will open;

• for accessibility: some visually hidden text in the link text would be ok; core recently standardized to always use (opens in a new window), see https://core.trac.wordpress.org/changeset/40643
• visually: I'll suggest to consider to use some visual indicator too, it's also a usability thing but this is definitely up to designers :)

See also: https://core.trac.wordpress.org/query?keywords=~target-blank

[aduth]

Could render an adjacent <Dashicon icon="external" /> to visually indicate external:

https://developer.wordpress.org/resource/dashicons/#external

Maybe even logic built-in to the link component to detect whether it should be shown by default based on target or "off-site" URL.

[afercia]

Could render an adjacent to visually indicate external:

Yes, something like that could help, however "external" doesn't exactly mean "new tab/window": it just means external site (as in opening an external site in the same window).

[mehigh]

I'm interested in working on this feature and improving the user experience with the addition of the external icon having an a11y label for the screen readers.

[mehigh]

Thank you @afercia and @aduth for the comments. They helped get this issue home quicker. PR created.

[swissspidy]

Most links in WordPress don't have target="_blank" though, including many links to the Codex.

[afercia]

Reopening because things have changed a bit and this issue still needs to be fully addressed.

On current master, there are a few occurrences of links that use a target="_blank" attribute. Worth reminding that _any_ link that opens a new tab / window needs to inform users about what is going to happen, to prevent an unexpected change of context.

Some of these links are:

• the Preview link
• the link in the block toolbar when editing a link
• the post permalink link

Edge cases:
the links in the Categories and Latest Posts blocks use target="_blank" in the editor, so they need a proper informative message and the rel attribute with proper values, but they open in the current tab / window when in the front-end.

There is now an ExternalLink component, used for example in the Excerpt component for the link to the Codex page, but it uses also an icon so I'm not sure it can be used for the cases listed above.

[karmatosed]

From a design perspective I don't mind adding this symbol:

If I am correct that's what is being asked for from design side?

[talldan]

I'll take a look at fixing this next.