only set aria-describedby when tooltip visible

Author: aojunhao123

src/Tooltip.tsx

@@ -4,7 +4,7 @@ import type { ActionType, AlignType } from '@rc-component/trigger/lib/interface'
 import useId from '@rc-component/util/lib/hooks/useId';
 import { clsx } from 'clsx';
 import * as React from 'react';
-import { useImperativeHandle, useRef, useEffect, useCallback } from 'react';
+import { useImperativeHandle, useRef, useState } from 'react';
 import { placements } from './placements';
 import Popup from './Popup';
 
@@ -90,55 +90,22 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
 
   const extraProps: Partial<TooltipProps & TriggerProps> = { ...restProps };
 
-  if ('visible' in props) {
+  const isControlled = 'visible' in props;
+
+  if (isControlled) {
     extraProps.popupVisible = props.visible;
   }
 
-  const isControlled = 'visible' in props;
-  const mergedVisible = props.visible;
-  const [popupMounted, setPopupMounted] = React.useState(() => {
-    if (forceRender) {
-      return true;
-    }
-    if (isControlled) {
-      return mergedVisible;
-    }
-    return defaultVisible;
-  });
-
-  const updatePopupMounted = useCallback(
-    (nextVisible: boolean) => {
-      setPopupMounted((prev) => {
-        if (nextVisible) {
-          return true;
-        }
-
-        if (destroyOnHidden) {
-          return false;
-        }
-
-        return prev;
-      });
-    },
-    [destroyOnHidden],
-  );
+  const [innerVisible, setInnerVisible] = useState(() => defaultVisible || false);
+  const mergedVisible = isControlled ? props.visible : innerVisible;
 
   const handleVisibleChange = (nextVisible: boolean) => {
-    updatePopupMounted(nextVisible);
+    if (!isControlled) {
+      setInnerVisible(nextVisible);
+    }
     onVisibleChange?.(nextVisible);
   };
 
-  useEffect(() => {
-    if (forceRender) {
-      setPopupMounted(true);
-      return;
-    }
-
-    if (isControlled) {
-      updatePopupMounted(mergedVisible);
-    }
-  }, [forceRender, isControlled, mergedVisible, updatePopupMounted]);
-
   // ========================= Arrow ==========================
   // Process arrow configuration
   const mergedArrow = React.useMemo(() => {
@@ -164,7 +131,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     const originalProps = child?.props || {};
     const childProps = {
       ...originalProps,
-      'aria-describedby': overlay && popupMounted ? mergedId : null,
+      'aria-describedby': overlay && mergedVisible ? mergedId : null,
     };
     return React.cloneElement<any>(children, childProps) as any;
   };

tests/index.test.tsx

@@ -502,7 +502,7 @@ describe('rc-tooltip', () => {
   });
 
   describe('children handling', () => {
-    it('should only set aria-describedby once popup is mounted', async () => {
+    it('should toggle aria-describedby with visibility', async () => {
       const { container } = render(
         <Tooltip trigger={['click']} overlay="tooltip content">
           <button>Click me</button>
@@ -519,7 +519,7 @@ describe('rc-tooltip', () => {
 
       fireEvent.click(btn);
       await waitFakeTimers();
-      expect(btn).toHaveAttribute('aria-describedby', describedby);
+      expect(btn).not.toHaveAttribute('aria-describedby');
     });
 
     it('should not pass aria-describedby when overlay is empty', () => {
@@ -542,17 +542,22 @@ describe('rc-tooltip', () => {
       expect(container.querySelector('button')).toHaveAttribute('aria-describedby');
     });
 
-    it('should set aria-describedby immediately when forceRender is true', () => {
+    it('should only set aria-describedby for forceRender after visible', async () => {
       const { container } = render(
-        <Tooltip forceRender overlay="tooltip content">
+        <Tooltip forceRender trigger={['click']} overlay="tooltip content">
           <button>Click me</button>
         </Tooltip>,
       );
 
-      expect(container.querySelector('button')).toHaveAttribute('aria-describedby');
+      const btn = container.querySelector('button');
+      expect(btn).not.toHaveAttribute('aria-describedby');
+
+      fireEvent.click(btn);
+      await waitFakeTimers();
+      expect(btn).toHaveAttribute('aria-describedby');
     });
 
-    it('should keep aria-describedby when controlled hidden without destroy', () => {
+    it('should remove aria-describedby when controlled hidden without destroy', () => {
       const overlay = 'tooltip content';
       const { container, rerender } = render(
         <Tooltip overlay={overlay} visible>
@@ -568,7 +573,7 @@ describe('rc-tooltip', () => {
         </Tooltip>,
       );
 
-      expect(container.querySelector('button')).toHaveAttribute('aria-describedby');
+      expect(container.querySelector('button')).not.toHaveAttribute('aria-describedby');
     });
 
     it('should remove aria-describedby when popup is destroyed on hide', async () => {