Skip to content

feat: better a11y #509

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zombieJ merged 12 commits into from
Nov 28, 2025
+35 −28
Merged

feat: better a11y #509

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
dece1b0
chore: add @testing-library/jest-dom as a dev dependency and update t…
aojunhao123 Nov 24, 2025
b7388d4
feat: improve a11y
aojunhao123 Nov 24, 2025
2a4f330
fix test
aojunhao123 Nov 25, 2025
625204d
update
aojunhao123 Nov 25, 2025
e081d1b
update
aojunhao123 Nov 25, 2025
3c7e909
fix badge urls
aojunhao123 Nov 25, 2025
095b9cb
only set aria-describedby when tooltip visible
aojunhao123 Nov 27, 2025
e505c88
remove unused urls
aojunhao123 Nov 27, 2025
fe2e017
use renderProps
aojunhao123 Nov 27, 2025
403dd52
clean code
aojunhao123 Nov 27, 2025
e1082bf
chore: adjust
zombieJ Nov 27, 2025
ac227c5
chore: clean up
zombieJ Nov 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 11 additions & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# rc-tooltip
# @rc-component/tooltip

React Tooltip

Expand All @@ -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

Expand All @@ -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>}>
Expand Down Expand Up @@ -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.
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"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",
Expand Down
16 changes: 8 additions & 8 deletions src/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>>;
Expand Down Expand Up @@ -79,6 +79,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
showArrow = true,
classNames,
styles,
forceRender,
...restProps
} = props;

Expand Down Expand Up @@ -113,14 +114,12 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
}, [showArrow, classNames?.arrow, styles?.arrow, arrowContent]);

// ======================== Children ========================
const getChildren = () => {
const getChildren = (open: boolean) => {
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 =========================
Expand Down Expand Up @@ -149,6 +148,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
afterOpenChange={afterVisibleChange}
popupMotion={motion}
defaultPopupVisible={defaultVisible}
forceRender={forceRender}
Copy link
Member

@zombieJ zombieJ Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个你已经不消费了，还原给解构填入吧

autoDestroy={destroyOnHidden}
mouseLeaveDelay={mouseLeaveDelay}
popupStyle={styles?.root}
Expand All @@ -158,7 +158,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
uniqueContainerStyle={styles?.uniqueContainer}
{...extraProps}
>
{getChildren()}
{({ open }) => getChildren(open)}
Copy link
Member

@zombieJ zombieJ Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里不用额外的函数，因为本来就支持 renderProps 了

</Trigger>
);
});
Expand Down
21 changes: 15 additions & 6 deletions tests/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>,
);
Expand Down
1 change: 1 addition & 0 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"declaration": true,
"skipLibCheck": true,
"esModuleInterop": true,
"types": ["@testing-library/jest-dom"],
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

By adding the types property, you override TypeScript's default type inclusion. This means that other ambient type definitions, like for Jest (jest) and Node.js (node), will no longer be automatically included, which will likely break your build. You need to explicitly list all required ambient types.1

Suggested change
"types": ["@testing-library/jest-dom"],
"types": ["jest", "node", "@testing-library/jest-dom"],

Rules References

Footnotes

  1. When using the compilerOptions.types property in tsconfig.json, TypeScript will only include the type definitions for the packages explicitly listed in the array. This overrides the default behavior of automatically including all packages found in node_modules/@types. Therefore, you must list all necessary type definitions, such as jest and node, to avoid compilation errors. ↩

"paths": {
"@/*": [
"src/*"
Expand Down
Loading