From aff3c53166f2e90b8311155a2c0e1406c77ae40f Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Tue, 8 Oct 2024 10:24:09 +0300
Subject: [PATCH 1/2] fix: Additional word is being announced by screen reader
 for the external links

Closes: https://github.com/elastic/eui/issues/8063
---
 .../collapsible_nav_link.test.tsx.snap        |  7 ++-
 .../link/__snapshots__/link.test.tsx.snap     | 13 +++--
 .../link/external_link_icon.test.tsx          | 23 ++++----
 .../components/link/external_link_icon.tsx    | 54 +++++++++++--------
 .../list_group/list_group_item.test.tsx       |  6 ++-
 5 files changed, 55 insertions(+), 48 deletions(-)

diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_link.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_link.test.tsx.snap
index 3b583eae7e1..31feda97af0 100644
--- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_link.test.tsx.snap
+++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_link.test.tsx.snap
@@ -22,13 +22,12 @@ exports[`EuiCollapsibleNavLink renders a link 1`] = `
   <span
     class="emotion-EuiExternalLinkIcon"
     data-euiicon-type="popout"
-  >
-    External link
-  </span>
+    role="presentation"
+  />
   <span
     class="emotion-euiScreenReaderOnly"
   >
-    (opens in a new tab or window)
+    (external, opens in a new tab or window)
   </span>
 </a>
 `;
diff --git a/packages/eui/src/components/link/__snapshots__/link.test.tsx.snap b/packages/eui/src/components/link/__snapshots__/link.test.tsx.snap
index 226cb0a1f84..c2eb59ac513 100644
--- a/packages/eui/src/components/link/__snapshots__/link.test.tsx.snap
+++ b/packages/eui/src/components/link/__snapshots__/link.test.tsx.snap
@@ -44,8 +44,12 @@ exports[`EuiLink it is an external link 1`] = `
   <span
     class="emotion-EuiExternalLinkIcon"
     data-euiicon-type="popout"
+    role="presentation"
+  />
+  <span
+    class="emotion-euiScreenReaderOnly"
   >
-    External link
+    (external)
   </span>
 </a>
 `;
@@ -134,13 +138,12 @@ exports[`EuiLink supports target 1`] = `
   <span
     class="emotion-EuiExternalLinkIcon"
     data-euiicon-type="popout"
-  >
-    External link
-  </span>
+    role="presentation"
+  />
   <span
     class="emotion-euiScreenReaderOnly"
   >
-    (opens in a new tab or window)
+    (external, opens in a new tab or window)
   </span>
 </a>
 `;
diff --git a/packages/eui/src/components/link/external_link_icon.test.tsx b/packages/eui/src/components/link/external_link_icon.test.tsx
index 5a16c7e9d8c..1c1345e3321 100644
--- a/packages/eui/src/components/link/external_link_icon.test.tsx
+++ b/packages/eui/src/components/link/external_link_icon.test.tsx
@@ -23,8 +23,12 @@ describe('EuiExternalLinkIcon', () => {
         <span
           class="emotion-EuiExternalLinkIcon"
           data-euiicon-type="popout"
+          role="presentation"
+        />
+        <span
+          class="emotion-euiScreenReaderOnly"
         >
-          External link
+          (external)
         </span>
       </div>
     `);
@@ -38,13 +42,12 @@ describe('EuiExternalLinkIcon', () => {
           <span
             class="emotion-EuiExternalLinkIcon"
             data-euiicon-type="popout"
-          >
-            External link
-          </span>
+            role="presentation"
+          />
           <span
             class="emotion-euiScreenReaderOnly"
           >
-            (opens in a new tab or window)
+            (external, opens in a new tab or window)
           </span>
         </div>
       `);
@@ -54,15 +57,7 @@ describe('EuiExternalLinkIcon', () => {
       const { container } = render(
         <EuiExternalLinkIcon target="_blank" external={false} />
       );
-      expect(container).toMatchInlineSnapshot(`
-        <div>
-          <span
-            class="emotion-euiScreenReaderOnly"
-          >
-            (opens in a new tab or window)
-          </span>
-        </div>
-      `);
+      expect(container).toMatchInlineSnapshot(`<div />`);
     });
   });
 
