chore: auto merge branches (ant-design#52611)

chore: sync feature into next

.dumi/theme/slots/Content/ColumnCard.tsx

@@ -130,7 +130,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
     return null;
   }
   return (
-    <Card className={card} bordered={false}>
+    <Card className={card} variant="borderless">
       <h3 className={bigTitle}>{locale.bigTitle}</h3>
       {zhihuLink && (
         <>

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`

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`

components/_util/wave/WaveEffect.tsx

@@ -4,7 +4,8 @@ import { composeRef } from '@rc-component/util/lib/ref';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 
-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';

components/affix/__tests__/a11y.test.ts

@@ -1,5 +1,3 @@
 import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
 
-describe('affix demo a11y', () => {
-  accessibilityDemoTest('affix');
-});
+accessibilityDemoTest('affix');

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'] });

components/anchor/__tests__/a11y.test.ts

@@ -1,5 +1,3 @@
 import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
 
-describe('anchor demo a11y', () => {
-  accessibilityDemoTest('anchor');
-});
+accessibilityDemoTest('anchor');

components/app/__tests__/a11y.test.ts

@@ -1,5 +1,3 @@
 import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
 
-describe('app demo a11y', () => {
-  accessibilityDemoTest('app');
-});
+accessibilityDemoTest('app');

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'],
+});

components/auto-complete/index.en-US.md

@@ -61,15 +61,19 @@ 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) | - |  |
 | onFocus | Called when entering the component | function() | - |  |
 | 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
 

components/auto-complete/index.zh-CN.md

@@ -62,15 +62,19 @@ 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) | - |  |
 | onFocus | 获得焦点时的回调 | function() | - |  |
 | onSearch | 搜索补全项的时候调用 | function(value) | - |  |
 | onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | - |  |
 | onClear | 清除内容时的回调 | function | - | 4.6.0 |
+| onInputKeyDown | 按键按下时回调 | (event: KeyboardEvent) => void | - |  |
+| onPopupScroll | 下拉列表滚动时的回调 | (event: UIEvent) => void | - |  |
 
 ## 方法
 

components/avatar/group.tsx → components/avatar/AvatarGroup.tsx

@@ -8,9 +8,9 @@ import { ConfigContext } from '../config-provider';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import type { PopoverProps } from '../popover';
 import Popover from '../popover';
-import Avatar from './avatar';
-import AvatarContext from './AvatarContext';
+import Avatar from './Avatar';
 import type { AvatarContextType, AvatarSize } from './AvatarContext';
+import AvatarContext from './AvatarContext';
 import useStyle from './style';
 
 interface ContextProps {
@@ -28,7 +28,7 @@ const AvatarContextProvider: React.FC<AvatarContextType & ContextProps> = (props
   );
 };
 
