feat(NavItem): add screen-reader text when link opens in new tab

kronostechnologies · Nov 16, 2021 · f7b7d61 · f7b7d61
1 parent 742501c
commit f7b7d61
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 3 deletions.
diff --git a/packages/react/src/components/dropdown-menu/list-items/nav-item.test.tsx b/packages/react/src/components/dropdown-menu/list-items/nav-item.test.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { NavItem } from './nav-item';
+import { getByTestId } from '../../../test-utils/enzyme-selectors';
+
+describe('NavItem', () => {
+    it('displays screen-reader-only text when link opens in a new tab (target="_blank")', () => {
+        const wrapper = shallow(<NavItem value="test" href="test" target="_blank" />);
+
+        expect(getByTestId(wrapper, 'screen-reader-text').exists()).toBe(true);
+    });
+});
diff --git a/packages/react/src/components/dropdown-menu/list-items/nav-item.tsx b/packages/react/src/components/dropdown-menu/list-items/nav-item.tsx
@@ -5,6 +5,8 @@ import { DeviceContextProps, useDeviceContext } from '../../device-context-provi
 import { IconName } from '../../icon/icon';
 import { ItemContent } from './item-content';
 import { focus } from '../../../utils/css-state';
+import { ScreenReaderOnlyText } from '../../screen-reader-only-text/ScreenReaderOnlyText';
+import { useTranslation } from '../../../i18n/use-translation';
 
 export interface NavItemProps {
     value: string;
@@ -75,6 +77,9 @@ export const NavItem = forwardRef(({
     target,
 }: NavItemProps, ref: Ref<HTMLAnchorElement>): ReactElement => {
     const device = useDeviceContext();
+    const { t } = useTranslation('common');
+    const opensInNewTab = target === '_blank';
+
     return (
         <li>
             {isHtmlLink && (
@@ -96,6 +101,9 @@ export const NavItem = forwardRef(({
                         iconName={iconName}
                         lozenge={lozenge}
                     />
+                    {opensInNewTab && (
+                        <ScreenReaderOnlyText data-testid="screen-reader-text" label={t('opensInNewTabScreenReader')} />
+                    )}
                 </HtmlLink>
             )}
             {!isHtmlLink && (
@@ -119,6 +127,9 @@ export const NavItem = forwardRef(({
                         iconName={iconName}
                         lozenge={lozenge}
                     />
+                    {opensInNewTab && (
+                        <ScreenReaderOnlyText data-testid="screen-reader-text" label={t('opensInNewTabScreenReader')} />
+                    )}
                 </StyledNavItem>
             )}
         </li>

diff --git a/packages/react/src/components/screen-reader-only-text/ScreenReaderOnlyText.tsx b/packages/react/src/components/screen-reader-only-text/ScreenReaderOnlyText.tsx
@@ -1,5 +1,6 @@
 import React, { VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
+import { useDataAttributes } from '../../hooks/use-data-attributes';
 
 const StyledSpan = styled.span`
     border: 0;
@@ -16,6 +17,11 @@ interface Props {
     label: string;
 }
 
-export const ScreenReaderOnlyText: VoidFunctionComponent<Props> = ({ label }) => (
-    <StyledSpan>{label}</StyledSpan>
-);
+export const ScreenReaderOnlyText: VoidFunctionComponent<Props> = ({ label, ...otherProps }) => {
+    const dataAttributes = useDataAttributes(otherProps);
+
+    return (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <StyledSpan {...dataAttributes}>{label}</StyledSpan>
+    );
+};
diff --git a/packages/react/src/i18n/translations.ts b/packages/react/src/i18n/translations.ts
@@ -7,6 +7,9 @@ export const Translations = {
             productsLabel: 'Products',
             externalsLabel: 'Resources',
         },
+        common: {
+            opensInNewTabScreenReader: '(opens in a new tab)',
+        },
         datepicker: {
             calendarButtonLabel: 'Choose date',
             calendarButtonSelectedLabel: 'Choose date. The selected date is',
@@ -89,6 +92,9 @@ export const Translations = {
             productsLabel: 'Produits',
             externalsLabel: 'Ressources',
         },
+        common: {
+            opensInNewTabScreenReader: '(ouvre dans un nouvel onglet)',
+        },
         datepicker: {
             calendarButtonLabel: 'Choisissez une date',
             calendarButtonSelectedLabel: 'Choisissez une date. La date sélectionnée est',