fix(Checkbox): fix Checkbox not clickable in Firefox (#3728)

* fix(Checkbox): fix Checkbox not clickable in Firefox

* test: update CheckPickerSpec.tsx

* test: update CheckPickerSpec.tsx

src/CheckPicker/test/CheckPickerSpec.tsx

@@ -273,7 +273,7 @@ describe('CheckPicker', () => {
     fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });
     fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });
 
-    expect(screen.getByRole('listbox').scrollTop).to.equal(36);
+    expect(screen.getByRole('listbox').scrollTop).to.not.equal(0);
 
     fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });
 
@@ -286,7 +286,7 @@ describe('CheckPicker', () => {
     fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowUp' });
     fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowUp' });
 
-    expect(screen.getByRole('listbox').scrollTop).to.equal(36);
+    expect(screen.getByRole('listbox').scrollTop).to.not.equal(0);
 
     fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowUp' });
 

src/Checkbox/Checkbox.tsx

@@ -240,7 +240,7 @@ const Checkbox: RsRefForwardingComponent<'div', CheckboxProps> = React.forwardRe
           onClick={onCheckboxClick}
           onChange={handleChange}
         />
-        <span className={prefix`inner`} aria-hidden role="presentation" />
+        <span className={prefix`inner`} aria-hidden data-testid="checkbox-control-inner" />
       </span>
     );
 

src/Checkbox/styles/index.less

@@ -86,6 +86,8 @@
     right: -@checkbox-sense-width;
     bottom: -@checkbox-sense-width;
     left: -@checkbox-sense-width;
+    min-width: 36px;
+    min-height: 36px;
   }
 
   &::before,

src/Checkbox/test/CheckboxStylesSpec.tsx

@@ -1,19 +1,24 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import Checkbox from '../Checkbox';
 import { toRGB, itChrome } from '@test/utils';
 
 import '../styles/index.less';
 
 describe('Checkbox styles', () => {
   itChrome('Should render the correct border', () => {
-    const instanceRef = React.createRef<HTMLDivElement>();
-    render(<Checkbox ref={instanceRef} />);
+    render(<Checkbox />);
 
-    const innerDom = instanceRef.current?.querySelector('.rs-checkbox-inner') as HTMLElement;
-    assert.equal(
-      window.getComputedStyle(innerDom, '::before').border,
+    const inner = screen.getByTestId('checkbox-control-inner');
+    expect(window.getComputedStyle(inner, '::before').border).to.equal(
       `1px solid ${toRGB('#d9d9d9')}`
     );
   });
+
+  it('Should render the correct size', () => {
+    render(<Checkbox />);
+
+    expect(screen.getByRole('checkbox')).to.have.style('width', '36px');
+    expect(screen.getByRole('checkbox')).to.have.style('height', '36px');
+  });
 });