Update ExternalLink Component to fix visually hidden text (#18142)

* Switch screen-reader-txt to VisuallyHidden component * Fix core embed test snapshot, new classname
WordPress · Nov 4, 2019 · 1d8babe · 1d8babe
1 parent c5a9f93
commit 1d8babe
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
@@ -61,7 +61,7 @@ exports[`core/embed block edit matches snapshot 1`] = `
       >
         Learn more about embeds
         <span
-          class="screen-reader-text"
+          class="components-visually-hidden"
         >
           (opens in a new tab)
         </span>

diff --git a/packages/components/src/external-link/index.js b/packages/components/src/external-link/index.js
@@ -14,6 +14,7 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import Dashicon from '../dashicon';
+import VisuallyHidden from '../visually-hidden';
 
 export function ExternalLink( { href, children, className, rel = '', ...additionalProps }, ref ) {
 	rel = uniq( compact( [
@@ -27,12 +28,12 @@ export function ExternalLink( { href, children, className, rel = '', ...addition
 		// eslint-disable-next-line react/jsx-no-target-blank
 		<a { ...additionalProps } className={ classes } href={ href } target="_blank" rel={ rel } ref={ ref }>
 			{ children }
-			<span className="screen-reader-text">
+			<VisuallyHidden as="span">
 				{
 					/* translators: accessibility text */
 					__( '(opens in a new tab)' )
 				}
-			</span>
+			</VisuallyHidden>
 			<Dashicon icon="external" className="components-external-link__icon" />
 		</a>
 	);