diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 0932329cf8..e12ef25f3f 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,27 @@ tag: vVERSION --- +## 5.23.3 + +`2025-01-28` + +Last version of the Dragon Year, Happy Chinese New Year! 🐲 + +- ⌨️ MISC: Add accessibility tests for all component demos to ensure compliance with accessibility standards. Optimize accessibility support for some components, improving compatibility with screen readers and keyboard operations. [#51372](https://github.com/ant-design/ant-design/pull/51372) [@aojunhao123](https://github.com/aojunhao123) +- 🐞 MISC: Fix importing `antd/dist/reset.css` file issue. [#52559](https://github.com/ant-design/ant-design/pull/52559) [@CaptainVolcom](https://github.com/CaptainVolcom) +- 🐞 Fix Button throwing error when `loading` is `null`. [#52508](https://github.com/ant-design/ant-design/pull/52508) [@li-jia-nan](https://github.com/li-jia-nan) +- 🐞 Fix Table last row border color transition issue. [#52549](https://github.com/ant-design/ant-design/pull/52549) [@DDDDD12138](https://github.com/DDDDD12138) +- 💄 Fix Cascader checkbox cursor style in disabled state. [#52539](https://github.com/ant-design/ant-design/pull/52539) [@aojunhao123](https://github.com/aojunhao123) +- 💄 Fix ConfigProvider not correctly modifying icon style priority when StyleProvider configures `layer`. [#52533](https://github.com/ant-design/ant-design/pull/52533) [@zombieJ](https://github.com/zombieJ) +- 🐞 Fix Layout sidebar toggle button style missing in non-cssVar mode. [#52537](https://github.com/ant-design/ant-design/pull/52537) [@afc163](https://github.com/afc163) +- 🐞 Fix Tree checkbox cursor style in disabled state. [#52525](https://github.com/ant-design/ant-design/pull/52525) [@aojunhao123](https://github.com/aojunhao123) +- notification + - 🐞 Fix notification `useNotification` `closeIcon` configuration not working. [#52516](https://github.com/ant-design/ant-design/pull/52516) [@typenoob](https://github.com/typenoob) + - 🐞 Fix notification component display flicker issue under App component. [#52499](https://github.com/ant-design/ant-design/pull/52499) [@afc163](https://github.com/afc163) +- RTL + - 🐞 Fix Splitter abnormal collapse behavior in RTL mode. [#52501](https://github.com/ant-design/ant-design/pull/52501) [@aojunhao123](https://github.com/aojunhao123) + - 💄 Fix Spin style issue in RTL mode. [#52538](https://github.com/ant-design/ant-design/pull/52538) [@afc163](https://github.com/afc163) + ## 5.23.2 `2025-01-20` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index ed784505e1..975da5748a 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,27 @@ tag: vVERSION --- +## 5.23.3 + +`2025-01-28` + +龙年最后一版，祝各位新春愉快！🐲 + +- ⌨️ MISC: 为所有组件的示例添加了可访问性测试，确保符合无障碍标准。并优化了部分组件的可访问性支持，改进了对屏幕阅读器和键盘操作的兼容性。[#51372](https://github.com/ant-design/ant-design/pull/51372) [@aojunhao123](https://github.com/aojunhao123) +- 🐞 MISC: 修复导入 `antd/dist/reset.css` 文件的问题。[#52559](https://github.com/ant-design/ant-design/pull/52559) [@CaptainVolcom](https://github.com/CaptainVolcom) +- 🐞 修复 Button `loading` 为 `null` 时抛错的问题。[#52508](https://github.com/ant-design/ant-design/pull/52508) [@li-jia-nan](https://github.com/li-jia-nan) +- 🐞 修复 Table 最后一行边框颜色过渡问题。[#52549](https://github.com/ant-design/ant-design/pull/52549) [@DDDDD12138](https://github.com/DDDDD12138) +- 💄 修复 Cascader 组件禁用状态下复选框的鼠标指针样式问题。[#52539](https://github.com/ant-design/ant-design/pull/52539) [@aojunhao123](https://github.com/aojunhao123) +- 💄 修复 ConfigProvider 在 StyleProvider 配置 `layer` 时不会正确修改图标对应样式优先级的问题。[#52533](https://github.com/ant-design/ant-design/pull/52533) [@zombieJ](https://github.com/zombieJ) +- 🐞 修复 Layout 切换侧边栏按钮在非 cssVar 模式下样式丢失的问题。. [#52537](https://github.com/ant-design/ant-design/pull/52537) [@afc163](https://github.com/afc163) +- 🐞 修复 Tree 组件禁用状态下复选框的鼠标指针样式问题。[#52525](https://github.com/ant-design/ant-design/pull/52525) [@aojunhao123](https://github.com/aojunhao123) +- notification + - 🐞 修复 notification `useNotification` 中 `closeIcon` 配置无效的问题。[#52516](https://github.com/ant-design/ant-design/pull/52516) [@typenoob](https://github.com/typenoob) + - 🐞 修复 notification 组件在 App 组件下的显示闪烁问题。[#52499](https://github.com/ant-design/ant-design/pull/52499) [@afc163](https://github.com/afc163) +- RTL + - 🐞 修复 Splitter 在 rtl 模式下折叠行为异常的问题。[#52501](https://github.com/ant-design/ant-design/pull/52501) [@aojunhao123](https://github.com/aojunhao123) + - 💄 修复 Spin 在 rtl 模式下的样式问题。[#52538](https://github.com/ant-design/ant-design/pull/52538) [@afc163](https://github.com/afc163) + ## 5.23.2 `2025-01-20` diff --git a/components/_util/wave/WaveEffect.tsx b/components/_util/wave/WaveEffect.tsx index 542bea3f2b..c47b575b98 100644 --- a/components/_util/wave/WaveEffect.tsx +++ b/components/_util/wave/WaveEffect.tsx @@ -4,7 +4,8 @@ import CSSMotion from 'rc-motion'; import raf from 'rc-util/lib/raf'; import { composeRef } from 'rc-util/lib/ref'; -import { getReactRender, type UnmountType } from '../../config-provider/UnstableContext'; +import { getReactRender } from '../../config-provider/UnstableContext'; +import type { UnmountType } from '../../config-provider/UnstableContext'; import { TARGET_CLS } from './interface'; import type { ShowWaveEffect } from './interface'; import { getTargetWaveColor } from './util'; diff --git a/components/affix/__tests__/a11y.test.ts b/components/affix/__tests__/a11y.test.ts index f8bd0be946..31de84f996 100644 --- a/components/affix/__tests__/a11y.test.ts +++ b/components/affix/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('affix demo a11y', () => { - accessibilityDemoTest('affix'); -}); +accessibilityDemoTest('affix'); diff --git a/components/alert/__tests__/a11y.test.ts b/components/alert/__tests__/a11y.test.ts index 563f233ed3..51912fa342 100644 --- a/components/alert/__tests__/a11y.test.ts +++ b/components/alert/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('alert demo a11y', () => { - accessibilityDemoTest('alert', { disabledRules: ['button-name'] }); -}); +accessibilityDemoTest('alert', { disabledRules: ['button-name'] }); diff --git a/components/anchor/__tests__/a11y.test.ts b/components/anchor/__tests__/a11y.test.ts index 279baa3edd..324ee7d533 100644 --- a/components/anchor/__tests__/a11y.test.ts +++ b/components/anchor/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('anchor demo a11y', () => { - accessibilityDemoTest('anchor'); -}); +accessibilityDemoTest('anchor'); diff --git a/components/app/__tests__/a11y.test.ts b/components/app/__tests__/a11y.test.ts index a7563c3867..6f8c9d2de2 100644 --- a/components/app/__tests__/a11y.test.ts +++ b/components/app/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('app demo a11y', () => { - accessibilityDemoTest('app'); -}); +accessibilityDemoTest('app'); diff --git a/components/auto-complete/__tests__/a11y.test.ts b/components/auto-complete/__tests__/a11y.test.ts new file mode 100644 index 0000000000..1a730fb056 --- /dev/null +++ b/components/auto-complete/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('auto-complete', { + disabledRules: ['label'], + skip: ['render-panel.tsx', 'custom.tsx'], +}); diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index 9151e2f5ce..c4f4f95f06 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -61,8 +61,10 @@ Common props ref：[Common props](/docs/react/common-props) | options | Select options. Will get better perf than jsx definition | { label, value }\[] | - | | | placeholder | The placeholder of input | string | - | | | status | Set validation status | 'error' \| 'warning' | - | 4.19.0 | +| size | The size of the input box | `large` \| `middle` \| `small` | - | | | value | Selected option | string | - | | | variant | Variants of input | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 | +| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 | | onBlur | Called when leaving the component | function() | - | | | onChange | Called when selecting an option or changing an input value | function(value) | - | | | onDropdownVisibleChange | Call when dropdown open | function(open) | - | | @@ -70,6 +72,8 @@ Common props ref：[Common props](/docs/react/common-props) | onSearch | Called when searching items | function(value) | - | | | onSelect | Called when a option is selected. param is option's value and option instance | function(value, option) | - | | | onClear | Called when clear | function | - | 4.6.0 | +| onInputKeyDown | Called when key pressed | (event: KeyboardEvent) => void | - | | +| onPopupScroll | Called when dropdown scrolls | (event: UIEvent) => void | - | | ## Methods diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md index 10dd176f12..e7e0d23f5e 100644 --- a/components/auto-complete/index.zh-CN.md +++ b/components/auto-complete/index.zh-CN.md @@ -62,8 +62,10 @@ demo: | options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }\[] | - | | | placeholder | 输入框提示 | string | - | | | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 | +| size | 控件大小 | `large` \| `middle` \| `small` | - | | | value | 指定当前选中的条目 | string | - | | | variant | 形态变体 | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 | +| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 | | onBlur | 失去焦点时的回调 | function() | - | | | onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | - | | | onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | | @@ -71,6 +73,8 @@ demo: | onSearch | 搜索补全项的时候调用 | function(value) | - | | | onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | - | | | onClear | 清除内容时的回调 | function | - | 4.6.0 | +| onInputKeyDown | 按键按下时回调 | (event: KeyboardEvent) => void | - | | +| onPopupScroll | 下拉列表滚动时的回调 | (event: UIEvent) => void | - | | ## 方法 diff --git a/components/avatar/__tests__/a11y.test.ts b/components/avatar/__tests__/a11y.test.ts index a1bf8f95e7..c189385ee1 100644 --- a/components/avatar/__tests__/a11y.test.ts +++ b/components/avatar/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('avatar demo a11y', () => { - accessibilityDemoTest('avatar', { disabledRules: ['image-alt'] }); -}); +accessibilityDemoTest('avatar', { disabledRules: ['image-alt'] }); diff --git a/components/back-top/__tests__/a11y.test.ts b/components/back-top/__tests__/a11y.test.ts index a8da556386..b5b86d2af7 100644 --- a/components/back-top/__tests__/a11y.test.ts +++ b/components/back-top/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('back-top demo a11y', () => { - accessibilityDemoTest('back-top'); -}); +accessibilityDemoTest('back-top'); diff --git a/components/badge/__tests__/a11y.test.ts b/components/badge/__tests__/a11y.test.ts index dfe673081e..12c192b642 100644 --- a/components/badge/__tests__/a11y.test.ts +++ b/components/badge/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('badge demo a11y', () => { - accessibilityDemoTest('badge', { disabledRules: ['button-name'] }); -}); +accessibilityDemoTest('badge', { disabledRules: ['button-name'] }); diff --git a/components/breadcrumb/__tests__/a11y.test.ts b/components/breadcrumb/__tests__/a11y.test.ts index cb786d3644..097748bcd0 100644 --- a/components/breadcrumb/__tests__/a11y.test.ts +++ b/components/breadcrumb/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('breadcrumb demo a11y', () => { - accessibilityDemoTest('breadcrumb'); -}); +accessibilityDemoTest('breadcrumb'); diff --git a/components/button/__tests__/a11y.test.ts b/components/button/__tests__/a11y.test.ts index 22dbb03871..f3041cb4c7 100644 --- a/components/button/__tests__/a11y.test.ts +++ b/components/button/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('button demo a11y', () => { - accessibilityDemoTest('button'); -}); +accessibilityDemoTest('button'); diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx index 70338cfabd..619ee7cac5 100644 --- a/components/button/button-group.tsx +++ b/components/button/button-group.tsx @@ -24,18 +24,16 @@ const ButtonGroup: React.FC = (props) => { const [, , hashId] = useToken(); - let sizeCls = ''; - - switch (size) { - case 'large': - sizeCls = 'lg'; - break; - case 'small': - sizeCls = 'sm'; - break; - default: - // Do nothing - } + const sizeCls = React.useMemo(() => { + switch (size) { + case 'large': + return 'lg'; + case 'small': + return 'sm'; + default: + return ''; + } + }, [size]); if (process.env.NODE_ENV !== 'production') { const warning = devUseWarning('Button.Group'); diff --git a/components/calendar/__tests__/a11y.test.ts b/components/calendar/__tests__/a11y.test.ts new file mode 100644 index 0000000000..1bd691ed8c --- /dev/null +++ b/components/calendar/__tests__/a11y.test.ts @@ -0,0 +1,8 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('calendar', { + // waiting for rc-picker fix + skip: ['week.tsx'], + // fix in another pr + disabledRules: ['label'], +}); diff --git a/components/card/__tests__/a11y.test.ts b/components/card/__tests__/a11y.test.ts new file mode 100644 index 0000000000..ba3b7a75ff --- /dev/null +++ b/components/card/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('card', { + disabledRules: ['button-name', 'image-alt'], + skip: ['tabs.tsx'], +}); diff --git a/components/carousel/__tests__/a11y.test.ts b/components/carousel/__tests__/a11y.test.ts new file mode 100644 index 0000000000..23ea398393 --- /dev/null +++ b/components/carousel/__tests__/a11y.test.ts @@ -0,0 +1,3 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('carousel'); diff --git a/components/checkbox/__tests__/a11y.test.ts b/components/checkbox/__tests__/a11y.test.ts new file mode 100644 index 0000000000..edbf6710ec --- /dev/null +++ b/components/checkbox/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('checkbox', { + // skip debug demo + skip: ['custom-line-width.tsx', 'disabled.tsx'], +}); diff --git a/components/collapse/__tests__/a11y.test.ts b/components/collapse/__tests__/a11y.test.ts index 24884065b5..bc7c537459 100644 --- a/components/collapse/__tests__/a11y.test.ts +++ b/components/collapse/__tests__/a11y.test.ts @@ -1,5 +1,5 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('collapse demo a11y', () => { - accessibilityDemoTest('collapse', { skip: ['extra.tsx'] }); +accessibilityDemoTest('collapse', { + skip: ['extra.tsx'], }); diff --git a/components/color-picker/__tests__/a11y.test.ts b/components/color-picker/__tests__/a11y.test.ts index c758f3d0c8..e7056c76b2 100644 --- a/components/color-picker/__tests__/a11y.test.ts +++ b/components/color-picker/__tests__/a11y.test.ts @@ -1,4 +1,5 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -// skip _InternalPanelDoNotUseOrYouWillBeFired -accessibilityDemoTest('color-picker', { skip: ['pure-panel.tsx'] }); +accessibilityDemoTest('color-picker', { + skip: ['pure-panel.tsx'], +}); diff --git a/components/flex/__tests__/a11y.test.ts b/components/flex/__tests__/a11y.test.ts new file mode 100644 index 0000000000..a0e52e95a6 --- /dev/null +++ b/components/flex/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('flex', { + // waiting for rc-segmented fix + skip: ['align.tsx'], +}); diff --git a/components/grid/__tests__/a11y.test.ts b/components/grid/__tests__/a11y.test.ts new file mode 100644 index 0000000000..b75d7b2e11 --- /dev/null +++ b/components/grid/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('grid', { + // waiting for slider fix + skip: ['playground.tsx'], +}); diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md index 36af48168a..278631aa7a 100644 --- a/components/input/index.en-US.md +++ b/components/input/index.en-US.md @@ -54,7 +54,7 @@ Common props ref：[Common props](/docs/react/common-props) | addonAfter | The label text displayed after (on the right side of) the input field | ReactNode | - | | | addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - | | | allowClear | If allow to remove input content with clear icon | boolean \| { clearIcon: ReactNode } | false | | -| ~~bordered~~ | Whether has border style | boolean | true | 4.5.0 | +| ~~bordered~~ | Whether has border style, please use `variant` instead | boolean | true | 4.5.0 | | classNames | Semantic DOM class | Record<[SemanticDOM](#input-1), string> | - | 5.4.0 | | count | Character count config | [CountConfig](#countconfig) | - | 5.10.0 | | defaultValue | The initial input content | string | - | | diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md index 65ac317b7e..a381325dd5 100644 --- a/components/input/index.zh-CN.md +++ b/components/input/index.zh-CN.md @@ -55,7 +55,7 @@ demo: | addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | | | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | | | allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - | | -| ~~bordered~~ | 是否有边框 | boolean | true | 4.5.0 | +| ~~bordered~~ | 是否有边框, 请使用 `variant` 替换 | boolean | true | 4.5.0 | | classNames | 语义化结构 class | Record<[SemanticDOM](#input-1), string> | - | 5.4.0 | | count | 字符计数配置 | [CountConfig](#countconfig) | - | 5.10.0 | | defaultValue | 输入框默认内容 | string | - | | diff --git a/components/list/__tests__/a11y.test.ts b/components/list/__tests__/a11y.test.ts new file mode 100644 index 0000000000..508f6ae1aa --- /dev/null +++ b/components/list/__tests__/a11y.test.ts @@ -0,0 +1,8 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('list', { + // waiting for fix + skip: ['infinite-load.tsx'], + // we can set alt for img in list demo + disabledRules: ['image-alt'], +}); diff --git a/components/pagination/__tests__/a11y.test.ts b/components/pagination/__tests__/a11y.test.ts new file mode 100644 index 0000000000..1aaac875ef --- /dev/null +++ b/components/pagination/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('pagination', { + // waiting for rc-pagination fix + skip: ['simple.tsx'], +}); diff --git a/components/popover/__tests__/a11y.test.ts b/components/popover/__tests__/a11y.test.ts new file mode 100644 index 0000000000..99a65e5940 --- /dev/null +++ b/components/popover/__tests__/a11y.test.ts @@ -0,0 +1,5 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('popover', { + skip: ['arrow.tsx'], +}); diff --git a/components/progress/__tests__/a11y.test.ts b/components/progress/__tests__/a11y.test.ts new file mode 100644 index 0000000000..0cfec1ac24 --- /dev/null +++ b/components/progress/__tests__/a11y.test.ts @@ -0,0 +1,8 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('progress', { + // we can set aria attribute to fix it + disabledRules: ['aria-progressbar-name'], + // we can set aria attribute to fix it + skip: ['circle-steps.tsx'], +}); diff --git a/components/qr-code/__tests__/a11y.test.ts b/components/qr-code/__tests__/a11y.test.ts new file mode 100644 index 0000000000..6352fba939 --- /dev/null +++ b/components/qr-code/__tests__/a11y.test.ts @@ -0,0 +1,8 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('qr-code', { + // we can add aria attributes to fix it + disabledRules: ['role-img-alt', 'svg-img-alt'], + // waiting for rc-segmented fix + skip: ['errorlevel.tsx', 'download.tsx'], +}); diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx index bcc9e2d160..4445ad14bd 100644 --- a/components/qr-code/index.tsx +++ b/components/qr-code/index.tsx @@ -1,4 +1,4 @@ -import React, { useContext, type AriaAttributes } from 'react'; +import React, { useContext } from 'react'; import { QRCodeCanvas, QRCodeSVG } from '@rc-component/qrcode'; import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; @@ -50,9 +50,10 @@ const QRCode: React.FC = (props) => { }; const a11yProps = pickAttrs(rest, true); - const restProps = omit, keyof AriaAttributes>( + + const restProps = omit, keyof React.AriaAttributes>( rest, - Object.keys(a11yProps) as Array, + Object.keys(a11yProps) as (keyof React.AriaAttributes)[], ); const qrCodeProps = { diff --git a/components/rate/__tests__/a11y.test.ts b/components/rate/__tests__/a11y.test.ts new file mode 100644 index 0000000000..b69493e70f --- /dev/null +++ b/components/rate/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('rate', { + // waiting for rc-rate fix + disabledRules: ['listitem'], +}); diff --git a/components/segmented/__tests__/a11y.test.ts b/components/segmented/__tests__/a11y.test.ts new file mode 100644 index 0000000000..633346bd60 --- /dev/null +++ b/components/segmented/__tests__/a11y.test.ts @@ -0,0 +1,8 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('segmented', { + // we can add aria attributes to fix it + skip: ['custom.tsx', 'size-consistent.tsx'], + // waiting for rc-segmented fix + disabledRules: ['aria-allowed-attr'], +}); diff --git a/components/skeleton/__tests__/a11y.test.ts b/components/skeleton/__tests__/a11y.test.ts new file mode 100644 index 0000000000..f0eb0700b4 --- /dev/null +++ b/components/skeleton/__tests__/a11y.test.ts @@ -0,0 +1,8 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('skeleton', { + // waiting for fix + disabledRules: ['empty-heading'], + // we can set aria attribute to fix it + skip: ['list.tsx', 'element.tsx'], +}); diff --git a/components/slider/__tests__/a11y.test.ts b/components/slider/__tests__/a11y.test.ts new file mode 100644 index 0000000000..b6afb6b123 --- /dev/null +++ b/components/slider/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('slider', { + // we can set aria attribute to fix it + disabledRules: ['aria-input-field-name', 'label', 'button-name'], +}); diff --git a/components/slider/index.tsx b/components/slider/index.tsx index 072e5231fb..c42b740f4b 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -86,6 +86,13 @@ export interface SliderBaseProps { getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; /** @deprecated `tooltipPlacement` is deprecated. Please use `tooltip.placement` instead. */ tooltipPlacement?: TooltipPlacement; + + // Accessibility + tabIndex?: SliderProps['tabIndex']; + ariaLabelForHandle?: SliderProps['ariaLabelForHandle']; + ariaLabelledByForHandle?: SliderProps['ariaLabelledByForHandle']; + ariaRequired?: SliderProps['ariaRequired']; + ariaValueTextFormatterForHandle?: SliderProps['ariaValueTextFormatterForHandle']; } export interface SliderSingleProps extends SliderBaseProps { diff --git a/components/space/Compact.tsx b/components/space/Compact.tsx index 7295c757bd..a5d870bfb1 100644 --- a/components/space/Compact.tsx +++ b/components/space/Compact.tsx @@ -43,9 +43,12 @@ export const useCompactItemContext = (prefixCls: string, direction: DirectionTyp }; }; -export const NoCompactStyle: React.FC> = ({ children }) => ( - {children} -); +export const NoCompactStyle: React.FC> = (props) => { + const { children } = props; + return ( + {children} + ); +}; export interface SpaceCompactProps extends React.HTMLAttributes { prefixCls?: string; @@ -55,12 +58,16 @@ export interface SpaceCompactProps extends React.HTMLAttributes rootClassName?: string; } -const CompactItem: React.FC> = ({ - children, - ...otherProps -}) => ( - {children} -); +const CompactItem: React.FC> = (props) => { + const { children, ...others } = props; + return ( + (() => others, [others])} + > + {children} + + ); +}; const Compact: React.FC = (props) => { const { getPrefixCls, direction: directionConfig } = React.useContext(ConfigContext); @@ -95,6 +102,7 @@ const Compact: React.FC = (props) => { const compactItemContext = React.useContext(SpaceCompactItemContext); const childNodes = toArray(children); + const nodes = React.useMemo( () => childNodes.map((child, i) => { diff --git a/components/statistic/__tests__/a11y.test.ts b/components/statistic/__tests__/a11y.test.ts new file mode 100644 index 0000000000..ccd6f41798 --- /dev/null +++ b/components/statistic/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('statistic', { + // wait for skeleton fix + skip: ['basic.tsx'], +}); diff --git a/components/steps/__tests__/a11y.test.ts b/components/steps/__tests__/a11y.test.ts new file mode 100644 index 0000000000..88f67f3122 --- /dev/null +++ b/components/steps/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('steps', { + // we can set aria attribute to fix it + skip: ['inline.tsx', 'label-placement.tsx', 'progress.tsx'], +}); diff --git a/components/switch/__tests__/a11y.test.ts b/components/switch/__tests__/a11y.test.ts index a8e9bcb835..12d27af341 100644 --- a/components/switch/__tests__/a11y.test.ts +++ b/components/switch/__tests__/a11y.test.ts @@ -1,3 +1,5 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -accessibilityDemoTest('switch', { disabledRules: ['button-name'] }); +accessibilityDemoTest('switch', { + disabledRules: ['button-name'], +}); diff --git a/components/tooltip/__tests__/a11y.test.ts b/components/tooltip/__tests__/a11y.test.ts new file mode 100644 index 0000000000..e94fd5f469 --- /dev/null +++ b/components/tooltip/__tests__/a11y.test.ts @@ -0,0 +1,5 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('tooltip', { + skip: ['arrow.tsx', 'disabled-children.tsx'], +}); diff --git a/components/tree/__tests__/a11y.test.ts b/components/tree/__tests__/a11y.test.ts new file mode 100644 index 0000000000..cbd6cf9931 --- /dev/null +++ b/components/tree/__tests__/a11y.test.ts @@ -0,0 +1,11 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('tree', { + skip: [ + // Skip large data demos to prevent test timeout + 'virtual-scroll.tsx', + 'big-data.tsx', + // we can set aria attributes to fix it + 'line.tsx', + ], +}); diff --git a/components/upload/__tests__/a11y.test.ts b/components/upload/__tests__/a11y.test.ts new file mode 100644 index 0000000000..1f699bd9a8 --- /dev/null +++ b/components/upload/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('upload', { + // Skip due to external dependency issue + skip: ['drag-sorting.tsx'], +}); diff --git a/components/watermark/__tests__/a11y.test.ts b/components/watermark/__tests__/a11y.test.ts new file mode 100644 index 0000000000..97c7c4c973 --- /dev/null +++ b/components/watermark/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('watermark', { + // we can add aria attributes to fix it + skip: ['custom.tsx'], +}); diff --git a/package.json b/package.json index 3fcd928065..bd9ac1a8ea 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.23.2", + "version": "5.23.3", "description": "An enterprise-class UI design language and React components implementation", "license": "MIT", "funding": { @@ -26,7 +26,7 @@ "react-component", "ui" ], - "sideEffects": false, + "sideEffects": ["*.css"], "main": "lib/index.js", "module": "es/index.js", "unpkg": "dist/antd.min.js", @@ -161,7 +161,7 @@ "@ant-design/happy-work-theme": "^1.0.0", "@ant-design/tools": "^18.0.3", "@ant-design/v5-patch-for-react-19": "^1.0.2", - "@antfu/eslint-config": "^3.11.2", + "@antfu/eslint-config": "^4.0.0", "@antv/g6": "^4.8.24", "@biomejs/biome": "^1.9.4", "@codecov/webpack-plugin": "^1.4.0", @@ -348,11 +348,5 @@ "title": "Ant Design", "tnpm": { "mode": "npm" - }, - "overrides": { - "react-intl": "7.0.4" - }, - "resolutions": { - "react-intl": "7.0.4" } } diff --git a/tests/shared/accessibilityTest.tsx b/tests/shared/accessibilityTest.tsx index 6ab29067fb..febecb14ac 100644 --- a/tests/shared/accessibilityTest.tsx +++ b/tests/shared/accessibilityTest.tsx @@ -112,7 +112,15 @@ export function accessibilityTest(Component: React.ComponentType, disabledRules? } type Options = { + /** + * skip test + * @default false + */ skip?: boolean | string[]; + /** + * Disable axe rule checks + * @default [] + */ disabledRules?: string[]; }; diff --git a/webpack.config.js b/webpack.config.js index 5ac3a0814c..88f6a7981a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -62,6 +62,7 @@ function addPluginsForProduction(config) { enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined, bundleName: 'antd.min', uploadToken: process.env.CODECOV_TOKEN, + gitService: "github", }), new CircularDependencyPlugin({ failOnError: true,