From 7773cf6900ca13338d04cb6d14b74d5fd0ad6a7e Mon Sep 17 00:00:00 2001
From: Pareder <ruskc2beat@gmail.com>
Date: Tue, 26 May 2026 10:52:35 +0300
Subject: [PATCH] fix: refactor clear icon to button element to make it
 accessible

---
 assets/index.less                             |  2 +-
 src/PickerInput/Selector/ClearIcon.tsx        | 31 +++++++++++++++++++
 src/PickerInput/Selector/Icon.tsx             | 27 ++--------------
 src/PickerInput/Selector/Input.tsx            |  2 +-
 src/PickerInput/Selector/RangeSelector.tsx    |  5 +--
 .../Selector/SingleSelector/index.tsx         |  5 +--
 src/PickerInput/SinglePicker.tsx              |  1 +
 tests/__snapshots__/picker.spec.tsx.snap      |  7 +++--
 tests/__snapshots__/range.spec.tsx.snap       |  7 +++--
 9 files changed, 50 insertions(+), 37 deletions(-)
 create mode 100644 src/PickerInput/Selector/ClearIcon.tsx

diff --git a/assets/index.less b/assets/index.less
index d5db8413b..48522d422 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -411,7 +411,7 @@
   &-clear {
     position: absolute;
     top: 0;
-    inset-inline-end: 4px;
+    inset-inline-end: 0;
     cursor: pointer;
 
     &-btn::after {
diff --git a/src/PickerInput/Selector/ClearIcon.tsx b/src/PickerInput/Selector/ClearIcon.tsx
new file mode 100644
index 000000000..a20e70c45
--- /dev/null
+++ b/src/PickerInput/Selector/ClearIcon.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PickerContext from '../context';
+import { clsx } from 'clsx';
+
+export interface ClearIconProps extends React.HtmlHTMLAttributes<HTMLElement> {
+  icon?: React.ReactNode;
+  onClear: VoidFunction;
+}
+
+export default function ClearIcon({ icon, onClear, ...restProps }: ClearIconProps) {
+  const { prefixCls, classNames, styles, locale } = React.useContext(PickerContext);
+
+  return (
+    <button
+      {...restProps}
+      type="button"
+      aria-label={locale.clear}
+      className={clsx(`${prefixCls}-clear`, classNames.suffix)}
+      style={styles.suffix}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClear();
+      }}
+    >
+      {icon}
+    </button>
+  );
+}
diff --git a/src/PickerInput/Selector/Icon.tsx b/src/PickerInput/Selector/Icon.tsx
index a8edc0890..c5090060e 100644
--- a/src/PickerInput/Selector/Icon.tsx
+++ b/src/PickerInput/Selector/Icon.tsx
@@ -4,16 +4,14 @@ import { clsx } from 'clsx';
 
 export interface IconProps extends React.HtmlHTMLAttributes<HTMLElement> {
   icon?: React.ReactNode;
-  type: 'suffix' | 'clear';
 }
 
