Links that open in a new tab/window need to inform users a new tab/wi…

…ndow will open (#1577)

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

## Description
Fixes #1105 by adding the external dashicon and the standard screen
reader text too.

## How Has This Been Tested?
I checked that the Excerpt external link which makes use of the new
ExternalLink component contains the new icon and displays it correctly
in major OSX browsers (Safari, Chrome, Firefox).
I used the browser's inspector to confirm the screen-reader-text
element gets properly added as well.

## Screenshots:
![Updated
panel](http://files.urldocs.com/share/excerpt-block-updated/excerpt-bloc
k-updated.png)

## Types of changes
New feature (non-breaking change which adds functionality)

## Checklist:
- [x] My code is tested.
- [x] My code follows the WordPress code style.
- [x] My code follows has proper inline documentation. (Other as basic
components don't have inline documentation, just like this one)

* 1105 - Fix formatting

* 1105 - Changed the class name. Added translators: accessibility text comment

components/external-link/index.js

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { compact, uniq } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';
+
+/**
+ * Internal dependencies
+ */
+import Dashicon from '../dashicon';
+import './style.scss';
+
+function ExternalLink( { href, children, className, rel = '', ...additionalProps } ) {
+	rel = uniq( compact( [
+		...rel.split( ' ' ),
+		'external',
+		'noreferrer',
+		'noopener',
+	] ) ).join( ' ' );
+	const classes = classnames( 'components-external-link', className );
+	return (
+		<a { ...additionalProps } className={ classes } href={ href } target="_blank" rel={ rel }>
+			{ children }
+			<span className="screen-reader-text">
+				{
+					/* translators: accessibility text */
+					__( '(opens in a new window)' )
+				}
+			</span>
+			<Dashicon icon="external" />
+		</a>
+	);
+}
+
+export default ExternalLink;

components/external-link/style.scss

@@ -0,0 +1,8 @@
+.components-external-link {
+	.dashicon {
+		width: 1.4em;
+		height: 1.4em;
+		margin: 0 .2em;
+		vertical-align: top;
+	}
+}

components/index.js

@@ -3,6 +3,7 @@ export { default as Button } from './button';
 export { default as ClipboardButton } from './clipboard-button';
 export { default as Dashicon } from './dashicon';
 export { default as DropZone } from './drop-zone';
+export { default as ExternalLink } from './external-link';
 export { default as FormToggle } from './form-toggle';
 export { default as FormTokenField } from './form-token-field';
 export { default as IconButton } from './icon-button';

editor/sidebar/post-excerpt/index.js

@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
  * WordPress dependencies
  */
 import { __ } from 'i18n';
-import { PanelBody } from 'components';
+import { ExternalLink, PanelBody } from 'components';
 
 /**
  * Internal Dependencies
@@ -28,9 +28,9 @@ function PostExcerpt( { excerpt, onUpdateExcerpt } ) {
 				placeholder={ __( 'Write an excerpt (optional)' ) }
 				aria-label={ __( 'Excerpt' ) }
 			/>
-			<a href="https://codex.wordpress.org/Excerpt" target="_blank">
+			<ExternalLink href="https://codex.wordpress.org/Excerpt">
 				{ __( 'Learn more about manual excerpts' ) }
-			</a>
+			</ExternalLink>
 		</PanelBody>
 	);
 }