feat(a11y): add screen reader support for Tooltip

package.json

@@ -43,7 +43,8 @@
   "dependencies": {
     "@babel/runtime": "^7.11.2",
     "@rc-component/trigger": "^2.0.0",
-    "classnames": "^2.3.1"
+    "classnames": "^2.3.1",
+    "rc-util": "^5.44.3"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.0",
@@ -69,4 +70,4 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   }
-}
+}

src/Tooltip.tsx

@@ -1,11 +1,12 @@
 import type { ArrowType, TriggerProps, TriggerRef } from '@rc-component/trigger';
 import Trigger from '@rc-component/trigger';
 import type { ActionType, AlignType, AnimationType } from '@rc-component/trigger/lib/interface';
+import classNames from 'classnames';
 import * as React from 'react';
-import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { forwardRef, useImperativeHandle, useRef, cloneElement } from 'react';
 import { placements } from './placements';
 import Popup from './Popup';
-import classNames from 'classnames';
+import useId from 'rc-util/lib/hooks/useId';
 
 export interface TooltipProps
   extends Pick<
@@ -60,7 +61,7 @@ export interface TooltipClassNames {
   body?: string;
 }
 
-export interface TooltipRef extends TriggerRef {}
+export interface TooltipRef extends TriggerRef { }
 
 const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
   const {
@@ -91,7 +92,9 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
     ...restProps
   } = props;
 
+  const mergedId = useId(id);
   const triggerRef = useRef<TriggerRef>(null);
+
   useImperativeHandle(ref, () => triggerRef.current);
 
   const extraProps: Partial<TooltipProps & TriggerProps> = { ...restProps };
@@ -103,14 +106,29 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
     <Popup
       key="content"
       prefixCls={prefixCls}
-      id={id}
+      id={mergedId}
       bodyClassName={tooltipClassNames?.body}
       overlayInnerStyle={{ ...overlayInnerStyle, ...tooltipStyles?.body }}
     >
       {overlay}
     </Popup>
   );
 
+  const getChildren = () => {
+    if (!React.isValidElement(children)) {
+      return <span>{children}</span>;
+    }
+
+    const originalProps = (children as React.ReactElement)?.props || {};
+
+    const childProps = {
+      ...originalProps,
+      'aria-describedby': overlay ? mergedId : null,
+    };
+
+    return React.cloneElement(children, childProps);
+  };
+
   return (
     <Trigger
       popupClassName={classNames(overlayClassName, tooltipClassNames?.root)}
@@ -135,7 +153,7 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
       arrow={showArrow}
       {...extraProps}
     >
-      {children}
+      {getChildren()}
     </Trigger>
   );
 };

tests/index.test.tsx

@@ -279,4 +279,35 @@ describe('rc-tooltip', () => {
     expect(tooltipElement.style.backgroundColor).toBe('blue');
     expect(tooltipBodyElement.style.color).toBe('red');
   });
+
+  it('should wrap invalid children with span', () => {
+    const { container } = render(
+      // @ts-expect-error
+      <Tooltip overlay="tip">
+        plain text
+      </Tooltip>,
+    );
+
+    const span = container.querySelector('span');
+    expect(span).toBeTruthy();
+    expect(span.textContent).toBe('plain text');
+  });
+
+  it('should handle null and false children', () => {
+    const { container: container1 } = render(
+      <Tooltip overlay="tip">
+        {null}
+      </Tooltip>,
+    );
+    expect(container1.querySelector('span')).toBeTruthy();
+
+    const { container: container2 } = render(
+      <Tooltip overlay="tip">
+        {/* @ts-expect-error */}
+        {false}
+      </Tooltip>,
+    );
+    expect(container2.querySelector('span')).toBeTruthy();
+  });
 });
+

tests/setup.js

@@ -11,7 +11,7 @@ if (typeof window !== 'undefined') {
     global.window.innerHeight = height || global.window.innerHeight;
     global.window.dispatchEvent(new Event('resize'));
   };
-  global.window.scrollTo = () => {};
+  global.window.scrollTo = () => { };
   // ref: https://github.com/ant-design/ant-design/issues/18774
   if (!window.matchMedia) {
     Object.defineProperty(global.window, 'matchMedia', {