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 3b583eae7e1e..31feda97af0d 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`] = ` - External link - + role="presentation" + /> - (opens in a new tab or window) + (external, opens in a new tab or window) `; 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 226cb0a1f841..c2eb59ac5139 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`] = ` + - External link + (external) `; @@ -134,13 +138,12 @@ exports[`EuiLink supports target 1`] = ` - External link - + role="presentation" + /> - (opens in a new tab or window) + (external, opens in a new tab or window) `; 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 5a16c7e9d8c4..1c1345e33219 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', () => { + - External link + (external) `); @@ -38,13 +42,12 @@ describe('EuiExternalLinkIcon', () => { - External link - + role="presentation" + /> - (opens in a new tab or window) + (external, opens in a new tab or window) `); @@ -54,15 +57,7 @@ describe('EuiExternalLinkIcon', () => { const { container } = render( ); - expect(container).toMatchInlineSnapshot(` -
- - (opens in a new tab or window) - -
- `); + expect(container).toMatchInlineSnapshot(`
`); }); }); diff --git a/packages/eui/src/components/link/external_link_icon.tsx b/packages/eui/src/components/link/external_link_icon.tsx index e3cb3d1c230f..0614ff628619 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 && ( - - )} - {target === '_blank' && ( - - - - - + <> + + {target === '_blank' ? ( + + + + + + ) : ( + <> + + + + + + + )} + )} ); 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 c41cb0f5dfd9..483242ee3fce 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( ); - expect(getByText('External link')).toBeInTheDocument(); + expect(getByText('(external))')).toBeInTheDocument(); }); test('target `_blank` renders external icon', () => { const { getByText } = render( ); - expect(getByText('External link')).toBeInTheDocument(); + expect( + getByText('(external, opens in a new tab or window)') + ).toBeInTheDocument(); }); });