Merge pull request #2738 from Codeinwp/feat/review-external-links

Review external links
Codeinwp · Apr 23, 2021 · 28b0512 · 28b0512
2 parents 8f68205 + 92a79d9
commit 28b0512
Show file tree

Hide file tree

Showing 20 changed files with 289 additions and 212 deletions.
diff --git a/dashboard/inc/Main.php b/dashboard/inc/Main.php
@@ -196,14 +196,13 @@ private function get_localization() {
 			'upgradeURL'          => esc_url( apply_filters( 'neve_upgrade_link_from_child_theme_filter', 'https://themeisle.com/themes/neve/upgrade/?utm_medium=aboutneve&utm_source=freevspro&utm_campaign=neve' ) ),
 			'supportURL'          => esc_url( 'https://wordpress.org/support/theme/neve/' ),
 			'docsURL'             => esc_url( 'https://docs.themeisle.com/article/946-neve-doc' ),
+			'codexURL'            => esc_url( 'https://codex.nevewp.com/' ),
 			'strings'             => [
 				'proTabTitle'                   => wp_kses_post( $plugin_name ),
 				/* translators: %s - Theme name */
 				'header'                        => sprintf( __( '%s Options', 'neve' ), wp_kses_post( $theme_name ) ),
 				/* translators: %s - Theme name */
 				'starterSitesCardDescription'   => sprintf( __( '%s now comes with a sites library with various designs to pick from. Visit our collection of demos that are constantly being added.', 'neve' ), wp_kses_post( $theme_name ) ),
-				/* translators: %s - "Public roadmap" */
-				'sidebarCommunityDescription'   => sprintf( __( 'Share opinions, ask questions and help each other on our Neve community! Keep up with what we’re working on and vote to help us prioritize on our %s.', 'neve' ), wp_kses_post( '<a href="https://neve.nolt.io">' . __( 'public roadmap', 'neve' ) . '</a>' ) ),
 				/* translators: %s - Theme name */
 				'starterSitesTabDescription'    => sprintf( __( 'With %s, you can choose from multiple unique demos, specially designed for you, that can be installed with a single click. You just need to choose your favorite, and we will take care of everything else.', 'neve' ), wp_kses_post( $theme_name ) ),
 				/* translators: %s - Theme name */
@@ -222,7 +221,7 @@ private function get_localization() {
 				'licenseCardDescription'        => sprintf(
 				// translators: store name (Themeisle)
 					__( 'Enter your license from %1$s purchase history in order to get plugin updates', 'neve' ),
-					'<a href="https://store.themeisle.com/">ThemeIsle</a>'
+					'<a target="_blank" rel="external noreferrer noopener" href="https://store.themeisle.com/">ThemeIsle<span class="components-visually-hidden">' . esc_html__( '(opens in new tab)', 'neve' ) . '</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="components-external-link__icon css-6wogo1-StyledIcon etxm6pv0" role="img" aria-hidden="true" focusable="false"><path d="M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"></path></svg></a>'
 				),
 			],
 			'changelog'           => $this->cl_handler->get_changelog( get_template_directory() . '/CHANGELOG.md' ),

diff --git a/dashboard/src/Components/Content/FreePro.js b/dashboard/src/Components/Content/FreePro.js
@@ -28,8 +28,16 @@ const Pro = () => {
 						'neve'
 					)}
 				</p>
-				<Button href={neveDash.upgradeURL} isPrimary>
+				<Button
+					target="_blank"
+					rel="external noreferrer noopener"
+					href={neveDash.upgradeURL}
+					isPrimary
+				>
 					{__('Get Neve Pro Now', 'neve')}
+					<span className="components-visually-hidden">
+						{__('(opens in a new tab)', 'neve')}
+					</span>
 				</Button>
 			</div>
 		</div>

diff --git a/dashboard/src/Components/Content/Help.js b/dashboard/src/Components/Content/Help.js
@@ -3,12 +3,12 @@ import Card from '../Card';
 
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
-import { Button, Icon } from '@wordpress/components';
+import { Button, Icon, ExternalLink } from '@wordpress/components';
 
 const Help = (props) => {
 	const { setTab } = props;
 
-	let { docsURL, supportURL, whiteLabel, assets } = neveDash;
+	let { docsURL, codexURL, supportURL, whiteLabel, assets } = neveDash;
 	const { supportCardDescription, docsCardDescription } = neveDash.strings;
 
 	if (whiteLabel && whiteLabel.agencyURL) {
@@ -30,30 +30,38 @@ const Help = (props) => {
 						'neve'
 					)}
 				>
-					<Button
-						isLink
-						href="http://docs.themeisle.com/article/219-how-to-build-a-landing-page-with-a-drag-and-drop-content-builder"
-					>
+					<ExternalLink href="http://docs.themeisle.com/article/219-how-to-build-a-landing-page-with-a-drag-and-drop-content-builder">
 						{__('Learn More', 'neve')}
-					</Button>
+					</ExternalLink>
 				</Card>
 			)}
 			<Card
 				icon={assets + 'page.svg'}
 				title={__('Documentation', 'neve')}
 				description={docsCardDescription}
 			>
