feat: refactor Footer component to be accessible#990
Conversation
|
@Pareder is attempting to deploy a commit to the afc163's projects Team on Vercel. A member of the Team first needs to authorize it. |
Walkthrough将 Footer 中固定的 li/a/Button/ul 结构改为可通过 nowButton/okButton 配置的组件，相应更新了 Components 与 PickerContextProps 接口、RangePicker/SinglePicker 的上下文装配，并移除了旧的 ranges 列表样式。测试文件同步更新了大量 DOM 选择器以匹配新结构。 Changes按钮组件化重构
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant Footer
participant NowButton
participant OkButton
participant PickerContext
PickerContext->>Footer: 提供 nowButton/okButton 配置
User->>Footer: 点击 Now 区域
Footer->>NowButton: 渲染并触发 onInternalNow
User->>Footer: 点击 Ok 区域
Footer->>OkButton: 渲染并触发 onSubmit
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Warning Gemini encountered an error creating the review. You can try again by commenting |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #990 +/- ##
==========================================
- Coverage 98.81% 98.81% -0.01%
==========================================
Files 66 66
Lines 2698 2696 -2
Branches 749 744 -5
==========================================
- Hits 2666 2664 -2
Misses 29 29
Partials 3 3 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with 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.
Inline comments:
In `@src/PickerInput/Popup/Footer.tsx`:
- Around line 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.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 60ca9bc5-a578-4506-ad6f-e03b5abf503e
📒 Files selected for processing (12)
assets/index.lesssrc/PickerInput/Popup/Footer.tsxsrc/PickerInput/RangePicker.tsxsrc/PickerInput/SinglePicker.tsxsrc/PickerInput/context.tsxsrc/interface.tsxtests/components.spec.tsxtests/multiple.spec.tsxtests/new-range.spec.tsxtests/picker.spec.tsxtests/range.spec.tsxtests/util/commonUtil.tsx
💤 Files with no reviewable changes (1)
- assets/index.less
| 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> |
There was a problem hiding this comment.
🎯 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.
| 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.
1 participant
Summary
This PR is a small chunk of a big one #972 focusing on Footer accessibility and containing breaking changes.
<button type="button" class="rc-picker-now">(previously<a class="rc-picker-now-btn">), and the OK control a<button type="button" class="rc-picker-ok">.<div class="rc-picker-ranges">instead of<ul>/<li>.Breaking changes
components.buttonsplit intocomponents.nowButtonandcomponents.okButton.nowButtonrenders the Now/Today action;okButtonrenders the confirm action.Footer DOM / class changes. Custom CSS targeting the old structure must be updated:
.rc-picker-now-btn→ removed; style.rc-picker-now(now applied directly to the<button>)..rc-picker-ranges > li/ul.rc-picker-ranges→.rc-picker-rangesis now a (flex column); the<li>wrappers are gone.<a>to<button>.If we need to leave
components.buttonfor backwards compatibility and add a deprecation notice please let me know.Migration
components.button→components.nowButton/components.okButton..rc-picker-now-btn,.rc-picker-now a, or.rc-picker-ranges li.Summary by CodeRabbit
新功能
Bug 修复
测试