fix: Additional word is being announced by screen reader for the exte…

…rnal links Closes: #8063
elastic · Oct 8, 2024 · 6a447db · 6a447db
1 parent d795367
commit 6a447db
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 48 deletions.
diff --git a/...ollapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_link.test.tsx.snap b/...ollapsible_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
@@ -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
@@ -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
@@ -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
@@ -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();
       });
     });