Link, Dropdown: fix A11y (opens new tab logic) (#3600)

pinterest · May 29, 2024 · f4d4ebd · f4d4ebd
1 parent b51cfe4
commit f4d4ebd
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 88 deletions.
diff --git a/packages/gestalt/src/Dropdown/OptionItem.tsx b/packages/gestalt/src/Dropdown/OptionItem.tsx
@@ -1,5 +1,6 @@
 import { forwardRef, Fragment, ReactNode } from 'react';
 import classnames from 'classnames';
+import AccessibilityOpenNewTab from '../accessibility/AccessibilityOpenNewTab';
 import { useRequestAnimationFrame } from '../animation/RequestAnimationFrameContext';
 import Badge from '../Badge';
 import Box from '../Box';
@@ -155,16 +156,14 @@ const OptionItemWithForwardRef = forwardRef<HTMLElement | null | undefined, Prop
         </Box>
         {isExternal && (
           <Box
-            // aria-hidden is required to prevent assistive technologies from accessing the icon as the actual link already announces that the link opens a new tab
             alignItems="center"
-            aria-hidden
             color="transparent"
             display="flex"
             justifyContent="center"
             // marginStart is for spacing relative to Badge, should not be moved to parent Flex's gap
             marginStart={2}
           >
-            <Icon accessibilityLabel="" color={textColor} icon="visit" size={12} />
+            <AccessibilityOpenNewTab color={textColor} size={12} />
           </Box>
         )}
       </Flex>

diff --git a/packages/gestalt/src/DropdownLink.jsdom.test.tsx b/packages/gestalt/src/DropdownLink.jsdom.test.tsx
@@ -57,9 +57,9 @@ describe('Dropdown.Link', () => {
     // eslint-disable-next-line testing-library/prefer-presence-queries -- Please fix the next time this file is touched!
     expect(screen.queryByText('Beta Badge')).toBeInTheDocument();
     expect(
-      screen.queryByText('; Opens a new tab', {
+      screen.queryByTitle(', Opens a new tab', {
         exact: true,
       }),
-    ).toBeVisible();
+    ).not.toBeVisible();
   });
 });