diff --git a/packages/eui/src/components/link/external_link_icon.tsx b/packages/eui/src/components/link/external_link_icon.tsx
index e3cb3d1c230..0614ff62861 100644
--- a/packages/eui/src/components/link/external_link_icon.tsx
+++ b/packages/eui/src/components/link/external_link_icon.tsx
@@ -11,7 +11,7 @@ import React, { FunctionComponent, AnchorHTMLAttributes } from 'react';
 import { useEuiMemoizedStyles, UseEuiTheme } from '../../services';
 import { logicalStyle } from '../../global_styling';
 import { EuiIcon, EuiIconProps } from '../icon';
-import { EuiI18n, useEuiI18n } from '../i18n';
+import { EuiI18n } from '../i18n';
 import { EuiScreenReaderOnly } from '../accessibility';
 
 /**
@@ -39,31 +39,39 @@ export const EuiExternalLinkIcon: FunctionComponent<
   const showExternalLinkIcon =
     (target === '_blank' && external !== false) || external === true;
 
-  const iconAriaLabel = useEuiI18n(
-    'euiExternalLinkIcon.ariaLabel',
-    'External link'
-  );
-
   return (
     <>
       {showExternalLinkIcon && (
-        <EuiIcon
-          css={iconCssStyle}
-          aria-label={iconAriaLabel}
-          size="s"
-          type="popout"
-          {...rest}
-        />
-      )}
-      {target === '_blank' && (
-        <EuiScreenReaderOnly>
-          <span>
-            <EuiI18n
-              token="euiExternalLinkIcon.newTarget.screenReaderOnlyText"
-              default="(opens in a new tab or window)"
-            />
-          </span>
-        </EuiScreenReaderOnly>
+        <>
+          <EuiIcon
+            css={iconCssStyle}
+            size="s"
+            type="popout"
+            role="presentation"
+            {...rest}
+          />
+          {target === '_blank' ? (
+            <EuiScreenReaderOnly>
+              <span>
+                <EuiI18n
+                  token="euiExternalLinkIcon.newTarget.screenReaderOnlyText"
+                  default="(external, opens in a new tab or window)"
+                />
+              </span>
+            </EuiScreenReaderOnly>
+          ) : (
+            <>
+              <EuiScreenReaderOnly>
+                <span>
+                  <EuiI18n
+                    token="euiExternalLinkIcon.externalTarget.screenReaderOnlyText"
+                    default="(external)"
+                  />
+                </span>
+              </EuiScreenReaderOnly>
+            </>
+          )}
+        </>
       )}
     </>
   );
diff --git a/packages/eui/src/components/list_group/list_group_item.test.tsx b/packages/eui/src/components/list_group/list_group_item.test.tsx
index c41cb0f5dfd..76b3b5d0bf1 100644
--- a/packages/eui/src/components/list_group/list_group_item.test.tsx
+++ b/packages/eui/src/components/list_group/list_group_item.test.tsx
@@ -211,14 +211,16 @@ describe('EuiListGroupItem', () => {
         const { getByText } = render(
           <EuiListGroupItem label="Label" href="#" external />
         );
-        expect(getByText('External link')).toBeInTheDocument();
+        expect(getByText('(external)')).toBeInTheDocument();
       });
 
       test('target `_blank` renders external icon', () => {
         const { getByText } = render(
           <EuiListGroupItem label="Label" href="#" target="_blank" />
         );
-        expect(getByText('External link')).toBeInTheDocument();
+        expect(
+          getByText('(external, opens in a new tab or window)')
+        ).toBeInTheDocument();
       });
     });
 

From 136464ad80e4d8845af30026bdd4faf1a8791b10 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Tue, 8 Oct 2024 11:22:59 +0300
Subject: [PATCH 2/2] add changelog

---
 packages/eui/changelogs/upcoming/8065.md | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 packages/eui/changelogs/upcoming/8065.md

diff --git a/packages/eui/changelogs/upcoming/8065.md b/packages/eui/changelogs/upcoming/8065.md
new file mode 100644
index 00000000000..5c2fff25419
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8065.md
@@ -0,0 +1,4 @@
+**Accessibility**
+
+- Improved accessibility of `EuiExternalLinkIcon` by clarifying text for Screen Reader users.
+