feat(a11y): add screen reader support for Tooltip

package.json

@@ -43,11 +43,14 @@
   "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",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.4.0",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
@@ -69,4 +72,4 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   }
-}
+}

src/Popup.tsx

@@ -16,15 +16,17 @@ export default function Popup(props: ContentProps) {
     props;
 
   return (
-    <div className={classNames(`${prefixCls}-content`, className)} style={style}>
-      <div
-        className={classNames(`${prefixCls}-inner`, bodyClassName)}
-        id={id}
-        role="tooltip"
-        style={innerStyle}
-      >
-        {typeof children === 'function' ? children() : children}
+    <>
+      <div className={classNames(`${prefixCls}-content`, className)} style={style}>
+        <div
+          id={id}
+          role="tooltip"
+          className={classNames(`${prefixCls}-inner`, bodyClassName)}
+          style={innerStyle}
+        >
+          {typeof children === 'function' ? children() : children}
+        </div>
       </div>
-    </div>
+    </>
   );
 }

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,9 +61,11 @@ export interface TooltipClassNames {
   body?: string;
 }
 
-export interface TooltipRef extends TriggerRef {}
+export interface TooltipRef extends TriggerRef { }
 
 const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
+  const defaultId = useId();
+
   const {
     overlayClassName,
     trigger = ['hover'],
@@ -84,7 +87,7 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
     overlayInnerStyle,
     arrowContent,
     overlay,
-    id,
+    id = defaultId,
     showArrow = true,
     classNames: tooltipClassNames,
     styles: tooltipStyles,
@@ -111,6 +114,17 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
     </Popup>
   );
 
+  const getChildren = () => {
+    const originalProps = (children as React.ReactElement)?.props || {};
+
+    const childProps = {
+      ...originalProps,
+      'aria-describedby': overlay ? id : null,
+    };
+
+    return cloneElement(children, childProps);
+  };
+
   return (
     <Trigger
       popupClassName={classNames(overlayClassName, tooltipClassNames?.root)}
@@ -135,7 +149,7 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
       arrow={showArrow}
       {...extraProps}
     >
-      {children}
+      {getChildren()}
     </Trigger>
   );
 };

tests/popup.test.tsx

@@ -1,4 +1,4 @@
-import { Popup } from '../src';
+import Popup from '../src/Popup';
 
 describe('Popup', () => {
   // Used in antd for C2D2C

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', {