Indicate whether a link is external

[smikitky]

Related: #1605

React docs have lots of links to external articles, videos or even Stack Overflow questions. For example, the "Hello World" page has this:

Note This guide occasionally uses some of the newer JavaScript syntax in the examples. If you haven’t worked with JavaScript in the last few years, these three points should get you most of the way.

While this link is helpful to English speakers, it can easily disappoint readers of translated versions because many of them do not understand English well.

This can be especially unfriendly when they cannot reasonably guess whether the linked material is in English or not from its text or the context ("these points", "here", "said", "ES6 class", "weird bug" etc). Unfortunately, the current docs are full of instances like this.

In the long run, we can reduce the number of such confusing links, for example:

Note This guide occasionally uses some of the newer JavaScript syntax in the examples. If you haven’t worked with JavaScript in the last few years, the following article should get you most of the way.

• Modern JavaScript in React Documentation

But for the time being, I suggest indicating external links using an icon (e.g., 🌎) or a different color. It can signal the linked article is likely to be written in English. Maybe links to an MDN article can have a different icon because it usually has a translated version.

[gaearon]

Intersting. Maybe a small arrow? I’ve seen that used on some sites although I forget which.

[smikitky]

A good example is Wikipedia :)

[AlmeroSteyn]

Some accessibility suggestions:

1. Please use an icon and not only a different colour.
2. Place the icon it inside the links ( <a> ) and not outside.
3. Give the icon an alternative text (with the alt attribute saying something like "External page").

This will ensure that screen reader users and colour blind folk can also enjoy this awesome addition.

Reference from WebAIM: https://webaim.org/techniques/hypertext/hypertext_links#new_window

[tesseralis]

In addition to what @AlmeroSteyn said, the style of putting links in text ("these points", "here", "weird bug") can also be annoying for screenreader users. In the example above a screenreader would read it as:

Note This guide occasionally uses some of the newer JavaScript syntax in the examples. If you haven’t worked with JavaScript in the last few years,
[next]
these three points, link
[next]
should get you most of the way.

I think it would be a good idea as well to think about minimizing the use of internal text links like this, as @smikitky suggested.

Adding an icon shouldn't be that hard; I think we already put external links through a preprocessor.