-				<Button isLink href={docsURL}>
+				{!whiteLabel && (
+					<ExternalLink href={codexURL}>
+						{__('Go to Neve Codex', 'neve')}
+					</ExternalLink>
+				)}
+				<ExternalLink href={docsURL}>
 					{__('Go to docs', 'neve')}
-				</Button>
+				</ExternalLink>
 				{!whiteLabel && (
-					<a
+					<Button
+						isLink
 						className="facebook-badge"
 						href="https://www.facebook.com/groups/648646435537266/"
+						target="_blank"
+						rel="external noreferrer noopener"
 					>
+						<span className="components-visually-hidden">
+							{__('(opens in a new tab)', 'neve')}
+						</span>
 						<Icon icon="facebook-alt" />
 						<span>{__('Join our Facebook Group', 'neve')}</span>
-					</a>
+					</Button>
 				)}
 			</Card>
 
@@ -66,12 +74,9 @@ const Help = (props) => {
 						'neve'
 					)}
 				>
-					<Button
-						isLink
-						href="http://docs.themeisle.com/article/14-how-to-create-a-child-theme"
-					>
+					<ExternalLink href="http://docs.themeisle.com/article/14-how-to-create-a-child-theme">
 						{__('Learn More', 'neve')}
-					</Button>
+					</ExternalLink>
 				</Card>
 			)}
 
@@ -80,7 +85,15 @@ const Help = (props) => {
 				title={__('Contact Support', 'neve')}
 				description={supportCardDescription}
 			>
-				<Button isPrimary href={supportURL}>
+				<Button
+					isPrimary
+					href={supportURL}
+					target="_blank"
+					rel="external noreferrer noopener"
+				>
+					<span className="components-visually-hidden">
+						{__('(opens in a new tab)', 'neve')}
+					</span>
 					{__('Contact Support', 'neve')}
 				</Button>
 			</Card>
@@ -94,12 +107,9 @@ const Help = (props) => {
 						'neve'
 					)}
 				>
-					<Button
-						isLink
-						href="http://docs.themeisle.com/article/63-speed-up-your-wordpress-site"
-					>
+					<ExternalLink href="http://docs.themeisle.com/article/63-speed-up-your-wordpress-site">
 						{__('Learn More', 'neve')}
