feat: 数字键盘 customKey 支持单独定制 title，用于无障碍读屏 #6956
Conversation
dosubot
bot
added
the
size:M
|
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthrough将 NumberKeyboard 的 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as 用户
participant NK as NumberKeyboard
participant App as 上层回调
rect rgb(250,252,255)
note right of NK: 支持 string 或 {key,title}，也支持数组
U->>NK: 点击按键 (string 或 {key,title})
NK->>NK: 规范化为 realKey / title
alt 数字或自定义输入
NK-->>App: onInput(realKey)
else 删除键
NK-->>App: onDelete()
else 确认键
NK-->>App: onConfirm()
else 关闭键
NK-->>App: onClose()
end
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
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 |
Summary of ChangesHello @edokeh, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求的主要目的是增强数字键盘组件的无障碍功能。通过允许开发者为自定义按键提供一个明确的 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
commit: |
coderabbitai
bot
added
the
size:L
dosubot
bot
added
size:M
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/number-keyboard/index.zh.md(1 hunks)src/components/number-keyboard/number-keyboard.tsx(4 hunks)src/components/number-keyboard/tests/number-keyboard.test.tsx(1 hunks)src/components/virtual-input/demos/demo1.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/virtual-input/demos/demo1.tsx (1)
src/components/number-keyboard/number-keyboard.tsx (1)
NumberKeyboard(52-279)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: compressed-size
- GitHub Check: build preview
- GitHub Check: check
- GitHub Check: size
🔇 Additional comments (6)
src/components/number-keyboard/number-keyboard.tsx (3)
15-21: 类型定义清晰,但需要注意向后兼容性。新的
CustomKeyType类型定义很好地支持了字符串和对象两种形式。但需要注意,原来支持的[string, string]元组形式已被移除,这是一个破坏性变更。建议:
- 在文档中添加迁移指南
- 或者考虑保留对元组形式的兼容支持
请确认是否需要保留对旧 API
[string, string]的向后兼容,或者在文档中明确说明这是破坏性变更。
180-184: LGTM!title 属性的逻辑正确:
- 删除键使用国际化文本
- 对象形式使用自定义 title
- 字符串形式使用 key 本身
这确保了屏幕阅读器能获取正确的无障碍信息。
203-207: LGTM!事件处理和显示逻辑正确:
onKeyPress使用realKey确保回调接收到实际的按键值- 显示内容使用
realKey保持按键的实际字符这保证了即使使用自定义 title,
onInput回调仍能接收到正确的按键值。src/components/virtual-input/demos/demo1.tsx (2)
16-21: LGTM!示例代码正确展示了新的对象形式 API,
{ key: '.', title: '小数点' }为小数点按键提供了清晰的无障碍标签,有助于屏幕阅读器用户理解按键功能。Also applies to: 79-84
65-65: LGTM!Demo 标题更新为"两位小数的金额输入"更准确地描述了该示例的功能约束。
src/components/number-keyboard/tests/number-keyboard.test.tsx (1)
164-184: LGTM!测试用例全面验证了新功能:
- 混合使用字符串和对象形式的 customKey
- 验证 title 属性正确设置(字符串使用自身,对象使用 title 字段)
- 确认 onInput 回调接收到正确的按键值('.' 而非 '小数点')
测试覆盖充分,确保了新 API 的正确性。
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #6956 +/- ##
==========================================
- Coverage 92.95% 92.94% -0.02%
==========================================
Files 337 337
Lines 7352 7354 +2
Branches 1829 1830 +1
==========================================
+ Hits 6834 6835 +1
- Misses 510 511 +1
Partials 8 8 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
coderabbitai
bot
added
the
size:XL
dosubot
bot
added
size:M
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/number-keyboard/number-keyboard.tsx (1)
170-175: 修正符号类名判断逻辑
在 src/components/number-keyboard/number-keyboard.tsx 第 172 行，将条件从!isNumberKey && key修改为!isNumberKey && realKey：- [`${classPrefix}-key-sign`]: !isNumberKey && key, + [`${classPrefix}-key-sign`]: !isNumberKey && realKey,
♻️ Duplicate comments (2)
src/components/number-keyboard/number-keyboard.tsx (1)
166-169: 关键逻辑修复正确。已正确修复
isNumberKey的判断逻辑,现在基于realKey进行判断,无论key是字符串还是对象形式都能正确识别数字按键。src/components/number-keyboard/index.zh.md (1)
26-26: 修复 Markdown 表格格式错误。表格分隔行有 7 列,但表头只有 4 列(属性、说明、类型、默认值),这会导致表格渲染异常。
应用此修复:
-| --- | --- | --- | --- | --- | --- | --- | +| --- | --- | --- | --- |
🧹 Nitpick comments (1)
src/components/number-keyboard/index.zh.md (1)
31-31: 类型文档准确但可以更清晰。
customKey的类型定义已更新为完整的联合类型,涵盖了字符串、对象和数组形式。为了帮助开发者更好理解,建议在"说明"列补充简短的使用示例。可选的改进方案:
-| customKey | 自定义按钮 | `string | { key: string; title: string } | (string | { key: string; title: string })[]` | - | +| customKey | 自定义按钮,支持单个或多个按键,可为字符串或包含 title 的对象(用于无障碍读屏) | `string \| { key: string; title: string } \| (string \| { key: string; title: string })[]` | - |或者在下方添加使用示例说明不同形式的用法。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/number-keyboard/index.zh.md(1 hunks)src/components/number-keyboard/number-keyboard.tsx(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: compressed-size
- GitHub Check: size
- GitHub Check: check
🔇 Additional comments (3)
src/components/number-keyboard/number-keyboard.tsx (3)
15-15: 类型定义清晰准确。新增的
CustomKeyType类型定义支持字符串或包含key和title的对象形式,很好地满足了无障碍读屏的需求。
180-184: Aria 属性处理正确。
title属性的处理逻辑正确:
- 退格键显示清除文案
- 对象形式使用
title字段供读屏软件朗读- 字符串形式直接使用
key值这很好地支持了无障碍访问需求。
203-207: 按键渲染和事件处理正确。使用
realKey进行事件传递和显示渲染是正确的设计:
- 事件处理使用
realKey确保输入值正确- 视觉显示使用
realKey保持界面简洁title属性已在上方正确设置用于无障碍朗读这种分离设计既满足了功能需求又兼顾了无障碍体验。
coderabbitai
bot
added
lgtm
dosubot
bot
added
size:M
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/number-keyboard/index.en.md(1 hunks)src/components/number-keyboard/number-keyboard.tsx(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: build preview
- GitHub Check: check
- GitHub Check: compressed-size
- GitHub Check: size
🔇 Additional comments (1)
src/components/number-keyboard/number-keyboard.tsx (1)
167-170: LGTM! 已正确实现之前的审查建议。keyConfig 规范化逻辑清晰，将字符串和对象形式统一处理。isNumberKey 的判断现在直接基于 realKey 进行正则测试，避免了之前的类型检查问题。
coderabbitai
bot
added
the
size:L
dosubot
bot
added
size:M
coderabbitai
bot
added
the
size:L
dosubot
bot
added
size:M
coderabbitai
bot
added
the
size:L
dosubot
bot
added
size:M
2 participants
Summary by CodeRabbit