Adds 'opens in new target' text for links for screen readers

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added more exports for `EuiInMemoryTable` types ([#4179](https://github.com/elastic/eui/pull/4179))
+- Added screen reader notification for `EuiLink` when it opens in a new tab ([#3659](https://github.com/elastic/eui/pull/3659))
 
 **Bug fixes**
 

src-docs/src/views/link/link.js

@@ -9,14 +9,15 @@ export default () => (
       <EuiLink href="http://www.elastic.co" target="_blank">
         Elastic website
       </EuiLink>{' '}
-      in a new tab.
+      in a new tab. Setting <EuiCode>target=&ldquo;_blank&rdquo;</EuiCode> also
+      defaults to <EuiCode>external={true}</EuiCode>.
     </p>
     <p>
       This{' '}
-      <EuiLink href="http://www.elastic.co" external target="_blank">
+      <EuiLink href="http://www.elastic.co" external={false} target="_blank">
         link
       </EuiLink>{' '}
-      has the <EuiCode>external</EuiCode> prop set to true.
+      has the <EuiCode>external</EuiCode> prop set to false.
     </p>
     <p>
       This link is actually a <EuiLink onClick={() => {}}>button</EuiLink> with
@@ -31,7 +32,8 @@ export default () => (
         }}>
         link
       </EuiLink>{' '}
-      with both an href and an onClick handler.
+      with both an <EuiCode>href</EuiCode> and an <EuiCode>onClick</EuiCode>{' '}
+      handler.
     </p>
     <p>Links can be colored as well.</p>
     <ul>

src/components/link/__snapshots__/link.test.tsx.snap

@@ -7,6 +7,21 @@ exports[`EuiLink accent is rendered 1`] = `
 />
 `;
 
+exports[`EuiLink allows for target and external to be controlled independently 1`] = `
+<a
+  class="euiLink euiLink--primary"
+  href="#"
+  rel="noopener noreferrer"
+  target="_blank"
+>
+  <span
+    class="euiScreenReaderOnly"
+  >
+    (opens in a new tab or window)
+  </span>
+</a>
+`;
+
 exports[`EuiLink button respects the type property 1`] = `
 <button
   class="euiLink euiLink--primary"
@@ -127,9 +142,20 @@ exports[`EuiLink supports target 1`] = `
 <a
   class="euiLink euiLink--primary"
   href="#"
-  rel="noreferrer"
-  target="_parent"
-/>
+  rel="noopener noreferrer"
+  target="_blank"
+>
+  <span
+    aria-label="External link"
+    class="euiLink__externalIcon"
+    data-euiicon-type="popout"
+  />
+  <span
+    class="euiScreenReaderOnly"
+  >
+    (opens in a new tab or window)
+  </span>
+</a>
 `;
 
 exports[`EuiLink text is rendered 1`] = `

src/components/link/link.test.tsx

@@ -60,7 +60,14 @@ describe('EuiLink', () => {
   });
 
   test('supports target', () => {
-    const component = render(<EuiLink href="#" target="_parent" />);
+    const component = render(<EuiLink href="#" target="_blank" />);
+    expect(component).toMatchSnapshot();
+  });
+
+  test('allows for target and external to be controlled independently', () => {
+    const component = render(
+      <EuiLink href="#" target="_blank" external={false} />
+    );
     expect(component).toMatchSnapshot();
   });
 

src/components/link/link.tsx

@@ -25,9 +25,10 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 import { EuiIcon } from '../icon';
-import { EuiI18n } from '../i18n';
+import { useEuiI18n } from '../i18n';
 import { CommonProps, ExclusiveUnion, keysOf } from '../common';
 import { getSecureRelForTarget } from '../../services';
+import { EuiScreenReaderOnly } from '../accessibility';
 
 export type EuiLinkType = 'button' | 'reset' | 'submit';
 export type EuiLinkColor =
@@ -68,7 +69,8 @@ export interface LinkAnchorProps {
   type?: EuiLinkType;
   color?: EuiLinkColor;
   /**
-   * Set to true to show an icon indicating that it is an external link.
+   * Set to true to show an icon indicating that it is an external link. Defaults to true if
+   * `target="_blank".
    */
   external?: boolean;
 }
@@ -102,18 +104,25 @@ const EuiLink = forwardRef<HTMLAnchorElement | HTMLButtonElement, EuiLinkProps>(
     },
     ref
   ) => {
-    const externalLinkIcon = external ? (
-      <EuiI18n token="euiLink.external.ariaLabel" default="External link">
-        {(ariaLabel: string) => (
-          <EuiIcon
-            aria-label={ariaLabel}
-            size="s"
-            className="euiLink__externalIcon"
-            type="popout"
-          />
-        )}
-      </EuiI18n>
-    ) : undefined;
+    const externalLinkIcon = (
+      <EuiIcon
+        aria-label={useEuiI18n('euiLink.external.ariaLabel', 'External link')}
+        size="s"
+        className="euiLink__externalIcon"
+        type="popout"
+      />
+    );
+
+    const newTargetScreenreaderText = (
+      <EuiScreenReaderOnly>
+        <span>
+          {useEuiI18n(
+            'euiLink.newTarget.screenReaderOnlyText',
+            '(opens in a new tab or window)'
+          )}
+        </span>
+      </EuiScreenReaderOnly>
+    );
 
     if (href === undefined) {
       const buttonProps = {
@@ -146,13 +155,16 @@ const EuiLink = forwardRef<HTMLAnchorElement | HTMLButtonElement, EuiLinkProps>(
       onClick,
       ...rest,
     };
+    const showExternalLinkIcon =
+      (target === '_blank' && external !== false) || external === true;
 
     return (
       <a
         ref={ref as React.Ref<HTMLAnchorElement>}
         {...(anchorProps as EuiLinkAnchorProps)}>
         {children}
-        {externalLinkIcon}
+        {showExternalLinkIcon && externalLinkIcon}
+        {target === '_blank' && newTargetScreenreaderText}
       </a>
     );
   }