feat(Tooltip): add WAI-ARIA role and remove all container query

shervinchen · May 6, 2024 · 88bdb43 · 88bdb43
1 parent d568925
commit 88bdb43
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 27 deletions.
diff --git a/packages/Popover/Popover.tsx b/packages/Popover/Popover.tsx
@@ -81,7 +81,6 @@ const Popover: FC<PropsWithChildren<PopoverProps>> = ({
           style={{
             opacity: stage === 'enter' ? 1 : 0,
           }}
-          data-testid="popover"
         >
           {!hideArrow && <PopoverArrow targetRef={ref} placement={placement} />}
           {content}

diff --git a/packages/Popover/__tests__/Popover.test.tsx b/packages/Popover/__tests__/Popover.test.tsx
@@ -21,7 +21,7 @@ describe('Popover', () => {
         Click me
       </Popover>
     );
-    expect(await screen.findByTestId('popover')).toBeInTheDocument();
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
   });
 
   test('should support custom class name', async () => {
@@ -31,33 +31,33 @@ describe('Popover', () => {
       </Popover>
     );
     await user.click(screen.getByTestId('popoverTarget'));
-    expect(await screen.findByTestId('popover')).toHaveClass('custom-popover');
+    expect(await screen.findByRole('dialog')).toHaveClass('custom-popover');
   });
 
   test('should show popover when click target', async () => {
     render(<Popover content="I am a popover">Click me</Popover>);
     await user.click(screen.getByTestId('popoverTarget'));
-    expect(await screen.findByTestId('popover')).toBeInTheDocument();
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
   });
 
   test('should switch whether or not popover is visible when click target', async () => {
     render(<Popover content="I am a popover">Click me</Popover>);
     const target = screen.getByTestId('popoverTarget');
     await user.click(target);
-    expect(await screen.findByTestId('popover')).toBeInTheDocument();
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
     await user.click(target);
     await waitFor(() => {
-      expect(screen.queryByTestId('popover')).not.toBeInTheDocument();
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
   });
 
   test('should hide popover when click outside', async () => {
     render(<Popover content="I am a popover">Click me</Popover>);
     await user.click(screen.getByTestId('popoverTarget'));
-    expect(await screen.findByTestId('popover')).toBeInTheDocument();
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
     await user.click(document.body);
     await waitFor(() => {
-      expect(screen.queryByTestId('popover')).not.toBeInTheDocument();
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
   });
 
@@ -69,7 +69,7 @@ describe('Popover', () => {
     );
     await user.click(screen.getByTestId('popoverTarget'));
     await waitFor(() => {
-      expect(screen.queryByTestId('popover')).not.toBeInTheDocument();
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
   });
 
@@ -96,7 +96,7 @@ describe('Popover', () => {
       <Component content="I am a controlled popover" onChange={onChange} />
     );
     await user.click(screen.getByTestId('popoverTarget'));
-    expect(await screen.findByTestId('popover')).toBeInTheDocument();
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
@@ -127,10 +127,10 @@ describe('Popover', () => {
         Click me
       </Popover>
     );
-    expect(screen.getByTestId('popover')).toBeInTheDocument();
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
     await user.keyboard(`[${KeyCode.Escape}]`);
     await waitFor(() => {
-      expect(screen.queryByTestId('popover')).not.toBeInTheDocument();
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
   });
 });
diff --git a/packages/Tooltip/Tooltip.tsx b/packages/Tooltip/Tooltip.tsx
@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren, useRef, useState } from 'react';
+import React, { FC, PropsWithChildren, useId, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { TooltipProps } from './Tooltip.types';
 import { useTransition } from '../utils/hooks';
@@ -17,6 +17,7 @@ const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
   children,
   ...restProps
 }) => {
+  const tooltipId = useId();
   const ref = useRef<HTMLDivElement>(null);
   const theme = useTheme();
   const [visible, setVisible] = useState(false);
@@ -33,8 +34,8 @@ const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
     <>
       <div
         data-testid="tooltipTarget"
+        aria-describedby={tooltipId}
         ref={ref}
-        className={classes}
         onMouseEnter={() => mouseHandler(true)}
         onMouseLeave={() => mouseHandler(false)}
         {...restProps}
@@ -51,21 +52,19 @@ const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
         getPopupContainer={getPopupContainer}
       >
         <div
-          className="raw-tooltip-content"
+          role="tooltip"
+          id={tooltipId}
+          className={classes}
           style={{
             opacity: stage === 'enter' ? 1 : 0,
           }}
-          data-testid="tooltipContent"
         >
           {!hideArrow && <TooltipArrow targetRef={ref} placement={placement} />}
           {content}
         </div>
       </Popup>
       <style jsx>{`
         .raw-tooltip {
-          display: inline-flex;
-        }
-        .raw-tooltip-content {
           background-color: ${theme.palette.foreground};
           color: ${theme.palette.background};
           border-radius: 6px;

diff --git a/packages/Tooltip/__tests__/Tooltip.test.tsx b/packages/Tooltip/__tests__/Tooltip.test.tsx
@@ -13,29 +13,30 @@ describe('Tooltip', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('should support custom class name', () => {
-    const { container } = render(
+  test('should support custom class name', async () => {
+    render(
       <Tooltip content="I am a tooltip" className="custom-tooltip">
         Hover me
       </Tooltip>
     );
-    expect(container.firstChild).toHaveClass('custom-tooltip');
+    await user.hover(screen.getByTestId('tooltipTarget'));
+    expect(await screen.findByRole('tooltip')).toHaveClass('custom-tooltip');
   });
 
   test('should show tooltip when mouse over target', async () => {
     render(<Tooltip content="I am a tooltip">Hover me</Tooltip>);
     await user.hover(screen.getByTestId('tooltipTarget'));
-    expect(await screen.findByTestId('tooltipContent')).toBeInTheDocument();
+    expect(await screen.findByRole('tooltip')).toBeInTheDocument();
   });
 
   test('should hide tooltip when mouse out target', async () => {
     render(<Tooltip content="I am a tooltip">Hover me</Tooltip>);
     const target = screen.getByTestId('tooltipTarget');
     await user.hover(target);
-    expect(await screen.findByTestId('tooltipContent')).toBeInTheDocument();
+    expect(await screen.findByRole('tooltip')).toBeInTheDocument();
     await user.unhover(target);
     await waitFor(() => {
-      expect(screen.queryByTestId('tooltipContent')).not.toBeInTheDocument();
+      expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
     });
   });
 
@@ -47,7 +48,7 @@ describe('Tooltip', () => {
     );
     await user.hover(screen.getByTestId('tooltipTarget'));
     await waitFor(() => {
-      expect(screen.queryByTestId('tooltipContent')).not.toBeInTheDocument();
+      expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
     });
   });
 });
diff --git a/packages/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap b/packages/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap
@@ -3,7 +3,8 @@
 exports[`Tooltip should match the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="jsx-1329010130 raw-tooltip"
+    aria-describedby=":r0:"
+    class="jsx-838803725 "
     data-testid="tooltipTarget"
   >
     Hover me