fix(Tooltip): added aria attributes for triggerRef (#11953)

Co-authored-by: Eric Olkowski <[email protected]>

Author: thatblindgeye

packages/react-core/src/components/Tooltip/Tooltip.tsx

@@ -174,6 +174,75 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   const [visible, setVisible] = useState(false);
   const popperRef = createRef<HTMLDivElement>();
 
+  const getTriggerRefElement = (): HTMLElement | null => {
+    if (typeof triggerRef === 'function') {
+      return triggerRef();
+    } else if (triggerRef && typeof triggerRef === 'object' && 'current' in triggerRef) {
+      return triggerRef.current;
+    } else if (triggerRef instanceof HTMLElement) {
+      return triggerRef;
+    }
+    return null;
+  };
+
+  const getAriaAttributeName = () => (aria !== 'none' ? `aria-${aria}` : null);
+
+  const addAriaToRefElement = (element: HTMLElement): void => {
+    const attributeName = getAriaAttributeName();
+    if (!element || !attributeName) {
+      return;
+    }
+
+    const existingAria = element.getAttribute(attributeName);
+    if (!existingAria || !existingAria.includes(id)) {
+      const newAria = existingAria ? `${existingAria} ${id}` : id;
+      element.setAttribute(attributeName, newAria);
+    }
+  };
+
+  const removeAriaFromRefElement = (element: HTMLElement): void => {
+    const attributeName = getAriaAttributeName();
+    if (!element || !attributeName) {
+      return;
+    }
+
+    const existingAria = element.getAttribute(attributeName);
+    if (!existingAria) {
+      return;
+    }
+    const newAria = existingAria.replace(new RegExp(`\\b${id}\\b`, 'g'), '').trim();
+    if (newAria) {
+      element.setAttribute(attributeName, newAria);
+    } else {
+      element.removeAttribute(attributeName);
+    }
+  };
+
+  const updateTriggerElementAria = (shouldAddAria: boolean): void => {
+    if (aria === 'none' || !triggerRef || children) {
+      return;
+    }
+
+    const triggerElement = getTriggerRefElement();
+    if (!triggerElement) {
+      return;
+    }
+
+    if (shouldAddAria) {
+      addAriaToRefElement(triggerElement);
+    } else {
+      removeAriaFromRefElement(triggerElement);
+    }
+  };
+
+  useEffect(() => {
+    updateTriggerElementAria(visible);
+
+    return () => {
+      updateTriggerElementAria(false);
+    };
+  }, [visible, aria, triggerRef, children, id]);
+
   const onDocumentKeyDown = (event: KeyboardEvent) => {
     if (!triggerManually) {
       if (event.key === KeyTypes.Escape && visible) {
@@ -258,8 +327,12 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
     }
   };
 
-  const addAriaToTrigger = () => {
-    if (aria === 'describedby' && children && children.props && !children.props['aria-describedby']) {
+  const addAriaToChildren = () => {
+    if (!children) {
+      return;
+    }
+
+    if (aria === 'describedby' && children.props && !children.props['aria-describedby']) {
       return cloneElement(children, { 'aria-describedby': id });
     } else if (aria === 'labelledby' && children.props && !children.props['aria-labelledby']) {
       return cloneElement(children, { 'aria-labelledby': id });
@@ -269,7 +342,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
 
   return (
     <Popper
-      trigger={aria !== 'none' && visible ? addAriaToTrigger() : children}
+      trigger={aria !== 'none' && visible ? addAriaToChildren() : children}
       triggerRef={triggerRef}
       popper={content}
       popperRef={popperRef}

packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx

@@ -204,3 +204,129 @@ test('Matches snapshot', async () => {
   const tooltip = await screen.findByRole('tooltip');
   expect(tooltip).toMatchSnapshot();
 });
+
+test('Applies aria-describedby to triggerRef element when no children are provided', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  render(
+    <>
+      <button ref={triggerRef}>Trigger</button>
+      <Tooltip id="trigger-ref-test" triggerRef={triggerRef} isVisible content="Test description" />
+    </>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleDescription('Test description');
+});
+
+test('Applies aria-labelledby to triggerRef element when no children are provided', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  render(
+    <>
+      <button ref={triggerRef}>Trigger</button>
+      <Tooltip id="trigger-ref-test" aria="labelledby" triggerRef={triggerRef} isVisible content="Test label" />
+    </>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleName('Test label');
+});
+
+test('Removes aria-describedby from triggerRef element when tooltip is hidden', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  const TooltipTest = () => {
+    const [isVisible, setIsVisible] = useState(true);
+
+    return (
+      <>
+        <button ref={triggerRef} onClick={() => setIsVisible(!isVisible)}>
+          Trigger
+        </button>
+        <Tooltip id="trigger-ref-test" triggerRef={triggerRef} isVisible={isVisible} content="Test description" />
+      </>
+    );
+  };
+
+  render(<TooltipTest />);
+
+  // Tooltip should be visible initially
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleDescription('Test description');
+
+  // Hide tooltip
+  const user = userEvent.setup();
+  await user.click(triggerRef.current);
+
+  // aria-describedby should be removed
+  expect(triggerRef.current).not.toHaveAccessibleDescription();
+});
+
+test('Removes aria-labelledby from triggerRef element when tooltip is hidden', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  const TooltipTest = () => {
+    const [isVisible, setIsVisible] = useState(true);
+
+    return (
+      <>
+        <button ref={triggerRef} onClick={() => setIsVisible(!isVisible)} />
+        <Tooltip
+          aria="labelledby"
+          id="trigger-ref-test"
+          triggerRef={triggerRef}
+          isVisible={isVisible}
+          content="Test label"
+        />
+      </>
+    );
+  };
+
+  render(<TooltipTest />);
+
+  // Tooltip should be visible initially
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleName('Test label');
+
+  // Hide tooltip
+  const user = userEvent.setup();
+  await user.click(triggerRef.current);
+
+  // aria-describedby should be removed
+  expect(triggerRef.current).not.toHaveAccessibleName();
+});
+
+test('Preserves existing aria-describedby on triggerRef element', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  render(
+    <>
+      <div id="existing-aria">Existing description</div>
+      <button ref={triggerRef} aria-describedby="existing-aria">
+        Trigger
+      </button>
+      <Tooltip id="trigger-ref-test" triggerRef={triggerRef} isVisible content="Test description" />
+    </>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleDescription('Existing description Test description');
+});
+
+test('Preserves existing aria-labelledby on triggerRef element', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  render(
+    <>
+      <div id="existing-aria">Existing label</div>
+      <button ref={triggerRef} aria-labelledby="existing-aria">
+        Trigger
+      </button>
+      <Tooltip aria="labelledby" id="trigger-ref-test" triggerRef={triggerRef} isVisible content="Test label" />
+    </>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleName('Existing label Test label');
+});