Add an icon and visually hidden a11y text to links that open in a new tab

edit-post/components/header/style.scss

@@ -31,7 +31,7 @@
 		display: none;
 
 		@include break-small {
-			display: inline-block;
+			display: inline-flex;
 		}
 	}
 }

editor/components/post-permalink/index.js

@@ -9,8 +9,8 @@ import classnames from 'classnames';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { ClipboardButton, Button } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
+import { ClipboardButton, Button, ExternalLink } from '@wordpress/components';
 
 /**
  * Internal Dependencies
@@ -48,7 +48,7 @@ class PostPermalink extends Component {
 	componentDidUpdate( prevProps, prevState ) {
 		// If we've just stopped editing the permalink, focus on the new permalink.
 		if ( prevState.isEditingPermalink && ! this.state.isEditingPermalink ) {
-			this.permalinkButton.focus();
+			this.linkElement.focus();
 		}
 	}
 
@@ -79,15 +79,15 @@ class PostPermalink extends Component {
 				<span className="editor-post-permalink__label">{ __( 'Permalink:' ) }</span>
 
 				{ ! isEditingPermalink &&
-					<Button
+					<ExternalLink
 						className="editor-post-permalink__link"
 						href={ ! isPublished ? postLink : samplePermalink }
 						target="_blank"
-						ref={ ( permalinkButton ) => this.permalinkButton = permalinkButton }
+						ref={ ( linkElement ) => this.linkElement = linkElement }
 					>
 						{ decodeURI( samplePermalink ) }
 						&lrm;
-					</Button>
+					</ExternalLink>
 				}
 
 				{ isEditingPermalink &&

editor/components/post-preview-button/index.js

@@ -63,12 +63,16 @@ export class PostPreviewButton extends Component {
 	 * @param {MouseEvent} event Click event from preview button click.
 	 */
 	openPreviewWindow( event ) {
-		const { isAutosaveable, previewLink } = this.props;
+		const { isAutosaveable, previewLink, currentPostLink } = this.props;
 
 		// If there are no changes to autosave, we cannot perform the save, but
 		// if there is an existing preview link (e.g. previous published post
 		// autosave), it should be reused as the popup destination.
-		if ( ! isAutosaveable && ! previewLink ) {
+		if ( ! isAutosaveable && ! previewLink && currentPostLink ) {
+			this.previewWindow = window.open(
+				currentPostLink,
+				this.getWindowTarget()
+			);
 			return;
 		}
 
@@ -115,15 +119,13 @@ export class PostPreviewButton extends Component {
 	}
 
 	render() {
-		const { currentPostLink, isSaveable } = this.props;
+		const { isSaveable } = this.props;
 
 		return (
 			<Button
 				className="editor-post-preview"
 				isLarge
-				href={ currentPostLink }
 				onClick={ this.openPreviewWindow }
-				target={ this.getWindowTarget() }
 				disabled={ ! isSaveable }
 			>
 				{ _x( 'Preview', 'imperative verb' ) }

editor/components/post-preview-button/test/__snapshots__/index.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PostPreviewButton render() should match the snapshot 1`] = `
+<Button
+  className="editor-post-preview"
+  disabled={false}
+  isLarge={true}
+  onClick={[Function]}
+>
+  Preview
+  <WithSafeTimeout(WithSelect(WithDispatch(DotTip)))
+    id="core/editor.preview"
+  >
+    Click ‘Preview’ to load a preview of this page, so you can make sure you’re happy with your blocks.
+  </WithSafeTimeout(WithSelect(WithDispatch(DotTip)))>
+</Button>
+`;

editor/components/post-preview-button/test/index.js

@@ -96,7 +96,10 @@ describe( 'PostPreviewButton', () => {
 			wrapper.simulate( 'click', { preventDefault } );
 
 			if ( expectedPreviewURL ) {
-				expect( preventDefault ).toHaveBeenCalled();
+				if ( expectedPreviewURL !== props.currentPostLink ) {
+					expect( preventDefault ).toHaveBeenCalled();
+				}
+
 				expect( window.open ).toHaveBeenCalledWith( expectedPreviewURL, 'wp-preview-1' );
 			} else {
 				expect( preventDefault ).not.toHaveBeenCalled();
@@ -113,11 +116,13 @@ describe( 'PostPreviewButton', () => {
 			return wrapper;
 		}
 
-		it( 'should do nothing if neither autosaveable nor preview link available', () => {
+		it( 'should open the currentPostLink if not autosaveable nor preview link available', () => {
+			const currentPostLink = 'https://wordpress.org/?p=1';
 			assertForPreview( {
 				isAutosaveable: false,
 				previewLink: undefined,
-			}, null, false );
+				currentPostLink,
+			}, currentPostLink, false );
 		} );
 
 		it( 'should save for autosaveable post with preview link', () => {
@@ -143,17 +148,15 @@ describe( 'PostPreviewButton', () => {
 	} );
 
 	describe( 'render()', () => {
-		it( 'should render a link', () => {
+		it( 'should match the snapshot', () => {
 			const wrapper = shallow(
 				<PostPreviewButton
 					postId={ 1 }
 					isSaveable
 					currentPostLink="https://wordpress.org/?p=1" />
 			);
 
-			expect( wrapper.prop( 'href' ) ).toBe( 'https://wordpress.org/?p=1' );
-			expect( wrapper.prop( 'disabled' ) ).toBe( false );
-			expect( wrapper.prop( 'target' ) ).toBe( 'wp-preview-1' );
+			expect( wrapper ).toMatchSnapshot();
 		} );
 
 		it( 'should be disabled if post is not saveable', () => {

editor/components/rich-text/format-toolbar/index.js

@@ -10,6 +10,7 @@ import {
 	Toolbar,
 	withSpokenMessages,
 	Popover,
+	ExternalLink,
 } from '@wordpress/components';
 import { ESCAPE, LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER, displayShortcut } from '@wordpress/keycodes';
 import { prependHTTP } from '@wordpress/url';
@@ -255,13 +256,12 @@ class FormatToolbar extends Component {
 										onKeyPress={ stopKeyPropagation }
 									>
 										<div className="editor-format-toolbar__link-modal-line">
-											<a
+											<ExternalLink
 												className="editor-format-toolbar__link-value"
 												href={ formats.link.value }
-												target="_blank"
 											>
 												{ formats.link.value && filterURLForDisplay( decodeURI( formats.link.value ) ) }
-											</a>
+											</ExternalLink>
 											<IconButton icon="edit" label={ __( 'Edit' ) } onClick={ this.editLink } />
 											<IconButton
 												className="editor-format-toolbar__link-settings-toggle"

packages/components/src/button/index.js

@@ -8,6 +8,11 @@ import classnames from 'classnames';
  */
 import { createElement, forwardRef } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
 export function Button( props, ref ) {
 	const {
 		href,

packages/components/src/external-link/index.js

@@ -8,13 +8,14 @@ import { compact, uniq } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Dashicon from '../dashicon';
 
-function ExternalLink( { href, children, className, rel = '', ...additionalProps } ) {
+export function ExternalLink( { href, children, className, rel = '', ...additionalProps }, ref ) {
 	rel = uniq( compact( [
 		...rel.split( ' ' ),
 		'external',
@@ -23,17 +24,17 @@ function ExternalLink( { href, children, className, rel = '', ...additionalProps
 	] ) ).join( ' ' );
 	const classes = classnames( 'components-external-link', className );
 	return (
-		<a { ...additionalProps } className={ classes } href={ href } target="_blank" rel={ rel }>
+		<a { ...additionalProps } className={ classes } href={ href } target="_blank" rel={ rel } ref={ ref }>
 			{ children }
 			<span className="screen-reader-text">
 				{
 					/* translators: accessibility text */
 					__( '(opens in a new window)' )
 				}
 			</span>
-			<Dashicon icon="external" />
+			<Dashicon icon="external" className="components-external-link__icon" />
 		</a>
 	);
 }
 
-export default ExternalLink;
+export default forwardRef( ExternalLink );

packages/components/src/external-link/style.scss

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