-export interface GroupProps {
+export interface AvatarGroupProps {
   className?: string;
   rootClassName?: string;
   children?: React.ReactNode;
@@ -55,7 +55,7 @@ export interface GroupProps {
   shape?: 'circle' | 'square';
 }
 
-const Group: React.FC<GroupProps> = (props) => {
+const AvatarGroup: React.FC<AvatarGroupProps> = (props) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const {
     prefixCls: customizePrefixCls,
@@ -150,4 +150,4 @@ const Group: React.FC<GroupProps> = (props) => {
   );
 };
 
-export default Group;
+export default AvatarGroup;

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'] });

components/avatar/index.tsx

@@ -1,16 +1,18 @@
-import InternalAvatar from './avatar';
-import Group from './group';
+import InternalAvatar from './Avatar';
+import type { AvatarGroupProps } from './AvatarGroup';
+import AvatarGroup from './AvatarGroup';
 
-export type { AvatarProps } from './avatar';
-export type { GroupProps } from './group';
-export { Group };
+export type { AvatarProps } from './Avatar';
+
+/** @deprecated Please use `AvatarGroupProps` */
+export type GroupProps = AvatarGroupProps;
 
 type CompoundedComponent = typeof InternalAvatar & {
-  Group: typeof Group;
+  Group: typeof AvatarGroup;
 };
 
 const Avatar = InternalAvatar as CompoundedComponent;
 
-Avatar.Group = Group;
+Avatar.Group = AvatarGroup;
 
 export default Avatar;

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'] });

components/breadcrumb/__tests__/a11y.test.ts

@@ -1,5 +1,3 @@
 import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
 
-describe('breadcrumb demo a11y', () => {
-  accessibilityDemoTest('breadcrumb');
-});
+accessibilityDemoTest('breadcrumb');

components/button/__tests__/a11y.test.ts

@@ -1,5 +1,3 @@
 import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
 
-describe('button demo a11y', () => {
-  accessibilityDemoTest('button');
-});
+accessibilityDemoTest('button');

components/button/button-group.tsx

@@ -24,18 +24,16 @@ const ButtonGroup: React.FC<ButtonGroupProps> = (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<string>(() => {
+    switch (size) {
+      case 'large':
+        return 'lg';
+      case 'small':
+        return 'sm';
+      default:
+        return '';
+    }
+  }, [size]);
 
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Button.Group');

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'],
+});

components/card/Card.tsx

@@ -11,6 +11,7 @@ import type { TabsProps } from '../tabs';
 import Tabs from '../tabs';
 import Grid from './Grid';
 import useStyle from './style';
+import useVariant from '../form/hooks/useVariants';
 
 export type CardType = 'inner';
 export type CardSize = 'default' | 'small';
@@ -28,6 +29,7 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
   prefixCls?: string;
   title?: React.ReactNode;
   extra?: React.ReactNode;
+  /** @deprecated Please use `variant` instead */
   bordered?: boolean;
   /** @deprecated Please use `styles.header` instead */
   headStyle?: React.CSSProperties;
@@ -52,6 +54,7 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
   tabProps?: TabsProps;
   classNames?: Partial<Record<SemanticName, string>>;
   styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+  variant?: 'borderless' | 'outlined';
 }
 
 type CardClassNamesModule = keyof Exclude<CardProps['classNames'], undefined>;
@@ -91,7 +94,8 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     bodyStyle = {},
     title,
     loading,
-    bordered = true,
+    bordered,
+    variant: customVariant,
     size: customizeSize,
     type,
     cover,
@@ -109,13 +113,15 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
   } = props;
 
   const { getPrefixCls, direction, card } = React.useContext(ConfigContext);
+  const [variant] = useVariant('card', customVariant, bordered);
 
   // =================Warning===================
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Card');
     [
       ['headStyle', 'styles.header'],
       ['bodyStyle', 'styles.body'],
+      ['bordered', 'variant'],
     ].forEach(([deprecatedName, newName]) => {
       warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
     });
@@ -232,7 +238,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     card?.className,
     {
       [`${prefixCls}-loading`]: loading,
-      [`${prefixCls}-bordered`]: bordered,
+      [`${prefixCls}-bordered`]: variant !== 'borderless',
       [`${prefixCls}-hoverable`]: hoverable,
       [`${prefixCls}-contain-grid`]: isContainGrid,
       [`${prefixCls}-contain-tabs`]: tabList?.length,

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'],
+});

components/card/__tests__/index.test.tsx

@@ -5,9 +5,10 @@ import userEvent from '@testing-library/user-event';
 
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { render, screen } from '../../../tests/utils';
+import { fireEvent, render, screen } from '../../../tests/utils';
 import Button from '../../button/index';
 import Card from '../index';
+import ConfigProvider from '../../config-provider';
 
 describe('Card', () => {
   mountTest(Card);
@@ -286,4 +287,39 @@ describe('Card', () => {
     expect(avatarElement.style.backgroundColor).toBe('gray');
     expect(descriptionElement.style.backgroundColor).toBe('yellow');
   });
+  it('ConfigProvider support variant for card', () => {
+    const TestComponent = () => {
+      const [variant, setVariant] = React.useState<'borderless' | 'outlined'>('outlined');
+      const [cardVariant, setCardVariant] = React.useState<'borderless' | 'outlined' | undefined>(
+        undefined,
+      );
+
+      return (
+        <div>
+          <button type="button" onClick={() => setVariant('borderless')}>
+            Set borderless
+          </button>
+          <button type="button" onClick={() => setCardVariant('outlined')}>
+            Set outlined
+          </button>
+          <ConfigProvider variant={variant}>
+            <Card title="Card title" variant={cardVariant}>
+              <p>Card content</p>
+            </Card>
+          </ConfigProvider>
+        </div>
+      );
+    };
+
+    const { container, getByText } = render(<TestComponent />);
+
+    // Check if the default `ant-card-bordered` exists
+    expect(container.querySelector('.ant-card-bordered')).toBeTruthy();
+
+    fireEvent.click(getByText('Set borderless'));
+    expect(container.querySelector('.ant-card-bordered')).toBeFalsy();
+
+    fireEvent.click(getByText('Set outlined'));
+    expect(container.querySelector('.ant-card-bordered')).toBeTruthy();
+  });
 });