-					</Button>
+					</ExternalLink>
 				</Card>
 			)}
 			{!whiteLabel && (
@@ -110,6 +120,7 @@ const Help = (props) => {
 						'Want to get the gist on the latest theme changes? Just consult our changelog below to get a taste of the recent fixes and features implemented.',
 						'neve'
 					)}
+					ßßßßß
 				>
 					<Button isLink onClick={() => setTab('changelog')}>
 						{__('View Changelog', 'neve')}

diff --git a/dashboard/src/Components/FeatureRow.js b/dashboard/src/Components/FeatureRow.js
@@ -1,4 +1,4 @@
-import { Dashicon } from '@wordpress/components';
+import { Dashicon, ExternalLink } from '@wordpress/components';
 import { useState, createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
@@ -42,14 +42,16 @@ const FeatureRow = ({ item }) => {
 										{docsLink &&
 											createInterpolateElement(
 												__(
-													'More details <a>here</a>.',
+													'More details <external_link>here</external_link>.',
 													'neve'
 												),
 												{
-													a: (
-														<a href={docsLink}>
+													external_link: (
+														<ExternalLink
+															href={docsLink}
+														>
 															#dumptext
-														</a>
+														</ExternalLink>
 													),
 												}
 											)}

diff --git a/dashboard/src/Components/ModuleCard.js b/dashboard/src/Components/ModuleCard.js
@@ -7,7 +7,12 @@ import Toggle from './Options/Toggle';
 import { changeOption } from '../utils/rest';
 import classnames from 'classnames';
 
-import { Button, ToggleControl, Dashicon } from '@wordpress/components';
+import {
+	Button,
+	ToggleControl,
+	Dashicon,
+	ExternalLink,
+} from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { Fragment, useState } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
@@ -155,9 +160,9 @@ const ModuleCard = ({
 				<p className="card-description">
 					{description + ' '}
 					{documentation.url && (
-						<a href={documentation.url}>
+						<ExternalLink href={documentation.url}>
 							{__('Learn More', 'neve')}
-						</a>
+						</ExternalLink>
 					)}
 				</p>
 				{links && getModuleStatus(slug) && (

diff --git a/dashboard/src/Components/Sidebar.js b/dashboard/src/Components/Sidebar.js
@@ -1,10 +1,9 @@
 /* global neveDash */
 import { changeOption } from '../utils/rest';
 import LicenseCard from './LicenseCard';
-
 import { __ } from '@wordpress/i18n';
-import { ToggleControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { ToggleControl, ExternalLink } from '@wordpress/components';
+import { createInterpolateElement, useState } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -18,16 +17,24 @@ const Sidebar = ({ currentTab, setToast, loggerValue, setLogger }) => {
 				<aside className="sidebar card">
 					<div className="sidebar-section">
 						<h4>{__('Neve Community', 'neve')}</h4>
-						<p
-							dangerouslySetInnerHTML={{
-								__html:
-									neveDash.strings
-										.sidebarCommunityDescription,
-							}}
-						/>
-						<a href="https://www.facebook.com/groups/648646435537266/">
+						<p>
+							{createInterpolateElement(
+								__(
+									'Share opinions, ask questions and help each other on our Neve community! Keep up with what we’re working on and vote to help us prioritize on our <external_link>public roadmap</external_link>.',
+									'neve'
+								),
+								{
+									external_link: (
+										<ExternalLink href="https://neve.nolt.io">
+											#dumptext
+										</ExternalLink>
+									),
+								}
+							)}
+						</p>
+						<ExternalLink href="https://www.facebook.com/groups/648646435537266/">
 							{__('Join our Facebook Group', 'neve')}
-						</a>
+						</ExternalLink>
 					</div>
 					<hr />
 					<div className="sidebar-section">
@@ -38,9 +45,9 @@ const Sidebar = ({ currentTab, setToast, loggerValue, setLogger }) => {
 								'neve'
 							)}
 						</p>
-						<a href="https://wordpress.org/support/theme/neve/reviews/#new-post">
+						<ExternalLink href="https://wordpress.org/support/theme/neve/reviews/#new-post">
 							{__('Submit a review', 'neve')}
-						</a>
+						</ExternalLink>
 					</div>
 					<hr />
 					<div className="sidebar-section">
@@ -51,9 +58,9 @@ const Sidebar = ({ currentTab, setToast, loggerValue, setLogger }) => {
 								'neve'
 							)}
 							&nbsp;
-							<a href="https://docs.themeisle.com/article/1122-neve-usage-tracking">
+							<ExternalLink href="https://docs.themeisle.com/article/1122-neve-usage-tracking">
 								{__('What do we track?', 'neve')}
-							</a>
+							</ExternalLink>
 						</p>
 						<ToggleControl
 							checked={tracking}

diff --git a/dashboard/src/scss/components/_sidebar.scss b/dashboard/src/scss/components/_sidebar.scss
@@ -21,6 +21,7 @@
 
   a {
     color: $blue;
+	display: inline-block;
   }
 }
 

diff --git a/dashboard/src/scss/content/_free-pro.scss b/dashboard/src/scss/content/_free-pro.scss
@@ -64,7 +64,7 @@
 				margin: 0;
 			}
 
-			span {
+			span:not(.components-visually-hidden) {
 				display: flex;
 				align-items: center;
 				line-height: 1;
@@ -150,7 +150,7 @@
 			.large {
 				font-size: 15px;
 
-				span {
+				span:not(.components-visually-hidden) {
 					padding: 0 20px;
 					position: relative;
 				}

diff --git a/header-footer-grid/Core/Builder/Footer.php b/header-footer-grid/Core/Builder/Footer.php
@@ -43,7 +43,8 @@ public function init() {
 					$this->get_property( 'title' ),
 					/* translators: %s link text */
 					sprintf(
-						'<br/><a target="_blank" href="https://docs.themeisle.com/article/946-neve-doc#footer-builder">%s</a>',
+						'<br/><a target="_blank" rel="external noopener noreferrer" href="https://docs.themeisle.com/article/946-neve-doc#footer-builder"><span class="screen-reader-text">%s</span><svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="img" viewBox="0 0 512 512" width="12" height="12" style="margin-right: 5px;"><path fill="currentColor" d="M432 320H400a16 16 0 0 0-16 16V448H64V128H208a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16H48A48 48 0 0 0 0 112V464a48 48 0 0 0 48 48H400a48 48 0 0 0 48-48V336A16 16 0 0 0 432 320ZM488 0h-128c-21.4 0-32 25.9-17 41l35.7 35.7L135 320.4a24 24 0 0 0 0 34L157.7 377a24 24 0 0 0 34 0L435.3 133.3 471 169c15 15 41 4.5 41-17V24A24 24 0 0 0 488 0Z"/></svg>%s</a>',
+						esc_html__( '(opens in a new tab)', 'neve' ),
 						esc_html__( 'Read full documentation', 'neve' )
 					)
 				)

diff --git a/header-footer-grid/Core/Builder/Header.php b/header-footer-grid/Core/Builder/Header.php
@@ -47,7 +47,8 @@ public function init() {
 					$this->get_property( 'title' ),
 					/* translators: %s link text */
 					sprintf(
-						'<br/><a target="_blank" href="https://docs.themeisle.com/article/946-neve-doc#header">%s</a>',
+						'<br/><a target="_blank" rel="external noopener noreferrer" href="https://docs.themeisle.com/article/946-neve-doc#header"><span class="screen-reader-text">%s</span><svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="img" viewBox="0 0 512 512" width="12" height="12" style="margin-right: 5px;"><path fill="currentColor" d="M432 320H400a16 16 0 0 0-16 16V448H64V128H208a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16H48A48 48 0 0 0 0 112V464a48 48 0 0 0 48 48H400a48 48 0 0 0 48-48V336A16 16 0 0 0 432 320ZM488 0h-128c-21.4 0-32 25.9-17 41l35.7 35.7L135 320.4a24 24 0 0 0 0 34L157.7 377a24 24 0 0 0 34 0L435.3 133.3 471 169c15 15 41 4.5 41-17V24A24 24 0 0 0 488 0Z"/></svg>%s</a>',
+						esc_html__( '(opens in a new tab)', 'neve' ),
 						esc_html__( 'Read full documentation', 'neve' )
 					)
 				)

diff --git a/inc/core/admin.php b/inc/core/admin.php
@@ -265,11 +265,12 @@ public function welcome_notice_content() {
 			$options_page_btn
 		);
 		$notice_documentation = sprintf(
-			'<div><h3><span class="dashicons dashicons-format-aside"></span> %1$s</h3><p>%2$s</p><a href="%3$s">%4$s</a></div><div> <p>%5$s</p></div>',
+			'<div><h3><span class="dashicons dashicons-format-aside"></span> %1$s</h3><p>%2$s</p><a target="_blank" rel="external noopener noreferrer" href="%3$s"><span class="screen-reader-text">%4$s</span><svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="img" viewBox="0 0 512 512" width="12" height="12" style="margin-right: 5px;"><path fill="currentColor" d="M432 320H400a16 16 0 0 0-16 16V448H64V128H208a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16H48A48 48 0 0 0 0 112V464a48 48 0 0 0 48 48H400a48 48 0 0 0 48-48V336A16 16 0 0 0 432 320ZM488 0h-128c-21.4 0-32 25.9-17 41l35.7 35.7L135 320.4a24 24 0 0 0 0 34L157.7 377a24 24 0 0 0 34 0L435.3 133.3 471 169c15 15 41 4.5 41-17V24A24 24 0 0 0 488 0Z"/></svg>%5$s</a></div><div> <p>%6$s</p></div>',
 			__( 'Documentation', 'neve' ),
 			// translators: %s - Theme name
 				sprintf( esc_html__( 'Need more details? Please check our full documentation for detailed information on how to use %s.', 'neve' ), $name ),
 			'https://docs.themeisle.com/article/946-neve-doc',
+			esc_html__( '(opens in a new tab)', 'neve' ),
 			esc_html__( 'Read full documentation', 'neve' ),
 			$ob_return_dashboard
 		);

diff --git a/inc/customizer/controls/js/upsell.js b/inc/customizer/controls/js/upsell.js
@@ -4,10 +4,13 @@ wp.customize.bind( 'ready', function () {
 		const markup =
 			'<div class="nv-upsell"><div class="nv-upsell-content">' +
 			upsellConfig.text +
-			'</div><a target="_blank" href="' +
+			'</div><a rel="external noreferrer noopener" target="_blank" href="' +
 			upsellConfig.button_url +
 			'" class="button button-primary">' +
 			upsellConfig.button_text +
+			'<span class="components-visually-hidden">' +
+			upsellConfig.screen_reader +
+			'</span>' +
 			'</a></div>';
 		const elChild = document.createElement( 'li' );
 		elChild.innerHTML = markup;

diff --git a/inc/customizer/controls/react/src/common/ControlWithLink.js b/inc/customizer/controls/react/src/common/ControlWithLink.js
@@ -1,4 +1,5 @@
 /* global NeveProReactCustomize */
+import { ExternalLink } from '@wordpress/components';
 
 const ControlWithLink = ({ link, children }) => {
 	if (typeof NeveProReactCustomize !== 'undefined') {
@@ -22,6 +23,10 @@ const ControlWithLink = ({ link, children }) => {
 			);
 		}
 
+		if (link.new_tab) {
+			return <ExternalLink href={link.url}>{link.string}</ExternalLink>;
+		}
+
 		return <a href={link.url}>{link.string}</a>;
 	};
 

diff --git a/inc/customizer/controls/simple_upsell.php b/inc/customizer/controls/simple_upsell.php
@@ -59,8 +59,9 @@ public function render_content() {
 				<p><?php echo esc_html( $this->text ); ?></p>
 			<?php } ?>
 			<?php if ( ! empty( $this->link ) && ! empty( $this->button_text ) ) { ?>
-				<a href="<?php echo esc_url( $this->link ); ?>" class='button button-secondary'>
+				<a target="_blank" rel="external noreferrer noopener" href="<?php echo esc_url( $this->link ); ?>" class='button button-secondary'>
 					<?php echo esc_html( $this->button_text ); ?>
+					<span class="components-visually-hidden"><?php echo esc_html__( '(opens in a new tab)', 'neve' ); ?></span>
 				</a>
 			<?php } ?>
 		</div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,6 +21,7 @@ @@
       a {
         color: $blue;
+    	display: inline-block;
       }
     }
@@ Expand Down @@