feat: better a11y (#509)

* chore: add @testing-library/jest-dom as a dev dependency and update tsconfig types

* feat: improve a11y

* fix test

* update

* update

* fix badge urls

* only set aria-describedby when tooltip visible

* remove unused urls

* use renderProps

* clean code

* chore: adjust

* chore: clean up

---------

Co-authored-by: 二货机器人 <smith3816@gmail.com>

Author: aojunhao123

README.md

@@ -1,4 +1,4 @@
-# rc-tooltip
+# @rc-component/tooltip
 
 React Tooltip
 
@@ -9,18 +9,16 @@ React Tooltip
 [![bundle size][bundlephobia-image]][bundlephobia-url]
 [![dumi][dumi-image]][dumi-url]
 
-[npm-image]: http://img.shields.io/npm/v/rc-tooltip.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/rc-tooltip
-[travis-image]: https://img.shields.io/travis/react-component/tooltip/master?style=flat-square
-[travis-url]: https://travis-ci.com/react-component/tooltip
+[npm-image]: http://img.shields.io/npm/v/@rc-component/tooltip.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/@rc-component/tooltip
 [github-actions-image]: https://github.com/react-component/tooltip/actions/workflows/react-component-ci.yml/badge.svg
 [github-actions-url]: https://github.com/react-component/tooltip/actions/workflows/react-component-ci.yml
 [codecov-image]: https://img.shields.io/codecov/c/github/react-component/tooltip/master.svg?style=flat-square
 [codecov-url]: https://app.codecov.io/gh/react-component/tooltip
-[download-image]: https://img.shields.io/npm/dm/rc-tooltip.svg?style=flat-square
-[download-url]: https://npmjs.org/package/rc-tooltip
-[bundlephobia-url]: https://bundlephobia.com/package/rc-tooltip
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-tooltip
+[download-image]: https://img.shields.io/npm/dm/@rc-component/tooltip.svg?style=flat-square
+[download-url]: https://npmjs.org/package/@rc-component/tooltip
+[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/tooltip
+[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/tooltip
 [dumi-url]: https://github.com/umijs/dumi
 [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
 
@@ -36,18 +34,18 @@ React Tooltip
 
 ## Install
 
-[![rc-tooltip](https://nodei.co/npm/rc-tooltip.png)](https://npmjs.org/package/rc-tooltip)
+[![@rc-component/tooltip](https://nodei.co/npm/@rc-component/tooltip.png)](https://npmjs.org/package/@rc-component/tooltip)
 
 ## Usage
 
 ```js
-var Tooltip = require('rc-tooltip');
+var Tooltip = require('@rc-component/tooltip');
 var React = require('react');
 var ReactDOM = require('react-dom');
 
 // By default, the tooltip has no style.
 // Consider importing the stylesheet it comes with:
-// 'rc-tooltip/assets/bootstrap_white.css'
+// '@rc-component/tooltip/assets/bootstrap_white.css'
 
 ReactDOM.render(
   <Tooltip placement="left" trigger={['click']} overlay={<span>tooltip</span>}>
@@ -135,4 +133,4 @@ npm run coverage
 
 ## License
 
-`rc-tooltip` is released under the MIT license.
+`@rc-component/tooltip` is released under the MIT license.

package.json

@@ -41,13 +41,14 @@
     "test": "rc-test"
   },
   "dependencies": {
-    "@rc-component/trigger": "^3.6.15",
+    "@rc-component/trigger": "^3.7.1",
     "@rc-component/util": "^1.3.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.1",
     "@rc-component/np": "^1.0.3",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.4.0",
     "@types/node": "^22.15.18",

src/Tooltip.tsx

@@ -16,13 +16,13 @@ export interface TooltipProps
     | 'onPopupAlign'
     | 'builtinPlacements'
     | 'fresh'
-    | 'children'
     | 'mouseLeaveDelay'
     | 'mouseEnterDelay'
     | 'prefixCls'
     | 'forceRender'
     | 'popupVisible'
   > {
+  children: React.ReactElement;
   // Style
   classNames?: Partial<Record<SemanticName, string>>;
   styles?: Partial<Record<SemanticName, React.CSSProperties>>;
@@ -113,14 +113,12 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
   }, [showArrow, classNames?.arrow, styles?.arrow, arrowContent]);
 
   // ======================== Children ========================
-  const getChildren = () => {
+  const getChildren: TriggerProps['children'] = ({ open }) => {
     const child = React.Children.only(children);
-    const originalProps = child?.props || {};
-    const childProps = {
-      ...originalProps,
-      'aria-describedby': overlay ? mergedId : null,
+    const ariaProps: React.AriaAttributes = {
+      'aria-describedby': overlay && open ? mergedId : undefined,
     };
-    return React.cloneElement<any>(children, childProps) as any;
+    return React.cloneElement(child, ariaProps);
   };
 
   // ========================= Render =========================
@@ -158,7 +156,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
       uniqueContainerStyle={styles?.uniqueContainer}
       {...extraProps}
     >
-      {getChildren()}
+      {getChildren}
     </Trigger>
   );
 });

tests/index.test.tsx

@@ -502,19 +502,28 @@ describe('rc-tooltip', () => {
   });
 
   describe('children handling', () => {
-    it('should pass aria-describedby to child element when overlay exists', () => {
+    it('should set aria-describedby immediately when defaultVisible is true', () => {
       const { container } = render(
-        <Tooltip id="test-id" overlay="tooltip content">
+        <Tooltip defaultVisible overlay="tooltip content">
           <button>Click me</button>
         </Tooltip>,
       );
 
-      expect(container.querySelector('button')).toHaveAttribute('aria-describedby', 'test-id');
+      expect(container.querySelector('button')).toHaveAttribute('aria-describedby');
     });
 
-    it('should not pass aria-describedby when overlay is empty', () => {
-      const { container } = render(
-        <Tooltip id="test-id" overlay={null}>
+    it('should remove aria-describedby when controlled hidden', () => {
+      const overlay = 'tooltip content';
+      const { container, rerender } = render(
+        <Tooltip overlay={overlay} visible>
+          <button>Click me</button>
+        </Tooltip>,
+      );
+
+      expect(container.querySelector('button')).toHaveAttribute('aria-describedby');
+
+      rerender(
+        <Tooltip overlay={overlay} visible={false}>
           <button>Click me</button>
         </Tooltip>,
       );

tsconfig.json

@@ -7,6 +7,7 @@
     "declaration": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
+    "types": ["@testing-library/jest-dom"],
     "paths": {
       "@/*": [
         "src/*"