From 78b2c531b17042875924e6d6364e3a9bb9d0ceff Mon Sep 17 00:00:00 2001
From: Pareder <ruskc2beat@gmail.com>
Date: Wed, 1 Jul 2026 10:16:47 +0300
Subject: [PATCH] feat: refactor Footer component to be accessible

---
 assets/index.less                |  5 -----
 src/PickerInput/Popup/Footer.tsx | 35 +++++++++++++------------------
 src/PickerInput/RangePicker.tsx  |  6 ++++--
 src/PickerInput/SinglePicker.tsx |  6 ++++--
 src/PickerInput/context.tsx      |  3 ++-
 src/interface.tsx                | 11 +++-------
 tests/components.spec.tsx        |  2 +-
 tests/multiple.spec.tsx          |  8 +++----
 tests/new-range.spec.tsx         | 36 ++++++++++++++++----------------
 tests/picker.spec.tsx            | 28 ++++++++++++-------------
 tests/range.spec.tsx             | 34 +++++++++++++++---------------
 tests/util/commonUtil.tsx        |  2 +-
 12 files changed, 82 insertions(+), 94 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index 48522d422..ae3b20dec 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -191,11 +191,6 @@
     margin: 0;
     padding: 0;
     overflow: hidden;
-    list-style: none;
-
-    > li {
-      display: inline-block;
-    }
   }
 
   &-ok {
diff --git a/src/PickerInput/Popup/Footer.tsx b/src/PickerInput/Popup/Footer.tsx
index ba15dba3d..e7a8d58f2 100644
--- a/src/PickerInput/Popup/Footer.tsx
+++ b/src/PickerInput/Popup/Footer.tsx
@@ -45,7 +45,8 @@ export default function Footer(props: FooterProps) {
   const {
     prefixCls,
     locale,
-    button: Button = 'button',
+    nowButton: NowButton = 'button',
+    okButton: OkButton = 'button',
     classNames,
     styles,
   } = React.useContext(PickerContext);
@@ -70,35 +71,29 @@ export default function Footer(props: FooterProps) {
     }
   };
 
-  const nowPrefixCls = `${prefixCls}-now`;
-  const nowBtnPrefixCls = `${nowPrefixCls}-btn`;
-
   const presetNode = showNow && (
-    <li className={nowPrefixCls}>
-      <a
-        className={clsx(nowBtnPrefixCls, nowDisabled && `${nowBtnPrefixCls}-disabled`)}
-        aria-disabled={nowDisabled}
-        onClick={onInternalNow}
-      >
-        {internalMode === 'date' ? locale.today : locale.now}
-      </a>
-    </li>
+    <NowButton
+      type="button"
+      className={`${prefixCls}-now`}
+      disabled={nowDisabled}
+      onClick={onInternalNow}
+    >
+      {internalMode === 'date' ? locale.today : locale.now}
+    </NowButton>
   );
 
   // >>> OK
   const okNode = needConfirm && (
-    <li className={`${prefixCls}-ok`}>
-      <Button disabled={invalid} onClick={onSubmit}>
-        {locale.ok}
-      </Button>
-    </li>
+    <OkButton type="button" disabled={invalid} className={`${prefixCls}-ok`} onClick={onSubmit}>
+      {locale.ok}
+    </OkButton>
   );
 
   const rangeNode = (presetNode || okNode) && (
-    <ul className={`${prefixCls}-ranges`}>
+    <div className={`${prefixCls}-ranges`}>
       {presetNode}
       {okNode}
-    </ul>
+    </div>
   );
 
   // ======================== Render ========================
diff --git a/src/PickerInput/RangePicker.tsx b/src/PickerInput/RangePicker.tsx
index 8bf7d9e76..84e3a1bba 100644
--- a/src/PickerInput/RangePicker.tsx
+++ b/src/PickerInput/RangePicker.tsx
@@ -717,7 +717,8 @@ function RangePicker<DateType extends object = any>(
       prefixCls,
       locale,
       generateConfig,
-      button: components.button,
+      nowButton: components.nowButton,
+      okButton: components.okButton,
       input: components.input,
       classNames: mergedClassNames,
       styles: mergedStyles,
@@ -726,7 +727,8 @@ function RangePicker<DateType extends object = any>(
       prefixCls,
       locale,
       generateConfig,
-      components.button,
+      components.nowButton,
+      components.okButton,
       components.input,
       mergedClassNames,
       mergedStyles,
diff --git a/src/PickerInput/SinglePicker.tsx b/src/PickerInput/SinglePicker.tsx
index 6cdf6be3c..d171f36e7 100644
--- a/src/PickerInput/SinglePicker.tsx
+++ b/src/PickerInput/SinglePicker.tsx
@@ -604,7 +604,8 @@ function Picker<DateType extends object = any>(
       prefixCls,
       locale,
       generateConfig,
-      button: components.button,
+      nowButton: components.nowButton,
+      okButton: components.okButton,
       input: components.input,
       classNames: mergedClassNames,
       styles: mergedStyles,
@@ -613,7 +614,8 @@ function Picker<DateType extends object = any>(
       prefixCls,
       locale,
       generateConfig,
-      components.button,
+      components.nowButton,
+      components.okButton,
       components.input,
       mergedClassNames,
       mergedStyles,
diff --git a/src/PickerInput/context.tsx b/src/PickerInput/context.tsx
index 6f3c66aab..7591c2e8d 100644
--- a/src/PickerInput/context.tsx
+++ b/src/PickerInput/context.tsx
@@ -8,7 +8,8 @@ export interface PickerContextProps<DateType = any> {
   locale: Locale;
   generateConfig: GenerateConfig<DateType>;
   /** Customize button component */
-  button?: Components['button'];
+  nowButton?: Components['nowButton'];
+  okButton?: Components['okButton'];
   input?: Components['input'];
   classNames: FilledClassNames;
   styles: FilledStyles;
diff --git a/src/interface.tsx b/src/interface.tsx
index 63a690d06..96984ead0 100644
--- a/src/interface.tsx
+++ b/src/interface.tsx
@@ -275,7 +275,8 @@ export interface SharedPanelProps<DateType extends object = any> {
 
 export type Components<DateType extends object = any> = Partial<
   Record<InternalMode, React.ComponentType<SharedPanelProps<DateType>>> & {
-    button?: React.ComponentType<any> | string;
+    nowButton?: React.ComponentType<any> | string;
+    okButton?: React.ComponentType<any> | string;
     input?: React.ComponentType<any> | string;
   }
 >;
@@ -316,13 +317,7 @@ export type SemanticName = 'root' | 'prefix' | 'input' | 'suffix';
 export type PreviewValueType = 'hover';
 
 export type PanelSemanticName =
-  | 'root'
-  | 'header'
-  | 'body'
-  | 'content'
-  | 'item'
-  | 'footer'
-  | 'container';
+  'root' | 'header' | 'body' | 'content' | 'item' | 'footer' | 'container';
 
 export interface SharedPickerProps<DateType extends object = any>
   extends
diff --git a/tests/components.spec.tsx b/tests/components.spec.tsx
index f53965554..84e087c31 100644
--- a/tests/components.spec.tsx
+++ b/tests/components.spec.tsx
@@ -26,7 +26,7 @@ describe('Picker.Components', () => {
             good: [null, null],
           }}
           components={{
-            button: Button,
+            okButton: Button,
           }}
           picker="time"
           open
diff --git a/tests/multiple.spec.tsx b/tests/multiple.spec.tsx
index fee0cd103..866d35cba 100644
--- a/tests/multiple.spec.tsx
+++ b/tests/multiple.spec.tsx
@@ -49,7 +49,7 @@ describe('Picker.Multiple', () => {
     expect(isOpen()).toBeTruthy();
 
     // Confirm
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
+    fireEvent.click(document.querySelector('.rc-picker-ok'));
     expect(onChange).toHaveBeenCalledWith(expect.anything(), [
       '1990-09-01',
       '1990-09-03',
@@ -72,7 +72,7 @@ describe('Picker.Multiple', () => {
     selectCell(3);
 
     // Confirm
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
+    fireEvent.click(document.querySelector('.rc-picker-ok'));
     expect(onChange).toHaveBeenCalledWith(expect.anything(), ['1990-09-01', '1990-09-05']);
   });
 
@@ -112,7 +112,7 @@ describe('Picker.Multiple', () => {
     expect(container.querySelectorAll('.rc-picker-selection-item')).toHaveLength(1);
 
     // Confirm
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
+    fireEvent.click(document.querySelector('.rc-picker-ok'));
     expect(onChange).toHaveBeenCalledWith(expect.anything(), ['2000-01-28']);
   });
 
@@ -247,7 +247,7 @@ describe('Picker.Multiple', () => {
     );
 
     // Confirm
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
+    fireEvent.click(document.querySelector('.rc-picker-ok'));
     expect(onChange).toHaveBeenCalledWith(expect.anything(), ['1998-10-23']);
   });
 });
diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx
index 85a4dd07c..27e33f76f 100644
--- a/tests/new-range.spec.tsx
+++ b/tests/new-range.spec.tsx
@@ -391,7 +391,7 @@ describe('NewPicker.Range', () => {
       expect(onCalendarChange).toHaveBeenCalled();
 
       // Check button disabled
-      expect(document.querySelector('.rc-picker-ok button')).toBeDisabled();
+      expect(document.querySelector('.rc-picker-ok')).toBeDisabled();
     });
 
     it('not trigger on disabled all hours', () => {
@@ -413,7 +413,7 @@ describe('NewPicker.Range', () => {
       expect(onCalendarChange).toHaveBeenCalled();
 
       // Check button disabled
-      expect(document.querySelector('.rc-picker-ok button')).toBeDisabled();
+      expect(document.querySelector('.rc-picker-ok')).toBeDisabled();
     });
 
     it('not trigger onChange if presets is invalidate', () => {
@@ -454,10 +454,10 @@ describe('NewPicker.Range', () => {
       );
 
       openPicker(container);
-      fireEvent.click(document.querySelector('.rc-picker-now-btn'));
-      fireEvent.click(document.querySelector('.rc-picker-now-btn'));
+      fireEvent.click(document.querySelector('.rc-picker-now'));
+      fireEvent.click(document.querySelector('.rc-picker-now'));
 
-      expect(document.querySelector('.rc-picker-now-btn-disabled')).toBeTruthy();
+      expect(document.querySelector('.rc-picker-now')).toBeDisabled();
 
       expect(onChange).not.toHaveBeenCalled();
       expect(onCalendarChange).not.toHaveBeenCalled();
@@ -546,7 +546,7 @@ describe('NewPicker.Range', () => {
           value: '01:00:00',
         },
       });
-      expect(document.querySelector('.rc-picker-ok button')).not.toBeDisabled();
+      expect(document.querySelector('.rc-picker-ok')).not.toBeDisabled();
 
       // Disabled
       fireEvent.change(input, {
@@ -554,7 +554,7 @@ describe('NewPicker.Range', () => {
           value: '00:00:00',
         },
       });
-      expect(document.querySelector('.rc-picker-ok button')).toBeDisabled();
+      expect(document.querySelector('.rc-picker-ok')).toBeDisabled();
     });
 
     it('disabledDate provides info.type', () => {
@@ -602,7 +602,7 @@ describe('NewPicker.Range', () => {
     onCalendarChange.mockReset();
 
     // End field
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
+    fireEvent.click(document.querySelector('.rc-picker-ok'));
     selectCell(7);
     expect(onCalendarChange).toHaveBeenCalledWith(
       expect.anything(),
@@ -655,14 +655,14 @@ describe('NewPicker.Range', () => {
       // Changed by click OK
       openPicker(container);
       selectCell(10);
-      fireEvent.click(document.querySelector('.rc-picker-ok button'));
+      fireEvent.click(document.querySelector('.rc-picker-ok'));
 
       expect(container.querySelectorAll('input')[0]).toHaveValue('1990-09-10');
 
       // End time
       selectCell(15, 1);
       expect(onChange).not.toHaveBeenCalled();
-      fireEvent.click(document.querySelector('.rc-picker-ok button'));
+      fireEvent.click(document.querySelector('.rc-picker-ok'));
 
       expect(onChange).toHaveBeenCalledWith(expect.anything(), ['1990-09-10', '1990-10-15']);
     });
@@ -721,10 +721,10 @@ describe('NewPicker.Range', () => {
       const { container } = render(<DayRangePicker onChange={onChange} showTime />);
       openPicker(container);
       selectCell(15);
-      fireEvent.click(document.querySelector('.rc-picker-ok button'));
+      fireEvent.click(document.querySelector('.rc-picker-ok'));
 
       selectCell(16);
-      fireEvent.click(document.querySelector('.rc-picker-ok button'));
+      fireEvent.click(document.querySelector('.rc-picker-ok'));
 
       expect(onChange).toHaveBeenCalledWith(expect.anything(), [
         '1990-09-15 00:00:00',
@@ -738,11 +738,11 @@ describe('NewPicker.Range', () => {
       expect(container.querySelectorAll('input')[0]).toHaveFocus();
       expect(container.querySelectorAll('input')[1]).not.toHaveFocus();
 
-      fireEvent.click(document.querySelector('.rc-picker-ok button'));
+      fireEvent.click(document.querySelector('.rc-picker-ok'));
       openPicker(container, 1);
       expect(container.querySelectorAll('input')[1]).toHaveFocus();
       selectCell(2);
-      fireEvent.click(document.querySelector('.rc-picker-ok button'));
+      fireEvent.click(document.querySelector('.rc-picker-ok'));
       expect(onChange).toHaveBeenCalledWith(expect.anything(), [
         '1990-09-01 00:00:00',
         '1990-09-02 00:00:00',
@@ -1381,8 +1381,8 @@ describe('NewPicker.Range', () => {
     const { container } = render(<DayRangePicker showNow onChange={onChange} />);
 
     openPicker(container);
-    fireEvent.click(document.querySelector('.rc-picker-now-btn'));
-    fireEvent.click(document.querySelector('.rc-picker-now-btn'));
+    fireEvent.click(document.querySelector('.rc-picker-now'));
+    fireEvent.click(document.querySelector('.rc-picker-now'));
 
     expect(onChange).toHaveBeenCalledWith(expect.anything(), ['1990-09-03', '1990-09-03']);
   });
@@ -1412,12 +1412,12 @@ describe('NewPicker.Range', () => {
 
     // Start
     fireEvent.click(document.querySelectorAll('li.rc-picker-time-panel-cell')[2]);
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
+    fireEvent.click(document.querySelector('.rc-picker-ok'));
     await waitFakeTimer();
 
     // End
     fireEvent.click(document.querySelectorAll('li.rc-picker-time-panel-cell')[2]);
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
+    fireEvent.click(document.querySelector('.rc-picker-ok'));
     await waitFakeTimer();
 
     expect(onChange).toHaveBeenCalledWith(expect.anything(), [
diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
index 15b964ede..fa6ab1064 100644
--- a/tests/picker.spec.tsx
+++ b/tests/picker.spec.tsx
@@ -553,7 +553,7 @@ describe('Picker.Basic', () => {
       const onCalendarChange = jest.fn();
       const { container } = render(<DayPicker onCalendarChange={onCalendarChange} showToday />);
       openPicker(container);
-      fireEvent.click(document.querySelector('.rc-picker-now-btn'));
+      fireEvent.click(document.querySelector('.rc-picker-now'));
       expect(isSame(onCalendarChange.mock.calls[0][0], '1990-09-03')).toBeTruthy();
     });
 
@@ -563,10 +563,8 @@ describe('Picker.Basic', () => {
         <DayPicker onCalendarChange={onCalendarChange} disabledDate={() => true} showToday />,
       );
       openPicker(container);
-      expect(document.querySelector('.rc-picker-now-btn')).toHaveClass(
-        'rc-picker-now-btn-disabled',
-      );
-      fireEvent.click(document.querySelector('.rc-picker-now-btn'));
+      expect(document.querySelector('.rc-picker-now')).toBeDisabled();
+      fireEvent.click(document.querySelector('.rc-picker-now'));
       expect(onCalendarChange).not.toHaveBeenCalled();
     });
 
@@ -574,7 +572,7 @@ describe('Picker.Basic', () => {
       it(`not works on ${name}`, () => {
         const { container } = render(<DayPicker picker={name as any} showToday />);
         openPicker(container);
-        expect(document.querySelector('.rc-picker-now-btn')).toBeFalsy();
+        expect(document.querySelector('.rc-picker-now')).toBeFalsy();
       });
     });
   });
@@ -611,7 +609,7 @@ describe('Picker.Basic', () => {
       const onCalendarChange = jest.fn();
       const { container } = render(<DayPicker onCalendarChange={onCalendarChange} showTime />);
       openPicker(container);
-      fireEvent.click(document.querySelector('.rc-picker-now > a'));
+      fireEvent.click(document.querySelector('.rc-picker-now'));
 
       expect(
         isSame(onCalendarChange.mock.calls[0][0], '1990-09-03 00:00:00', 'second'),
@@ -624,7 +622,7 @@ describe('Picker.Basic', () => {
         <DayPicker onCalendarChange={onCalendarChange} showNow={false} />,
       );
       openPicker(container);
-      expect(document.querySelector('.rc-picker-now > a')).toBeFalsy();
+      expect(document.querySelector('.rc-picker-now')).toBeFalsy();
     });
 
     it('datetime close showNow', () => {
@@ -633,7 +631,7 @@ describe('Picker.Basic', () => {
         <DayPicker onCalendarChange={onCalendarChange} showTime showNow={false} />,
       );
       openPicker(container);
-      expect(document.querySelector('.rc-picker-now > a')).toBeFalsy();
+      expect(document.querySelector('.rc-picker-now')).toBeFalsy();
     });
 
     it('time should display now', () => {
@@ -643,7 +641,7 @@ describe('Picker.Basic', () => {
       openPicker(container);
       expect(document.querySelector('.rc-picker-header')).toBeFalsy();
 
-      fireEvent.click(document.querySelector('.rc-picker-now > a'));
+      fireEvent.click(document.querySelector('.rc-picker-now'));
 
       expect(
         isSame(onCalendarChange.mock.calls[0][0], '1990-09-03 00:00:00', 'second'),
@@ -656,7 +654,7 @@ describe('Picker.Basic', () => {
         <DayPicker onCalendarChange={onCalendarChange} picker="time" showNow={false} />,
       );
       openPicker(container);
-      expect(document.querySelector('.rc-picker-now > a')).toBeFalsy();
+      expect(document.querySelector('.rc-picker-now')).toBeFalsy();
     });
   });
 
@@ -669,7 +667,7 @@ describe('Picker.Basic', () => {
       );
 
       openPicker(container);
-      fireEvent.click(document.querySelector('.rc-picker-now > a'));
+      fireEvent.click(document.querySelector('.rc-picker-now'));
 
       expect(
         isSame(onCalendarChange.mock.calls[0][0], '1990-09-03 00:10:00', 'second'),
@@ -847,7 +845,7 @@ describe('Picker.Basic', () => {
     );
 
     openPicker(container);
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
+    fireEvent.click(document.querySelector('.rc-picker-ok'));
 
     expect(isSame(onChange.mock.calls[0][0], '2000-01-01 00:10:23')).toBeTruthy();
 
@@ -1634,7 +1632,7 @@ describe('Picker.Basic', () => {
       const onCalendarChange = jest.fn();
       render(<DayPicker picker="time" open showNow onCalendarChange={onCalendarChange} />);
 
-      const submitBtn = document.querySelector('.rc-picker-ok button');
+      const submitBtn = document.querySelector('.rc-picker-ok');
       expect(submitBtn).toHaveAttribute('disabled');
 
       selectCell('00');
@@ -1646,7 +1644,7 @@ describe('Picker.Basic', () => {
       );
       onCalendarChange.mockReset();
 
-      fireEvent.click(document.querySelector('.rc-picker-now-btn'));
+      fireEvent.click(document.querySelector('.rc-picker-now'));
       expect(submitBtn).not.toHaveAttribute('disabled');
       expect(onCalendarChange).toHaveBeenCalledWith(
         expect.anything(),
diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
index 174a1d64a..9eebebc8f 100644
--- a/tests/range.spec.tsx
+++ b/tests/range.spec.tsx
@@ -281,7 +281,7 @@ describe('Picker.Range', () => {
       fireEvent.click(baseElement.querySelectorAll('.rc-picker-input')[0]);
       expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeFalsy();
       fireEvent.click(baseElement.querySelector('.rc-picker-cell-inner'));
-      fireEvent.click(baseElement.querySelector('.rc-picker-ok button'));
+      fireEvent.click(baseElement.querySelector('.rc-picker-ok'));
 
       act(() => {
         jest.runAllTimers();
@@ -296,7 +296,7 @@ describe('Picker.Range', () => {
       fireEvent.click(baseElement.querySelectorAll('.rc-picker-input')[1]);
       expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeFalsy();
       selectCell(11);
-      fireEvent.click(baseElement.querySelector('.rc-picker-ok button'));
+      fireEvent.click(baseElement.querySelector('.rc-picker-ok'));
 
       act(() => {
         jest.runAllTimers();
@@ -576,7 +576,7 @@ describe('Picker.Range', () => {
 
       openPicker(container);
       selectCell(13);
-      fireEvent.click(document.querySelector('.rc-picker-ok button'));
+      fireEvent.click(document.querySelector('.rc-picker-ok'));
       selectCell(23);
 
       matchValues(container, '1990-09-13 01:02:03', '1990-09-23 05:06:07');
@@ -850,7 +850,7 @@ describe('Picker.Range', () => {
     openPicker(container);
 
     // Not trigger when not value
-    expect(document.querySelector<HTMLButtonElement>('.rc-picker-ok button').disabled).toBeTruthy();
+    expect(document.querySelector<HTMLButtonElement>('.rc-picker-ok').disabled).toBeTruthy();
     expect(onCalendarChange).not.toHaveBeenCalled();
 
     // Trigger when start Ok'd
@@ -859,7 +859,7 @@ describe('Picker.Range', () => {
     expect(onCalendarChange).toHaveBeenCalledWith(expect.anything(), ['1990-09-11 00:00:00', ''], {
       range: 'start',
     });
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
+    fireEvent.click(document.querySelector('.rc-picker-ok'));
     expect(onCalendarChange).toHaveBeenCalledWith(
       [expect.anything(), null],
       ['1990-09-11 00:00:00', ''],
@@ -876,7 +876,7 @@ describe('Picker.Range', () => {
       ['1990-09-11 00:00:00', '1990-09-23 00:00:00'],
       { range: 'end' },
     );
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
+    fireEvent.click(document.querySelector('.rc-picker-ok'));
     expect(onOk).toHaveBeenCalledWith([expect.anything(), expect.anything()]);
   });
 
@@ -1031,11 +1031,11 @@ describe('Picker.Range', () => {
       openPicker(container);
       selectCell(15);
       fireEvent.click(findLast(document.querySelector('ul'), 'li'));
-      fireEvent.click(document.querySelector('.rc-picker-ok button'));
+      fireEvent.click(document.querySelector('.rc-picker-ok'));
 
       selectCell(15);
       fireEvent.click(document.querySelector('ul').querySelector('li'));
-      fireEvent.click(document.querySelector('.rc-picker-ok button'));
+      fireEvent.click(document.querySelector('.rc-picker-ok'));
 
       expect(onChange).toHaveBeenCalledWith(expect.anything(), [
         '1990-09-15 00:00:00',
@@ -1055,10 +1055,10 @@ describe('Picker.Range', () => {
         );
         openPicker(container);
         fireEvent.click(findLast(document.querySelector('ul'), 'li'));
-        fireEvent.click(document.querySelector('.rc-picker-ok button'));
+        fireEvent.click(document.querySelector('.rc-picker-ok'));
 
         fireEvent.click(document.querySelector('ul').querySelectorAll('li')[2]);
-        fireEvent.click(document.querySelector('.rc-picker-ok button'));
+        fireEvent.click(document.querySelector('.rc-picker-ok'));
 
         expect(onChange).toHaveBeenCalledWith(expect.anything(), [start, end]);
 
@@ -1591,14 +1591,14 @@ describe('Picker.Range', () => {
 
     openPicker(container);
 
-    expect(document.querySelector<HTMLButtonElement>('.rc-picker-ok button').disabled).toBeTruthy();
+    expect(document.querySelector<HTMLButtonElement>('.rc-picker-ok').disabled).toBeTruthy();
 
     fireEvent.click(
       document.querySelector('.rc-picker-time-panel-column').querySelectorAll('li')[6],
     );
 
     expect(document.querySelectorAll('input')[0].value).toEqual('2020-07-24 06:00:00');
-    expect(document.querySelector<HTMLButtonElement>('.rc-picker-ok button').disabled).toBeTruthy();
+    expect(document.querySelector<HTMLButtonElement>('.rc-picker-ok').disabled).toBeTruthy();
   });
 
   // https://github.com/ant-design/ant-design/issues/26024
@@ -1639,10 +1639,10 @@ describe('Picker.Range', () => {
     openPicker(container);
 
     selectCell(24);
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
+    fireEvent.click(document.querySelector('.rc-picker-ok'));
 
     fireEvent.click(document.querySelector('ul').querySelector('li'));
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
+    fireEvent.click(document.querySelector('.rc-picker-ok'));
 
     matchValues(container, '1990-09-24 00:00:00', '1990-09-24 00:00:00');
   });
@@ -1652,10 +1652,10 @@ describe('Picker.Range', () => {
     openPicker(container, 1);
 
     selectCell(24);
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
+    fireEvent.click(document.querySelector('.rc-picker-ok'));
 
     fireEvent.click(document.querySelector('ul').querySelector('li'));
-    fireEvent.click(document.querySelector('.rc-picker-ok button'));
+    fireEvent.click(document.querySelector('.rc-picker-ok'));
 
     matchValues(container, '1990-09-24 00:00:00', '1990-09-24 00:00:00');
   });
@@ -2024,7 +2024,7 @@ describe('Picker.Range', () => {
 
     for (let i = 0; i < 2; i++) {
       selectCell(24);
-      fireEvent.click(document.querySelector('.rc-picker-ok button'));
+      fireEvent.click(document.querySelector('.rc-picker-ok'));
 
       await waitFakeTimer();
     }
diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx
index 17ca5c113..dd3fbcbdf 100644
--- a/tests/util/commonUtil.tsx
+++ b/tests/util/commonUtil.tsx
@@ -150,7 +150,7 @@ export function clickButton(type: string) {
 }
 
 export function confirmOK() {
-  fireEvent.click(document.querySelector('.rc-picker-ok > *'));
+  fireEvent.click(document.querySelector('.rc-picker-ok'));
 }
 
 export function clearValue() {