-export default function Icon(props: IconProps) {
-  const { icon, type, ...restProps } = props;
+export default function Icon({ icon, ...restProps }: IconProps) {
   const { prefixCls, classNames, styles } = React.useContext(PickerContext);
 
   return icon ? (
     <span
-      className={clsx(`${prefixCls}-${type}`, classNames.suffix)}
+      className={clsx(`${prefixCls}-suffix`, classNames.suffix)}
       style={styles.suffix}
       {...restProps}
     >
@@ -21,24 +19,3 @@ export default function Icon(props: IconProps) {
     </span>
   ) : null;
 }
-
-export interface ClearIconProps extends Omit<IconProps, 'type'> {
-  onClear: VoidFunction;
-}
-
-export function ClearIcon({ onClear, ...restProps }: ClearIconProps) {
-  return (
-    <Icon
-      {...restProps}
-      type="clear"
-      role="button"
-      onMouseDown={(e) => {
-        e.preventDefault();
-      }}
-      onClick={(e) => {
-        e.stopPropagation();
-        onClear();
-      }}
-    />
-  );
-}
diff --git a/src/PickerInput/Selector/Input.tsx b/src/PickerInput/Selector/Input.tsx
index 7e2fae5da..b2b3a608e 100644
--- a/src/PickerInput/Selector/Input.tsx
+++ b/src/PickerInput/Selector/Input.tsx
@@ -419,7 +419,7 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
         className={classNames.input}
         style={styles.input}
       />
-      <Icon type="suffix" icon={suffixIcon} />
+      <Icon icon={suffixIcon} />
       {clearIcon}
     </div>
   );
diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx
index b9f4a593c..2f0a3095a 100644
--- a/src/PickerInput/Selector/RangeSelector.tsx
+++ b/src/PickerInput/Selector/RangeSelector.tsx
@@ -6,7 +6,8 @@ import type { RangePickerRef, SelectorProps } from '../../interface';
 import PickerContext from '../context';
 import useInputProps from './hooks/useInputProps';
 import useRootProps from './hooks/useRootProps';
-import Icon, { ClearIcon } from './Icon';
+import Icon from './Icon';
+import ClearIcon from './ClearIcon';
 import Input, { type InputRef } from './Input';
 
 export type SelectorIdType =
@@ -261,7 +262,7 @@ function RangeSelector<DateType extends object = any>(
           date-range="end"
         />
         <div className={`${prefixCls}-active-bar`} style={activeBarStyle} />
-        <Icon type="suffix" icon={suffixIcon} />
+        <Icon icon={suffixIcon} />
         {showClear && <ClearIcon icon={clearIcon} onClear={onClear} />}
       </div>
     </ResizeObserver>
diff --git a/src/PickerInput/Selector/SingleSelector/index.tsx b/src/PickerInput/Selector/SingleSelector/index.tsx
index ed97ba1ad..7cd1a7ee9 100644
--- a/src/PickerInput/Selector/SingleSelector/index.tsx
+++ b/src/PickerInput/Selector/SingleSelector/index.tsx
@@ -4,7 +4,8 @@ import type { InternalMode, PickerRef, SelectorProps } from '../../../interface'
 import { isSame } from '../../../utils/dateUtil';
 import type { PickerProps } from '../../SinglePicker';
 import PickerContext from '../../context';
-import Icon, { ClearIcon } from '../Icon';
+import Icon from '../Icon';
+import ClearIcon from '../ClearIcon';
 import Input, { type InputRef } from '../Input';
 import useInputProps from '../hooks/useInputProps';
 import useRootProps from '../hooks/useRootProps';
@@ -183,7 +184,7 @@ function SingleSelector<DateType extends object = any>(
         autoFocus={autoFocus}
         tabIndex={tabIndex}
       />
-      <Icon type="suffix" icon={suffixIcon} />
+      <Icon icon={suffixIcon} />
       {showClear && <ClearIcon icon={clearIcon} onClear={onClear} />}
     </>
   ) : (
diff --git a/src/PickerInput/SinglePicker.tsx b/src/PickerInput/SinglePicker.tsx
index bdb8b78cb..f9a514619 100644
--- a/src/PickerInput/SinglePicker.tsx
+++ b/src/PickerInput/SinglePicker.tsx
@@ -388,6 +388,7 @@ function Picker<DateType extends object = any>(
   const onSelectorClear = () => {
     triggerSubmitChange(null);
     triggerOpen(false, { force: true });
+    selectorRef.current.focus();
   };
 
   // ======================== Hover =========================
diff --git a/tests/__snapshots__/picker.spec.tsx.snap b/tests/__snapshots__/picker.spec.tsx.snap
index a94ac16b5..10e4195bb 100644
--- a/tests/__snapshots__/picker.spec.tsx.snap
+++ b/tests/__snapshots__/picker.spec.tsx.snap
@@ -17,14 +17,15 @@ exports[`Picker.Basic icon 1`] = `
       class="suffix-icon"
     />
   </span>
-  <span
+  <button
+    aria-label="Clear"
     class="rc-picker-clear"
-    role="button"
+    type="button"
   >
     <span
       class="suffix-icon"
     />
-  </span>
+  </button>
 </div>
 `;
 
diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap
index aeaabeef6..d4ec74c86 100644
--- a/tests/__snapshots__/range.spec.tsx.snap
+++ b/tests/__snapshots__/range.spec.tsx.snap
@@ -43,14 +43,15 @@ exports[`Picker.Range icon 1`] = `
         class="suffix-icon"
       />
     </span>
-    <span
+    <button
+      aria-label="清除"
       class="rc-picker-clear"
-      role="button"
+      type="button"
     >
       <span
         class="suffix-icon"
       />
-    </span>
+    </button>
   </div>
 </div>
 `;