feat: Tag support aria-* in closable

components/_util/hooks/useClosable.tsx

@@ -2,13 +2,15 @@
 import React from 'react';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import pickAttrs from 'rc-util/lib/pickAttrs';
+import { AlertConfig, DrawerConfig, ModalConfig, TagConfig } from 'antd/es/config-provider/context';
 
 export type UseClosableParams = {
   closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
   closeIcon?: ReactNode;
   defaultClosable?: boolean;
   defaultCloseIcon?: ReactNode;
   customCloseIconRender?: (closeIcon: ReactNode) => ReactNode;
+  context?: TagConfig | DrawerConfig | ModalConfig | AlertConfig;
 };
 
 function useInnerClosable(
@@ -34,8 +36,17 @@
   customCloseIconRender,
   defaultCloseIcon = <CloseOutlined />,
   defaultClosable = false,
+  context,
 }: UseClosableParams): [closable: boolean, closeIcon: React.ReactNode | null] {
-  const mergedClosable = useInnerClosable(closable, closeIcon, defaultClosable);
+  const mergedContextCloseIcon = React.useMemo(() => {
+    if (typeof context?.closable === 'object' && context.closable.closeIcon) {
+      return context.closable.closeIcon;
+    }
+    return context?.closeIcon;
+  }, [context?.closable, context?.closeIcon]);
+
+  const curCloseIcon = closeIcon ?? mergedContextCloseIcon;
+  const mergedClosable = useInnerClosable(closable, curCloseIcon, defaultClosable);
 
   if (!mergedClosable) {
     return [false, null];
@@ -49,9 +60,9 @@
     if (typeof closable === 'object' && closableIcon !== undefined) {
       return closableIcon;
     }
-    return typeof closeIcon === 'boolean' || closeIcon === undefined || closeIcon === null
+    return typeof curCloseIcon === 'boolean' || curCloseIcon === undefined || curCloseIcon === null
       ? defaultCloseIcon
-      : closeIcon;
+      : curCloseIcon;
   })();
   const ariaProps = pickAttrs(restProps, true);
 

components/config-provider/context.ts

@@ -91,7 +91,7 @@ export type MenuConfig = ComponentStyleConfig & Pick<MenuProps, 'expandIcon'>;
 export type TourConfig = Pick<TourProps, 'closeIcon'>;
 
 export type ModalConfig = ComponentStyleConfig &
-  Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon'>;
+  Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon' | 'closable'>;
 
 export type TabsConfig = ComponentStyleConfig &
   Pick<TabsProps, 'indicator' | 'indicatorSize' | 'moreIcon' | 'addIcon' | 'removeIcon'>;

components/tag/index.tsx

@@ -108,16 +108,9 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
     setVisible(false);
   };
 
-  const mergedContextCloseIcon = React.useMemo(() => {
-    if (typeof tag?.closable === 'object' && tag.closable.closeIcon) {
-      return tag.closable.closeIcon;
-    }
-    return tag?.closeIcon;
-  }, [tag?.closable, tag?.closeIcon]);
-
   const [, mergedCloseIcon] = useClosable({
     closable: closable ?? tag?.closable,
-    closeIcon: closeIcon ?? mergedContextCloseIcon,
+    closeIcon,
     customCloseIconRender: (iconNode: React.ReactNode) =>
       iconNode === null ? (
         <CloseOutlined className={`${prefixCls}-close-icon`} onClick={handleCloseClick} />
@@ -128,6 +121,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
       ),
     defaultCloseIcon: null,
     defaultClosable: false,
+    context: tag,
   });
 
   const isNeedWave =