diff --git a/packages/gestalt/src/HelpButton.jsdom.test.tsx b/packages/gestalt/src/HelpButton.jsdom.test.tsx
@@ -156,7 +156,7 @@ describe('HelpButton', () => {
 
     const element = screen.getByRole('link');
     // @ts-expect-error - TS2339 - Property 'text' does not exist on type 'HTMLElement'.
-    expect(element.text).toEqual('New link text; Opens a new tab');
+    expect(element.text).toEqual('New link text');
   });
 
   it('renders a link spying the link trigger', () => {

diff --git a/packages/gestalt/src/Link.jsdom.test.tsx b/packages/gestalt/src/Link.jsdom.test.tsx
@@ -40,10 +40,10 @@ describe('Link', () => {
     ).toBeVisible();
 
     expect(
-      screen.getByText('; Opens a new tab', {
+      screen.getByTitle(', Opens a new tab', {
         exact: true,
       }),
-    ).toBeVisible();
+    ).not.toBeVisible();
 
     render(
       <Link

diff --git a/packages/gestalt/src/Link.tsx b/packages/gestalt/src/Link.tsx
@@ -8,8 +8,8 @@ import {
   useRef,
 } from 'react';
 import classnames from 'classnames';
+import AccessibilityOpenNewTab from './accessibility/AccessibilityOpenNewTab';
 import getAriaLabel from './accessibility/getAriaLabel';
-import NewTabAccessibilityLabel from './accessibility/NewTabAccessibilityLabel';
 import Box from './Box';
 import { useDefaultLabelContext } from './contexts/DefaultLabelProvider';
 import { useGlobalEventsHandlerContext } from './contexts/GlobalEventsHandlerProvider';
@@ -44,24 +44,6 @@ type ExternalLinkIcon =
       size: ComponentProps<typeof Text>['size'];
     };
 
-function ExternalIcon({ externalLinkIcon }: { externalLinkIcon: ExternalLinkIcon }) {
-  return externalLinkIcon === 'none' ? null : (
-    <Box aria-hidden display="inlineBlock" marginStart={1}>
-      <Icon
-        accessibilityLabel=""
-        color={externalLinkIcon === 'default' ? 'default' : externalLinkIcon?.color ?? 'default'}
-        icon="visit"
-        inline
-        size={
-          externalLinkIcon === 'default'
-            ? externalLinkIconMap['300']
-            : externalLinkIconMap[externalLinkIcon?.size ?? '300']
-        }
-      />
-    </Box>
-  );
-}
-
 type Rounding = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 'circle' | 'pill';
 
 type Props = {
@@ -289,8 +271,20 @@ const LinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(function Link(
       target={target ? `_${target}` : null}
     >
       {children}
-      <NewTabAccessibilityLabel target={target} />
-      <ExternalIcon externalLinkIcon={externalLinkIcon} />
+      {externalLinkIcon === 'none' ? null : (
+        <Box display="inlineBlock" marginStart={1}>
+          <AccessibilityOpenNewTab
+            color={
+              externalLinkIcon === 'default' ? 'default' : externalLinkIcon?.color ?? 'default'
+            }
+            size={
+              externalLinkIcon === 'default'
+                ? externalLinkIconMap['300']
+                : externalLinkIconMap[externalLinkIcon?.size ?? '300']
+            }
+          />
+        </Box>
+      )}
     </a>
   );
 });

diff --git a/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap b/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap
@@ -719,34 +719,25 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
                       />
                     </div>
                     <div
-                      aria-hidden="true"
                       class="box justifyCenter marginStart2 transparent xsDisplayFlex xsItemsCenter"
                     >
                       <svg
-                        aria-hidden="true"
-                        aria-label=""
-                        class="rtlSupport default icon iconBlock"
+                        class="rtlSupport default icon"
                         height="12"
                         role="img"
                         viewBox="0 0 24 24"
                         width="12"
                       >
+                        <title>
+                          , 
+                          Opens a new tab
+                        </title>
                         <path
                           d="test-file-stub"
                         />
                       </svg>
                     </div>
                   </div>
-                  <div
-                    class="box relative"
-                    style="display: inline;"
-                  >
-                    <div
-                      class="box xsDisplayVisuallyHidden"
-                    >
-                      ; Opens a new tab
-                    </div>
-                  </div>
                 </a>
               </div>
             </div>
@@ -892,34 +883,25 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
                       />
                     </div>
                     <div
-                      aria-hidden="true"
                       class="box justifyCenter marginStart2 transparent xsDisplayFlex xsItemsCenter"
                     >
                       <svg
-                        aria-hidden="true"
-                        aria-label=""
-                        class="rtlSupport default icon iconBlock"
+                        class="rtlSupport default icon"
                         height="12"
                         role="img"
                         viewBox="0 0 24 24"
                         width="12"
                       >
+                        <title>
+                          , 
+                          Opens a new tab
+                        </title>
                         <path
                           d="test-file-stub"
                         />
                       </svg>
                     </div>
                   </div>
-                  <div
-                    class="box relative"
-                    style="display: inline;"
-                  >
-                    <div
-                      class="box xsDisplayVisuallyHidden"
-                    >
-                      ; Opens a new tab
-                    </div>
-                  </div>
                 </a>
               </div>
             </div>
@@ -969,34 +951,25 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
                       />
                     </div>
                     <div
-                      aria-hidden="true"
                       class="box justifyCenter marginStart2 transparent xsDisplayFlex xsItemsCenter"
                     >
                       <svg
-                        aria-hidden="true"
-                        aria-label=""
-                        class="rtlSupport default icon iconBlock"
+                        class="rtlSupport default icon"
                         height="12"
                         role="img"
                         viewBox="0 0 24 24"
                         width="12"
                       >
+                        <title>
+                          , 
+                          Opens a new tab
+                        </title>
                         <path
                           d="test-file-stub"
                         />
                       </svg>
                     </div>
                   </div>
-                  <div
-                    class="box relative"
-                    style="display: inline;"
-                  >
-                    <div
-                      class="box xsDisplayVisuallyHidden"
-                    >
-                      ; Opens a new tab
-                    </div>
-                  </div>
                 </a>
               </div>
             </div>

diff --git a/packages/gestalt/src/__snapshots__/Link.test.tsx.snap b/packages/gestalt/src/__snapshots__/Link.test.tsx.snap
@@ -40,18 +40,19 @@ exports[`external link with nofollow 1`] = `
 >
   Link
   <div
-    aria-hidden={true}
     className="box marginStart1 xsDisplayInlineBlock"
   >
     <svg
-      aria-hidden={true}
-      aria-label=""
       className="rtlSupport default icon"
       height={16}
       role="img"
       viewBox="0 0 24 24"
       width={16}
     >
+      <title>
+        , 
+        Opens a new tab
+      </title>
       <path
         d="test-file-stub"
       />
@@ -162,20 +163,6 @@ exports[`target blank 1`] = `
   target="_blank"
 >
   Link
-  <div
-    className="box relative"
-    style={
-      Object {
-        "display": "inline",
-      }
-    }
-  >
-    <div
-      className="box xsDisplayVisuallyHidden"
-    >
-      ; Opens a new tab
-    </div>
-  </div>
 </a>
 `;
 

diff --git a/packages/gestalt/src/accessibility/AccessibilityOpenNewTab.tsx b/packages/gestalt/src/accessibility/AccessibilityOpenNewTab.tsx
@@ -0,0 +1,23 @@
+import { ComponentProps } from 'react';
+import classnames from 'classnames';
+import { useDefaultLabelContext } from '../contexts/DefaultLabelProvider';
+import Icon from '../Icon';
+import styles from '../Icon.css';
+import icons from '../icons/index';
+
+type Props = {
+  color: ComponentProps<typeof Icon>['color'];
+  size: ComponentProps<typeof Icon>['size'];
+};
+
+export default function AccessibilityOpenNewTab({ size, color }: Props) {
+  const cs = classnames(styles.rtlSupport, styles[color ?? 'default'], styles.icon);
+  const { accessibilityNewTabLabel } = useDefaultLabelContext('Link');
+
+  return (
+    <svg className={cs} height={size} role="img" viewBox="0 0 24 24" width={size}>
+      <title>, {accessibilityNewTabLabel}</title>
+      <path d={icons.visit} />
+    </svg>
+  );
+}