Skip to content

feat: refactor Footer component to be accessible #990

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Pareder wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat: refactor Footer component to be accessible #990

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
78b2c53
feat: refactor Footer component to be accessible
Pareder Jul 1, 2026
4fada30
Merge remote-tracking branch 'upstream/master' into feat/improve-foot…
Pareder Jul 23, 2026
60f6f81
Fix after review
Pareder Aug 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions assets/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,11 +191,6 @@
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;

> li {
display: inline-block;
}
}

&-ok {
Expand Down
50 changes: 31 additions & 19 deletions src/PickerInput/Popup/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,14 @@ export interface FooterProps<DateType extends object = any> {
onNow: (now: DateType) => void;
}

/**
* `type` is a native `button` attribute. Custom components (e.g. `antd` Button) use `type`
* as their own variant prop, so only pass it when the intrinsic element is rendered.
*/
function getNativeTypeProps(Component: React.ComponentType<any> | string) {
return Component === 'button' ? ({ type: 'button' } as const) : null;
}

export default function Footer(props: FooterProps) {
const {
mode,
Expand All @@ -45,7 +53,9 @@ export default function Footer(props: FooterProps) {
const {
prefixCls,
locale,
button: Button = 'button',
button = 'button',
nowButton,
okButton,
classNames,
styles,
} = React.useContext(PickerContext);
Expand All @@ -70,35 +80,37 @@ export default function Footer(props: FooterProps) {
}
};

const nowPrefixCls = `${prefixCls}-now`;
const nowBtnPrefixCls = `${nowPrefixCls}-btn`;
const NowButton = nowButton || button;
const OkButton = okButton || button;

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
{...getNativeTypeProps(NowButton)}
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
{...getNativeTypeProps(OkButton)}
disabled={invalid}
className={`${prefixCls}-ok`}
onClick={onSubmit}
>
{locale.ok}
</OkButton>
Comment on lines 98 to +106

@coderabbitai coderabbitai Bot Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

不要把 onSubmit 直接传给原生 button 的 onClick。

这里的 onSubmit 在 RangePicker 中是 triggerPartConfirm(date?)。改成原生 button 后，点击 OK 会把 MouseEvent 作为第一个参数传进去，区间选择的确认流会把事件对象当成日期提交，后续状态会被污染。

建议修复 
-  const okNode = needConfirm && (
-    <OkButton type="button" disabled={invalid} className={`${prefixCls}-ok`} onClick={onSubmit}>
+  const okNode = needConfirm && (
+    <OkButton
+      type="button"
+      disabled={invalid}
+      className={`${prefixCls}-ok`}
+      onClick={() => onSubmit()}
+    >
       {locale.ok}
     </OkButton>
   );
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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 okNode = needConfirm && (
<OkButton
type="button"
disabled={invalid}
className={`${prefixCls}-ok`}
onClick={() => onSubmit()}
>
{locale.ok}
</OkButton>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/PickerInput/Popup/Footer.tsx` around lines 86 - 89, The OkButton in
Footer.tsx should not pass RangePicker’s onSubmit directly to the native button
onClick, because triggerPartConfirm(date?) will receive a MouseEvent instead of
a date. Update the OkButton wiring so the click handler invokes onSubmit without
forwarding the event, keeping the confirmation flow in Popup/Footer and
RangePicker consistent and preventing event objects from being treated as dates.

);

const rangeNode = (presetNode || okNode) && (
<ul className={`${prefixCls}-ranges`}>
<div className={`${prefixCls}-ranges`}>
{presetNode}
{okNode}
</ul>
</div>
);

// ======================== Render ========================
Expand Down
4 changes: 4 additions & 0 deletions src/PickerInput/RangePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -718,6 +718,8 @@ function RangePicker<DateType extends object = any>(
locale,
generateConfig,
button: components.button,
nowButton: components.nowButton,
okButton: components.okButton,
input: components.input,
classNames: mergedClassNames,
styles: mergedStyles,
Expand All @@ -727,6 +729,8 @@ function RangePicker<DateType extends object = any>(
locale,
generateConfig,
components.button,
components.nowButton,
components.okButton,
components.input,
mergedClassNames,
mergedStyles,
Expand Down
4 changes: 4 additions & 0 deletions src/PickerInput/SinglePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -605,6 +605,8 @@ function Picker<DateType extends object = any>(
locale,
generateConfig,
button: components.button,
nowButton: components.nowButton,
okButton: components.okButton,
input: components.input,
classNames: mergedClassNames,
styles: mergedStyles,
Expand All @@ -614,6 +616,8 @@ function Picker<DateType extends object = any>(
locale,
generateConfig,
components.button,
components.nowButton,
components.okButton,
components.input,
mergedClassNames,
mergedStyles,
Expand Down
9 changes: 8 additions & 1 deletion src/PickerInput/context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,15 @@ export interface PickerContextProps<DateType = any> {
prefixCls: string;
locale: Locale;
generateConfig: GenerateConfig<DateType>;
/** Customize button component */
/**
* Customize button component.
* @deprecated Please use `nowButton` and `okButton` instead.
*/
button?: Components['button'];
/** Customize the `now` / `today` button component */
nowButton?: Components['nowButton'];
/** Customize the `ok` button component */
okButton?: Components['okButton'];
input?: Components['input'];
classNames: FilledClassNames;
styles: FilledStyles;
Expand Down
8 changes: 7 additions & 1 deletion src/PickerInput/hooks/useFilledProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,15 +148,21 @@ export default function useFilledProps<
);

// ======================= Warning ========================
if (process.env.NODE_ENV !== 'production' && picker === 'time') {
if (process.env.NODE_ENV !== 'production') {
if (
picker === 'time' &&
['disabledHours', 'disabledMinutes', 'disabledSeconds'].some((key) => (props as any)[key])
) {
warning(
false,
`'disabledHours', 'disabledMinutes', 'disabledSeconds' will be removed in the next major version, please use 'disabledTime' instead.`,
);
}

warning(
!components.button,
`'components.button' is deprecated. Please use 'components.nowButton' and 'components.okButton' instead.`,
);
}

// ======================== Props =========================
Expand Down
3 changes: 3 additions & 0 deletions src/interface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,10 @@ export interface SharedPanelProps<DateType extends object = any> {

export type Components<DateType extends object = any> = Partial<
Record<InternalMode, React.ComponentType<SharedPanelProps<DateType>>> & {
/** @deprecated Please use `nowButton` and `okButton` instead. Fallback for both when set. */
button?: React.ComponentType<any> | string;
nowButton?: React.ComponentType<any> | string;
okButton?: React.ComponentType<any> | string;
input?: React.ComponentType<any> | string;
}
>;
Expand Down
66 changes: 65 additions & 1 deletion tests/components.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
import { resetWarned } from '@rc-component/util';
import { render } from '@testing-library/react';
import MockDate from 'mockdate';
import React from 'react';
import { DayPicker, DayRangePicker, getDay } from './util/commonUtil';

describe('Picker.Components', () => {
beforeEach(() => {
resetWarned();
jest.clearAllMocks();
});

beforeAll(() => {
MockDate.set(getDay('1990-09-03 00:00:00').toDate());
});
Expand All @@ -26,7 +32,7 @@ describe('Picker.Components', () => {
good: [null, null],
}}
components={{
button: Button,
okButton: Button,
}}
picker="time"
open
Expand All @@ -35,5 +41,63 @@ describe('Picker.Components', () => {

expect(document.querySelector('.rc-picker-footer').querySelectorAll('h1')).toHaveLength(1);
});

it(`${name} legacy 'button'`, () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const Component = component as any;
const Button: React.FC<any> = (props) => <h1 {...props} />;

render(
<Component
components={{
button: Button,
}}
picker="time"
showNow
open
/>,
);

// Fallback for both 'nowButton' and 'okButton'
expect(document.querySelector('.rc-picker-footer').querySelectorAll('h1')).toHaveLength(2);
expect(document.querySelector('.rc-picker-now').tagName).toBe('H1');
expect(document.querySelector('.rc-picker-ok').tagName).toBe('H1');

// Legacy 'button' should not receive the native 'type' attribute
expect(document.querySelector('.rc-picker-ok')).not.toHaveAttribute('type');

expect(errorSpy).toHaveBeenCalledWith(
"Warning: 'components.button' is deprecated. Please use 'components.nowButton' and 'components.okButton' instead.",
);

errorSpy.mockRestore();
});

it(`${name} 'nowButton' and 'okButton' override legacy 'button'`, () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const Component = component as any;
const Legacy: React.FC<any> = (props) => <h1 {...props} />;
const NowButton: React.FC<any> = (props) => <h2 {...props} />;
const OkButton: React.FC<any> = (props) => <h3 {...props} />;

render(
<Component
components={{
button: Legacy,
nowButton: NowButton,
okButton: OkButton,
}}
picker="time"
showNow
open
/>,
);

expect(document.querySelector('.rc-picker-footer').querySelectorAll('h1')).toHaveLength(0);
expect(document.querySelector('.rc-picker-now').tagName).toBe('H2');
expect(document.querySelector('.rc-picker-ok').tagName).toBe('H3');

errorSpy.mockRestore();
});
});
});
8 changes: 4 additions & 4 deletions tests/multiple.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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']);
});

Expand Down Expand Up @@ -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']);
});

Expand Down Expand Up @@ -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']);
});
});
Loading
Loading