From 3cfc342cc1fb4ff9cf7dccee146a8345ba03bf89 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Thu, 22 Oct 2020 14:48:02 -0400
Subject: [PATCH 1/6] adds opens in new target text for links for screen
 readers

---
 .../link/__snapshots__/link.test.tsx.snap           |  8 +++++++-
 src/components/link/link.tsx                        | 13 +++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/link/__snapshots__/link.test.tsx.snap b/src/components/link/__snapshots__/link.test.tsx.snap
index 16d5594bdf3..41f62d0fe34 100644
--- a/src/components/link/__snapshots__/link.test.tsx.snap
+++ b/src/components/link/__snapshots__/link.test.tsx.snap
@@ -129,7 +129,13 @@ exports[`EuiLink supports target 1`] = `
   href="#"
   rel="noreferrer"
   target="_parent"
-/>
+>
+  <span
+    class="euiScreenReaderOnly"
+  >
+    (opens in a new tab or window)
+  </span>
+</a>
 `;
 
 exports[`EuiLink text is rendered 1`] = `
diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx
index 89ee12df59b..bf11358dfd0 100644
--- a/src/components/link/link.tsx
+++ b/src/components/link/link.tsx
@@ -28,6 +28,7 @@ import { EuiIcon } from '../icon';
 import { EuiI18n } 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 =
@@ -115,6 +116,17 @@ const EuiLink = forwardRef<HTMLAnchorElement | HTMLButtonElement, EuiLinkProps>(
       </EuiI18n>
     ) : undefined;
 
+    const newTargetScreenreaderText = target ? (
+      <EuiScreenReaderOnly>
+        <span>
+          <EuiI18n
+            token="euiLink.newTarget.screenReaderOnlyText"
+            default="(opens in a new tab or window)"
+          />
+        </span>
+      </EuiScreenReaderOnly>
+    ) : undefined;
+
     if (href === undefined) {
       const buttonProps = {
         className: classNames(
@@ -153,6 +165,7 @@ const EuiLink = forwardRef<HTMLAnchorElement | HTMLButtonElement, EuiLinkProps>(
         {...(anchorProps as EuiLinkAnchorProps)}>
         {children}
         {externalLinkIcon}
+        {newTargetScreenreaderText}
       </a>
     );
   }

From 212bbfa3ddb66684a6c2d7a469de0a41e0bd58de Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Wed, 28 Oct 2020 12:50:04 -0400
Subject: [PATCH 2/6] PR feedback

---
 src-docs/src/views/link/link.js               | 10 +++--
 .../link/__snapshots__/link.test.tsx.snap     | 24 +++++++++-
 src/components/link/link.test.tsx             |  9 +++-
 src/components/link/link.tsx                  | 45 +++++++++----------
 4 files changed, 58 insertions(+), 30 deletions(-)

diff --git a/src-docs/src/views/link/link.js b/src-docs/src/views/link/link.js
index 3ba7288cfc3..9c56a8a10d8 100644
--- a/src-docs/src/views/link/link.js
+++ b/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{' '}
@@ -34,7 +35,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>
diff --git a/src/components/link/__snapshots__/link.test.tsx.snap b/src/components/link/__snapshots__/link.test.tsx.snap
index 41f62d0fe34..e486d8e306c 100644
--- a/src/components/link/__snapshots__/link.test.tsx.snap
+++ b/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,14 @@ 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"
   >
diff --git a/src/components/link/link.test.tsx b/src/components/link/link.test.tsx
index a662e77ee01..6429d54a934 100644
--- a/src/components/link/link.test.tsx
+++ b/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();
   });
 
diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx
index bf11358dfd0..f6136683859 100644
--- a/src/components/link/link.tsx
+++ b/src/components/link/link.tsx
@@ -25,7 +25,7 @@ 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';
@@ -69,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;
 }
@@ -103,29 +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 newTargetScreenreaderText = target ? (
+    const externalLinkIcon = (
+      <EuiIcon
+        aria-label={useEuiI18n('euiLink.external.ariaLabel', 'External link')}
+        size="s"
+        className="euiLink__externalIcon"
+        type="popout"
+      />
+    );
+
+    const newTargetScreenreaderText = (
       <EuiScreenReaderOnly>
         <span>
-          <EuiI18n
-            token="euiLink.newTarget.screenReaderOnlyText"
-            default="(opens in a new tab or window)"
-          />
+          {useEuiI18n(
+            'euiLink.newTarget.screenReaderOnlyText',
+            '(opens in a new tab or window)'
+          )}
         </span>
       </EuiScreenReaderOnly>
-    ) : undefined;
+    );
 
     if (href === undefined) {
       const buttonProps = {
@@ -158,14 +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}
-        {newTargetScreenreaderText}
+        {showExternalLinkIcon && externalLinkIcon}
+        {target === '_blank' && newTargetScreenreaderText}
       </a>
     );
   }

From ef13332c14301da6ee70db15167aba9ed5887c92 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Wed, 28 Oct 2020 12:55:06 -0400
Subject: [PATCH 3/6] adding changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99590d5bb0d..fc096b0960d 100644
--- a/CHANGELOG.md
+++ b/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**
 

From 083f76419df3962ed7d8aef42daa0a09da1f5495 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Wed, 28 Oct 2020 13:31:20 -0400
Subject: [PATCH 4/6] Apply suggestions from code review

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 CHANGELOG.md                    | 3 ++-
 src-docs/src/views/link/link.js | 2 +-
 src/components/link/link.tsx    | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fc096b0960d..fe7211c818f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,8 @@
 ## [`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))
