fix: remove tabIndex={-1} from clear button to make it keyboard accessible (#168)

Author: cyphercodes

src/BaseInput.tsx

@@ -88,7 +88,6 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
       clearIcon = (
         <button
           type="button"
-          tabIndex={-1}
           onClick={(event) => {
             handleReset?.(event);
             onClear?.();

tests/BaseInput.test.tsx

@@ -51,8 +51,6 @@ describe('BaseInput', () => {
     const onBlur = jest.fn();
     const onFocus = jest.fn();
 
-    const user = userEvent.setup();
-
     const Demo: FC = () => {
       const [value, setValue] = useState<string>('');
 
@@ -97,33 +95,27 @@ describe('BaseInput', () => {
       expect(inputEl!.value).toBe('');
     });
 
-    // it('By focus and Space', async () => {
-    //   const { container } = render(<Demo />);
-
-    //   const inputEl = container.querySelector('input');
-    //   await user.click(inputEl!);
-
-    //   await user.type(inputEl!, 'some text');
-    //   expect(inputEl!.value).toBe('some text');
+    it.each(['[Space]', '[Enter]'])('By focus and %s', async (key) => {
+      const user = userEvent.setup();
+      const { container } = render(<Demo />);
 
-    //   await user.tab();
-    //   await user.keyboard('[Space]');
-    //   expect(inputEl!.value).toBe('');
-    // });
+      const inputEl = container.querySelector('input');
+      await user.click(inputEl!);
 
-    // it('By focus and Enter', async () => {
-    //   const { container } = render(<Demo />);
+      await user.type(inputEl!, 'some text');
+      expect(inputEl!.value).toBe('some text');
 
-    //   const inputEl = container.querySelector('input');
-    //   await user.click(inputEl!);
+      await user.tab();
 
-    //   await user.type(inputEl!, 'some text');
-    //   expect(inputEl!.value).toBe('some text');
+      const clearIcon = container.querySelector<HTMLButtonElement>(
+        '.rc-input-clear-icon',
+      )!;
+      expect(document.activeElement).toBe(clearIcon);
+      expect(clearIcon.tabIndex).toBe(0);
 
-    //   await user.tab();
-    //   await user.keyboard('[Enter]');
-    //   expect(inputEl!.value).toBe('');
-    // });
+      await user.keyboard(key);
+      expect(inputEl!.value).toBe('');
+    });
   });
 
   it('should display clearIcon correctly', () => {

tests/__snapshots__/TextArea.allowClear.test.tsx.snap

@@ -12,7 +12,6 @@ exports[`should support allowClear should not show icon if defaultValue is undef
   >
     <button
       class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
-      tabindex="-1"
       type="button"
     >
       ✖
@@ -33,7 +32,6 @@ exports[`should support allowClear should not show icon if defaultValue is undef
   >
     <button
       class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
-      tabindex="-1"
       type="button"
     >
       ✖
@@ -54,7 +52,6 @@ exports[`should support allowClear should not show icon if defaultValue is undef
   >
     <button
       class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
-      tabindex="-1"
       type="button"
     >
       ✖
@@ -75,7 +72,6 @@ exports[`should support allowClear should not show icon if value is undefined, n
   >
     <button
       class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
-      tabindex="-1"
       type="button"
     >
       ✖
@@ -96,7 +92,6 @@ exports[`should support allowClear should not show icon if value is undefined, n
   >
     <button
       class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
-      tabindex="-1"
       type="button"
     >
       ✖
@@ -117,7 +112,6 @@ exports[`should support allowClear should not show icon if value is undefined, n
   >
     <button
       class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
-      tabindex="-1"
       type="button"
     >
       ✖

tests/__snapshots__/TextArea.test.tsx.snap

@@ -20,7 +20,6 @@ exports[`TextArea classNames and styles should work 1`] = `
       <button
         class="rc-textarea-clear-icon rc-textarea-clear-icon-has-suffix custom-clear"
         style="color: orange;"
-        tabindex="-1"
         type="button"
       >
         ✖

tests/__snapshots__/index.test.tsx.snap

@@ -25,7 +25,6 @@ exports[`Input allowClear classNames and styles should work 1`] = `
       <button
         class="rc-input-clear-icon rc-input-clear-icon-has-suffix custom-clear"
         style="color: orange;"
-        tabindex="-1"
         type="button"
       >
         ✖
@@ -125,7 +124,6 @@ exports[`Input allowClear should change type when click 1`] = `
     >
       <button
         class="rc-input-clear-icon"
-        tabindex="-1"
         type="button"
       >
         ✖
@@ -150,7 +148,6 @@ exports[`Input allowClear should change type when click 2`] = `
     >
       <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
-        tabindex="-1"
         type="button"
       >
         ✖
@@ -175,7 +172,6 @@ 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"
       >
         ✖
@@ -200,7 +196,6 @@ 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"
       >
         ✖
@@ -225,7 +220,6 @@ 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"
       >
         ✖
@@ -250,7 +244,6 @@ 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"
       >
         ✖