From c6f898a3be5958bab4eec50d6b80398f65db2997 Mon Sep 17 00:00:00 2001
From: Wanpan <wanpan96@163.com>
Date: Wed, 26 Feb 2025 16:22:58 +0800
Subject: [PATCH] fix: clearIcon affect a11y experience

---
 src/BaseInput.tsx                       |  1 +
 tests/BaseInput.test.tsx                | 40 ++++++++++++-------------
 tests/__snapshots__/index.test.tsx.snap |  6 ++++
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/BaseInput.tsx b/src/BaseInput.tsx
index bf8fcb7..4724858 100644
--- a/src/BaseInput.tsx
+++ b/src/BaseInput.tsx
@@ -84,6 +84,7 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
       clearIcon = (
         <button
           type="button"
+          tabIndex={-1}
           onClick={(event) => {
             handleReset?.(event);
             onClear?.();
diff --git a/tests/BaseInput.test.tsx b/tests/BaseInput.test.tsx
index a0c51e2..8a237e9 100644
--- a/tests/BaseInput.test.tsx
+++ b/tests/BaseInput.test.tsx
@@ -97,33 +97,33 @@ describe('BaseInput', () => {
       expect(inputEl!.value).toBe('');
     });
 
-    it('By focus and Space', async () => {
-      const { container } = render(<Demo />);
+    // it('By focus and Space', async () => {
+    //   const { container } = render(<Demo />);
 
-      const inputEl = container.querySelector('input');
-      await user.click(inputEl!);
+    //   const inputEl = container.querySelector('input');
+    //   await user.click(inputEl!);
 
-      await user.type(inputEl!, 'some text');
-      expect(inputEl!.value).toBe('some text');
+    //   await user.type(inputEl!, 'some text');
+    //   expect(inputEl!.value).toBe('some text');
 
-      await user.tab();
-      await user.keyboard('[Space]');
-      expect(inputEl!.value).toBe('');
-    });
+    //   await user.tab();
+    //   await user.keyboard('[Space]');
+    //   expect(inputEl!.value).toBe('');
+    // });
 
-    it('By focus and Enter', async () => {
-      const { container } = render(<Demo />);
+    // it('By focus and Enter', async () => {
+    //   const { container } = render(<Demo />);
 
-      const inputEl = container.querySelector('input');
-      await user.click(inputEl!);
+    //   const inputEl = container.querySelector('input');
+    //   await user.click(inputEl!);
 
-      await user.type(inputEl!, 'some text');
-      expect(inputEl!.value).toBe('some text');
+    //   await user.type(inputEl!, 'some text');
+    //   expect(inputEl!.value).toBe('some text');
 
-      await user.tab();
-      await user.keyboard('[Enter]');
-      expect(inputEl!.value).toBe('');
-    });
+    //   await user.tab();
+    //   await user.keyboard('[Enter]');
+    //   expect(inputEl!.value).toBe('');
+    // });
   });
 
   it('should display clearIcon correctly', () => {
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
index 598a273..72bc563 100644
--- a/tests/__snapshots__/index.test.tsx.snap
+++ b/tests/__snapshots__/index.test.tsx.snap
@@ -117,6 +117,7 @@ exports[`Input allowClear should change type when click 1`] = `
     >
       <button
         class="rc-input-clear-icon"
+        tabindex="-1"
         type="button"
       >
         ✖
@@ -141,6 +142,7 @@ exports[`Input allowClear should change type when click 2`] = `
     >
       <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
+        tabindex="-1"
         type="button"
       >
         ✖
@@ -165,6 +167,7 @@ exports[`Input allowClear should not show icon if defaultValue is undefined or e
     >
       <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
+        tabindex="-1"
         type="button"
       >
         ✖
@@ -189,6 +192,7 @@ exports[`Input allowClear should not show icon if defaultValue is undefined or e
     >
       <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
+        tabindex="-1"
         type="button"
       >
         ✖
@@ -213,6 +217,7 @@ exports[`Input allowClear should not show icon if value is undefined or empty st
     >
       <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
+        tabindex="-1"
         type="button"
       >
         ✖
@@ -237,6 +242,7 @@ exports[`Input allowClear should not show icon if value is undefined or empty st
     >
       <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
+        tabindex="-1"
         type="button"
       >
         ✖