+- Added screen reader notification if `EuiLink` opens in a new window ([#4172](https://github.com/elastic/eui/pull/4172))
+- Set `external` prop to true if `EuiLink` opens in a new window ([#4172](https://github.com/elastic/eui/pull/4172))
 
 **Bug fixes**
 
diff --git a/src-docs/src/views/link/link.js b/src-docs/src/views/link/link.js
index e0eeaef7bbd..fb4f6929292 100644
--- a/src-docs/src/views/link/link.js
+++ b/src-docs/src/views/link/link.js
@@ -10,7 +10,7 @@ export default () => (
         Elastic website
       </EuiLink>{' '}
       in a new tab. Setting <EuiCode>target=&ldquo;_blank&rdquo;</EuiCode> also
-      defaults to <EuiCode>external={true}</EuiCode>.
+      defaults to <EuiCode>{`external={true}`}</EuiCode>.
     </p>
     <p>
       This{' '}
diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx
index f6136683859..dcc1ceedc4a 100644
--- a/src/components/link/link.tsx
+++ b/src/components/link/link.tsx
@@ -69,8 +69,8 @@ export interface LinkAnchorProps {
   type?: EuiLinkType;
   color?: EuiLinkColor;
   /**
-   * Set to true to show an icon indicating that it is an external link. Defaults to true if
-   * `target="_blank".
+   * Set to true to show an icon indicating that it is an external link;
+   * Defaults to true if `target="_blank"`
    */
   external?: boolean;
 }

From 10e598fd84891bfcca73891762ffe4cbd936d9a5 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Wed, 28 Oct 2020 15:29:01 -0400
Subject: [PATCH 5/6] Apply suggestions from code review

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 src-docs/src/views/link/link.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src-docs/src/views/link/link.js b/src-docs/src/views/link/link.js
index fb4f6929292..c26bcee972a 100644
--- a/src-docs/src/views/link/link.js
+++ b/src-docs/src/views/link/link.js
@@ -14,10 +14,10 @@ export default () => (
     </p>
     <p>
       This{' '}
-      <EuiLink href="http://www.elastic.co" external={false} target="_blank">
+      <EuiLink href="http://www.elastic.co" external>
         link
       </EuiLink>{' '}
-      has the <EuiCode>external</EuiCode> prop set to false.
+      has the <EuiCode>external</EuiCode> prop set to true.
     </p>
     <p>
       This link is actually a <EuiLink onClick={() => {}}>button</EuiLink> with

From ebcae5ae706d53c220245d0e38f5047e2c83b941 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Wed, 28 Oct 2020 15:34:12 -0400
Subject: [PATCH 6/6] PR feedback on i18n

---
 src-docs/src/views/link/link.js |  2 +-
 src/components/link/link.tsx    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src-docs/src/views/link/link.js b/src-docs/src/views/link/link.js
index c26bcee972a..9a053101769 100644
--- a/src-docs/src/views/link/link.js
+++ b/src-docs/src/views/link/link.js
@@ -10,7 +10,7 @@ export default () => (
         Elastic website
       </EuiLink>{' '}
       in a new tab. Setting <EuiCode>target=&ldquo;_blank&rdquo;</EuiCode> also
-      defaults to <EuiCode>{`external={true}`}</EuiCode>.
+      defaults to <EuiCode>{'external={true}'}</EuiCode>.
     </p>
     <p>
       This{' '}
diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx
index dcc1ceedc4a..c1147511cd7 100644
--- a/src/components/link/link.tsx
+++ b/src/components/link/link.tsx
@@ -25,7 +25,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 import { EuiIcon } from '../icon';
-import { useEuiI18n } from '../i18n';
+import { EuiI18n, useEuiI18n } from '../i18n';
 import { CommonProps, ExclusiveUnion, keysOf } from '../common';
 import { getSecureRelForTarget } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
@@ -116,10 +116,10 @@ const EuiLink = forwardRef<HTMLAnchorElement | HTMLButtonElement, EuiLinkProps>(
     const newTargetScreenreaderText = (
       <EuiScreenReaderOnly>
         <span>
-          {useEuiI18n(
-            'euiLink.newTarget.screenReaderOnlyText',
-            '(opens in a new tab or window)'
-          )}
+          <EuiI18n
+            token="euiLink.newTarget.screenReaderOnlyText"
+            default="(opens in a new tab or window)"
+          />
         </span>
       </EuiScreenReaderOnly>
     );