feat: 日历组件无障碍#3437
Merged
Merged
Conversation
github-actions
Bot
added
3.x
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughCalendarCard 新增可选 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/packages/calendarcard/calendarcard.taro.tsx (1)
23-28:⚠️ Potential issue | 🟡 Minor
weekdays属性仅添加到 Taro 版本，与 H5 版本存在 API 不对称。根据
src/packages/calendarcard/calendarcard.tsx:22-26的defaultProps，H5 版本并未支持weekdays属性，仍直接使用locale.calendaritem.weekdays。两端公共 API 行为不一致会让用户在跨端使用时感到困惑（同样的代码在 H5 端无效），且类型TaroCalendarCardProps与CalendarCardProps也会出现差异。建议同步在 H5 版本添加weekdays属性，或在文档中明确说明该属性仅 Taro 端支持。🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/packages/calendarcard/calendarcard.taro.tsx` around lines 23 - 28, The Taro build adds a weekdays prop in defaultProps while the H5 CalendarCard lacks it, causing asymmetric API and diverging types (TaroCalendarCardProps vs CalendarCardProps); add weekdays support to the H5 implementation to match behavior: update the H5 CalendarCard defaultProps to include weekdays (default []), thread the prop through the CalendarCard render/logic where locale.calendaritem.weekdays is used, and update the shared prop types (CalendarCardProps and TaroCalendarCardProps) to include weekdays so both builds expose the same API, or alternatively document that weekdays is Taro-only if you choose not to change H5.
🧹 Nitpick comments (1)
src/packages/calendarcard/calendarcard.taro.tsx (1)
471-481:ariaHidden需要@ts-ignore绕过类型检查，建议补全类型或采用受支持的写法。
@tarojs/components的View类型定义中缺失ariaHidden属性，导致在此处（及项目其他组件如radio.taro.tsx、checkbox.taro.tsx）需要使用@ts-ignore。同一 JSX 中的ariaLabel、ariaRole都有支持，唯独ariaHidden需要绕过检查。建议：
- 优先升级
@tarojs/components或补全其类型声明，移除@ts-ignore；或- 用受支持的写法避免类型冲突，例如改用其他兼容的无障碍方案。
重复的
@ts-ignore会掩盖真正的类型错误，维护成本较高。🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/packages/calendarcard/calendarcard.taro.tsx` around lines 471 - 481, The code is using `@ts-ignore` to bypass TypeScript errors for the View prop ariaHidden in calendarcard.taro.tsx (occurring on the View elements that renderDayTop/renderDay/renderDayBottom), which hides real typing issues; fix by adding proper typings or using a supported prop: extend or augment the `@tarojs/components` View props to include ariaHidden (declare module and add ariaHidden?: boolean) or replace ariaHidden with a supported accessibility prop (e.g., aria-hidden via a string index signature or using ariaHidden as a data- attribute or the supported ariaLabel/ariaRole patterns) and remove the `@ts-ignore` lines around the View elements (the unique symbols to locate are the JSX <View className={`${prefixCls}-day-top`} ariaHidden>, <View className={`${prefixCls}-day-inner`} ariaHidden>, and <View className={`${prefixCls}-day-bottom`} ariaHidden>).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/packages/calendarcard/calendarcard.taro.tsx`:
- Around line 250-262: getAriaLabel currently only reads day.date which causes
identical labels for same numeric days from prev/next months; update
getAriaLabel (used with days array and predicates isActive/isDisable) to
distinguish non-current-month cells by appending month info (e.g. "上月30号"/"下月2号"
or full month name) when day.type !== 'current', or alternatively mark those
cells as aria-hidden and remove them from tab order (tabIndex=-1) to match
handleDayClick's filtering of non-current clicks; ensure isActive/isDisable
logic still applies and labels remain localized and consistent with existing
strings.
- Around line 250-262: getAriaLabel currently hardcodes Chinese strings and
breaks i18n; change it to use locale entries (e.g.,
locale.calendaritem.selected, .today, .day, .disabled) instead of literal
"已选定"/"今日"/"号"/"按钮变暗", and build the label by composing these localized tokens
together when computing getAriaLabel(day) (still using isActive, isDisable,
isToday to pick which tokens to combine); also update the surrounding comment to
remove the misleading "按钮" text (ariaRole="button" is set on the parent so the
role need not be repeated in the label).
- Around line 426-439: The current weekHeader is created with useState lazy
initializer, so it won't update when props like weekdays, firstDayOfWeek or
locale.calendaritem.weekdays change; replace the useState(() => { ... }) with a
useMemo that returns the same computed weekdaysData array and rotated slice, and
set its dependency array to [weekdays, firstDayOfWeek,
locale?.calendaritem?.weekdays] (or the exact locale weekdays value used) so
weekHeader recomputes when those inputs change; keep the mapping that produces {
name, key } and the slice/concatenate logic identical.
---
Outside diff comments:
In `@src/packages/calendarcard/calendarcard.taro.tsx`:
- Around line 23-28: The Taro build adds a weekdays prop in defaultProps while
the H5 CalendarCard lacks it, causing asymmetric API and diverging types
(TaroCalendarCardProps vs CalendarCardProps); add weekdays support to the H5
implementation to match behavior: update the H5 CalendarCard defaultProps to
include weekdays (default []), thread the prop through the CalendarCard
render/logic where locale.calendaritem.weekdays is used, and update the shared
prop types (CalendarCardProps and TaroCalendarCardProps) to include weekdays so
both builds expose the same API, or alternatively document that weekdays is
Taro-only if you choose not to change H5.
---
Nitpick comments:
In `@src/packages/calendarcard/calendarcard.taro.tsx`:
- Around line 471-481: The code is using `@ts-ignore` to bypass TypeScript errors
for the View prop ariaHidden in calendarcard.taro.tsx (occurring on the View
elements that renderDayTop/renderDay/renderDayBottom), which hides real typing
issues; fix by adding proper typings or using a supported prop: extend or
augment the `@tarojs/components` View props to include ariaHidden (declare module
and add ariaHidden?: boolean) or replace ariaHidden with a supported
accessibility prop (e.g., aria-hidden via a string index signature or using
ariaHidden as a data- attribute or the supported ariaLabel/ariaRole patterns)
and remove the `@ts-ignore` lines around the View elements (the unique symbols to
locate are the JSX <View className={`${prefixCls}-day-top`} ariaHidden>, <View
className={`${prefixCls}-day-inner`} ariaHidden>, and <View
className={`${prefixCls}-day-bottom`} ariaHidden>).
🪄 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: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 3bf088cb-2733-4ee8-b36a-03e9545c0c80
📒 Files selected for processing (1)
src/packages/calendarcard/calendarcard.taro.tsx
Comment on lines
+250
to
+262
| const getAriaLabel = (day: CalendarCardDay) => { | ||
| const today = isToday(day) | ||
| // 日期选定时，朗读="已选定 1号 按钮" | ||
| if (isActive(day)) { | ||
| return today ? `已选定今日${day.date}号` : `已选定${day.date}号` | ||
| } | ||
| // 若不可选中，朗读=“3号 按钮 变暗” | ||
| if (isDisable(day)) { | ||
| return today ? `${day.date}号今日按钮变暗` : `${day.date}号按钮变暗` | ||
| } | ||
| // 未选定时，朗读=“2号 按钮” | ||
| return today ? `${day.date}号今日` : `${day.date}号` | ||
| } |
There was a problem hiding this comment.
未区分 prev/next 月份的日期，可能导致同一数字在网格中被读三次。
days 数组同时包含上月、本月、下月的日期。当前实现只读 day.date，例如月初网格里会出现 30号、31号 等上月日期，与下月开头的日期混在一起，盲人用户会听到 "30号"、"30号"——无法分辨这是哪个月的 30 号。建议对 day.type !== 'current' 的单元格附加月份信息（或将其设为 ariaHidden / 不参与 tab 序），与 handleDayClick 中已经过滤非当前月点击的逻辑保持一致。
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/packages/calendarcard/calendarcard.taro.tsx` around lines 250 - 262,
getAriaLabel currently only reads day.date which causes identical labels for
same numeric days from prev/next months; update getAriaLabel (used with days
array and predicates isActive/isDisable) to distinguish non-current-month cells
by appending month info (e.g. "上月30号"/"下月2号" or full month name) when day.type
!== 'current', or alternatively mark those cells as aria-hidden and remove them
from tab order (tabIndex=-1) to match handleDayClick's filtering of non-current
clicks; ensure isActive/isDisable logic still applies and labels remain
localized and consistent with existing strings.
aria 文案硬编码为中文，破坏国际化能力。
该组件其它文案（如 monthTitle、weekdays）均通过 locale 提供本地化，但 getAriaLabel 直接拼接了 "已选定"、"今日"、"号"、"按钮变暗" 等中文字符串。非中文 locale 下屏幕阅读器仍会朗读中文，对盲人用户造成严重的可访问性退化。建议将这些文案抽到 locale.calendaritem 中（例如 selected、today、day、disabled 等键），由调用方按 locale 翻译。
另外，注释中提到 "已选定 1号 按钮"、"3号 按钮 变暗" 等期望朗读结果都包含 "按钮"，但实际返回值中并没有 "按钮"。由于 ariaRole="button" 已在父级设置，多数读屏会自动朗读 role，因此 label 中不需重复，但建议同步更新注释以避免歧义。
🌐 建议改造方向（示意）
- // 日期无障碍朗读
- const getAriaLabel = (day: CalendarCardDay) => {
- const today = isToday(day)
- // 日期选定时，朗读="已选定 1号 按钮"
- if (isActive(day)) {
- return today ? `已选定今日${day.date}号` : `已选定${day.date}号`
- }
- // 若不可选中，朗读=“3号 按钮 变暗”
- if (isDisable(day)) {
- return today ? `${day.date}号今日按钮变暗` : `${day.date}号按钮变暗`
- }
- // 未选定时，朗读=“2号 按钮”
- return today ? `${day.date}号今日` : `${day.date}号`
- }
+ // 日期无障碍朗读（文案由 locale 提供，避免硬编码语言）
+ const getAriaLabel = (day: CalendarCardDay) => {
+ const a11y = locale.calendaritem.a11y // 需在 locale 中补充
+ const today = isToday(day)
+ const base = today ? a11y.today(day.date) : a11y.day(day.date)
+ if (isActive(day)) return a11y.selected(base)
+ if (isDisable(day)) return a11y.disabled(base)
+ return base
+ }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/packages/calendarcard/calendarcard.taro.tsx` around lines 250 - 262,
getAriaLabel currently hardcodes Chinese strings and breaks i18n; change it to
use locale entries (e.g., locale.calendaritem.selected, .today, .day, .disabled)
instead of literal "已选定"/"今日"/"号"/"按钮变暗", and build the label by composing these
localized tokens together when computing getAriaLabel(day) (still using
isActive, isDisable, isToday to pick which tokens to combine); also update the
surrounding comment to remove the misleading "按钮" text (ariaRole="button" is set
on the parent so the role need not be repeated in the label).
xiaoyatong
reviewed
Apr 25, 2026
| </View> | ||
| <View className={`${prefixCls}-day-bottom`}> | ||
| {/* @ts-ignore */} | ||
| <View className={`${prefixCls}-day-bottom`} ariaHidden> |
Collaborator
There was a problem hiding this comment.
这个会有有效信息，被忽略~ 不需要处理 ariahidden
xiaoyatong
reviewed
Apr 25, 2026
| > | ||
| <View className={`${prefixCls}-day-top`}> | ||
| {/* @ts-ignore */} | ||
| <View className={`${prefixCls}-day-top`} ariaHidden> |
Collaborator
There was a problem hiding this comment.
这个会有有效信息，被忽略~ 不需要处理 ariahidden
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
src/packages/calendarcard/demos/taro/demo13.tsx (2)
13-13: 局部变量CalendarCardRef与导入的同名类型重名，易混淆。第 2 行从
@nutui/nutui-react-taro导入了CalendarCardRef类型；第 13 行又以同名命名useRef返回值，使得后续useRef<CalendarCardRef>(null)在阅读上会与运行时变量产生歧义。建议将变量改为驼峰小写（如calendarCardRef或calendarRef）。🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/packages/calendarcard/demos/taro/demo13.tsx` at line 13, The local ref variable is named CalendarCardRef which conflicts with the imported type CalendarCardRef; rename the runtime variable to a camelCase identifier (e.g., calendarCardRef or calendarRef) and update its declaration useRef<CalendarCardRef>(null) and all references to that variable in this file (e.g., event handlers, JSX refs) so the imported type CalendarCardRef remains distinct from the runtime ref variable.
20-21:weekdays起始项与firstDayOfWeek的对应关系容易让用户误解。此处传入的
weekdays以 "周日" 起始（索引 0=周日），同时firstDayOfWeek={1}。组件内部会按firstDayOfWeek旋转数组，因此实际渲染顺序为周一…周六, 周日，符合预期。但调用方很可能误以为数组的第 0 项就是首列，从而传入以 "周一" 开头的数组，结果反而错位。建议在文档/示例注释中明确：weekdays必须以"周日"为索引 0 传入完整 7 项（与locale.calendaritem.weekdays的约定一致）。🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/packages/calendarcard/demos/taro/demo13.tsx` around lines 20 - 21, Summary: The demo may confuse users because weekdays array index 0 must be Sunday while firstDayOfWeek rotates display; explicitly state this requirement. Fix: In the demo (around the weekdays and firstDayOfWeek props) add a clear inline comment and/or example note that weekdays must be a full 7-item array starting with "周日" (index 0 = Sunday) and that firstDayOfWeek only rotates the display order; reference the props weekdays and firstDayOfWeek and mention the convention matches locale.calendaritem.weekdays so callers do not supply a weekday array starting at Monday.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/packages/calendarcard/calendarcard.taro.tsx`:
- Around line 480-481: Remove the unnecessary ariaHidden prop and the
accompanying `@ts-ignore` on the inner day container so screen readers can access
custom rendered content; edit the <View className={`${prefixCls}-day-inner`}
ariaHidden> (inside renderDay / calendar day cell) to simply be <View
className={`${prefixCls}-day-inner`}> and drop the `@ts-ignore`; if you intended
to hide non-essential decorative elements, explicitly apply aria-hidden only to
those specific sub-elements rather than the entire `${prefixCls}-day-inner`
container.
In `@src/packages/calendarcard/demo.taro.tsx`:
- Around line 99-102: The two examples Demo12 and Demo13 both use the same
translated.title, causing duplicate headings; add a new translation key (e.g.,
"a11y" or "weekdaysTitle") in the useTranslate hook and update the demo jsx to
use that new key for Demo13's title (replace the second {translated.title} with
{translated.a11y} or the chosen key) so each demo (Demo12 and Demo13) has a
distinct, descriptive heading.
In `@src/packages/calendarcard/demos/taro/demo13.tsx`:
- Line 7: The React component and default export are incorrectly named Demo1 in
demo13.tsx causing a naming collision; rename the component and default export
from Demo1 to Demo13 (update the component declaration and the export default)
so the component symbol Demo13 is used consistently within this file and avoids
conflict with demos/taro/demo1.tsx.
- Around line 8-12: 变量命名和类型不一致：把 dateStr 重命名为 month 或 currentMonth（并把 setDate
重命名为 setMonth）以反映它实际存储的是月份数字，且在初始化时用 date.getMonth() + 1 保持与 CalendarCard 的 1-12
约定一致；将 onPageChange 的参数从 any 改为已导出的类型 CalendarCardMonth（确保导入该类型）并在回调中使用
setMonth(val.month) 来更新月份，从而移除 any 并保证类型安全。
---
Nitpick comments:
In `@src/packages/calendarcard/demos/taro/demo13.tsx`:
- Line 13: The local ref variable is named CalendarCardRef which conflicts with
the imported type CalendarCardRef; rename the runtime variable to a camelCase
identifier (e.g., calendarCardRef or calendarRef) and update its declaration
useRef<CalendarCardRef>(null) and all references to that variable in this file
(e.g., event handlers, JSX refs) so the imported type CalendarCardRef remains
distinct from the runtime ref variable.
- Around line 20-21: Summary: The demo may confuse users because weekdays array
index 0 must be Sunday while firstDayOfWeek rotates display; explicitly state
this requirement. Fix: In the demo (around the weekdays and firstDayOfWeek
props) add a clear inline comment and/or example note that weekdays must be a
full 7-item array starting with "周日" (index 0 = Sunday) and that firstDayOfWeek
only rotates the display order; reference the props weekdays and firstDayOfWeek
and mention the convention matches locale.calendaritem.weekdays so callers do
not supply a weekday array starting at Monday.
🪄 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: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 66a339c5-0450-4fc9-b7c7-70818c1f8f04
📒 Files selected for processing (3)
src/packages/calendarcard/calendarcard.taro.tsxsrc/packages/calendarcard/demo.taro.tsxsrc/packages/calendarcard/demos/taro/demo13.tsx
Comment on lines
+480
to
+481
| {/* @ts-ignore */} | ||
| <View className={`${prefixCls}-day-inner`} ariaHidden> |
There was a problem hiding this comment.
与维护者意图相悖：内层 ariaHidden 会丢失有效信息，建议移除。
维护者在前次评审中已明确表示 "这个会有有效信息，被忽略~ 不需要处理 ariahidden"。当前代码仍在 ${prefixCls}-day-inner 上设置了 ariaHidden 并以 @ts-ignore 屏蔽类型检查。这会让 renderDay 自定义内容（角标、农历、节日等业务关键信息）对屏幕阅读器不可见，且 @ts-ignore 还会掩盖该属性在 Taro View 类型上是否存在的真实问题。
♻️ 建议移除
- {/* `@ts-ignore` */}
- <View className={`${prefixCls}-day-inner`} ariaHidden>
+ <View className={`${prefixCls}-day-inner`}>
{renderDay ? renderDay(day) : day.date}
</View>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/packages/calendarcard/calendarcard.taro.tsx` around lines 480 - 481,
Remove the unnecessary ariaHidden prop and the accompanying `@ts-ignore` on the
inner day container so screen readers can access custom rendered content; edit
the <View className={`${prefixCls}-day-inner`} ariaHidden> (inside renderDay /
calendar day cell) to simply be <View className={`${prefixCls}-day-inner`}> and
drop the `@ts-ignore`; if you intended to hide non-essential decorative elements,
explicitly apply aria-hidden only to those specific sub-elements rather than the
entire `${prefixCls}-day-inner` container.
Comment on lines
+8
to
+12
| const [dateStr, setDate] = useState(date.getMonth()) | ||
| const onPageChange = (val: any) => { | ||
| console.log('onPageChange', val) | ||
| setDate(val.month) | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's find and examine the demo file
fd -e tsx "demo13" src/packages/calendarcard/demos/Repository: jdf2e/nutui-react
Length of output: 109
🏁 Script executed:
# Search for CalendarCardMonth type in the codebase
rg "CalendarCardMonth" src/packages/calendarcard/ --type ts --type tsxRepository: jdf2e/nutui-react
Length of output: 89
🏁 Script executed:
# Check the CalendarCard component implementation, particularly around the month range
fd -e tsx "calendarcard.taro" src/packages/calendarcard/Repository: jdf2e/nutui-react
Length of output: 109
🏁 Script executed:
# Look for the index/export files to see what's exported
fd -e ts "index" src/packages/calendarcard/ | head -20Repository: jdf2e/nutui-react
Length of output: 136
🏁 Script executed:
# Read the demo13.tsx file
cat -n src/packages/calendarcard/demos/taro/demo13.tsxRepository: jdf2e/nutui-react
Length of output: 1092
🏁 Script executed:
# Check the CalendarCardMonth type - search more broadly
rg "CalendarCardMonth" src/packages/calendarcard/Repository: jdf2e/nutui-react
Length of output: 693
🏁 Script executed:
# Read the exports from the main index file
cat -n src/packages/calendarcard/index.taro.tsRepository: jdf2e/nutui-react
Length of output: 367
🏁 Script executed:
# Read the taro component implementation to understand month handling
cat -n src/packages/calendarcard/calendarcard.taro.tsx | head -100Repository: jdf2e/nutui-react
Length of output: 3275
🏁 Script executed:
# Final verification - check the type definition of CalendarCardMonth
rg "type CalendarCardMonth" src/ -A 5Repository: jdf2e/nutui-react
Length of output: 43
🏁 Script executed:
# Verify the props type for onPageChange callback
rg "onPageChange" src/packages/calendarcard/calendarcard.taro.tsx -B 2 -A 2Repository: jdf2e/nutui-react
Length of output: 524
变量命名误导和类型缺失
dateStr实际存放的是getMonth()返回的数字（0-11），命名容易让人误以为是字符串。建议重命名为month或currentMonth。onPageChange形参val: any可改为已导出的CalendarCardMonth类型，避免any并提升对val.month字段的类型保护。
♻️ 建议修改
-import { CalendarCard, CalendarCardRef } from '@nutui/nutui-react-taro'
+import {
+ CalendarCard,
+ CalendarCardRef,
+ CalendarCardMonth,
+} from '@nutui/nutui-react-taro'
...
- const [dateStr, setDate] = useState(date.getMonth())
- const onPageChange = (val: any) => {
+ const [month, setMonth] = useState(date.getMonth() + 1)
+ const onPageChange = (val: CalendarCardMonth) => {
console.log('onPageChange', val)
- setDate(val.month)
+ setMonth(val.month)
}注：CalendarCard 内部的 month 取值范围为 1-12（参见 calendarcard.taro.tsx 第 70 行 date.getMonth() + 1），而 Date.prototype.getMonth() 返回 0-11，因此初始化时也应 +1 以保持一致，否则首次渲染前显示的值会比 onPageChange 回调后的值少 1。
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/packages/calendarcard/demos/taro/demo13.tsx` around lines 8 - 12,
变量命名和类型不一致：把 dateStr 重命名为 month 或 currentMonth（并把 setDate 重命名为
setMonth）以反映它实际存储的是月份数字，且在初始化时用 date.getMonth() + 1 保持与 CalendarCard 的 1-12
约定一致；将 onPageChange 的参数从 any 改为已导出的类型 CalendarCardMonth（确保导入该类型）并在回调中使用
setMonth(val.month) 来更新月份，从而移除 any 并保证类型安全。
added 2 commits
April 25, 2026 18:45
Contributor
Author
|
日历无障碍 & 星期自定义 |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
src/packages/calendarcard/calendarcard.taro.tsx (2)
480-481:⚠️ Potential issue | 🟠 Major与维护者反馈相左：内层
ariaHidden+@ts-ignore仍未移除。维护者在前次评审中明确表示 "这个会有有效信息，被忽略~ 不需要处理 ariahidden"。当前代码仍保留
ariaHidden与@ts-ignore，会让renderDay自定义内容（角标、农历、节日等）对屏幕阅读器不可见，并掩盖 TaroView类型上该属性是否有效的真实问题。建议直接去掉。♻️ 建议修复
- {/* `@ts-ignore` */} - <View className={`${prefixCls}-day-inner`} ariaHidden> + <View className={`${prefixCls}-day-inner`}> {renderDay ? renderDay(day) : day.date} </View>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/packages/calendarcard/calendarcard.taro.tsx` around lines 480 - 481, The inner day View currently includes an unnecessary ariaHidden and a disabling `@ts-ignore` which hides accessibility content and masks the underlying type issue; remove the ariaHidden attribute and the preceding "@ts-ignore" from the JSX element that renders the inner day (the View with className `${prefixCls}-day-inner`) so custom renderDay content becomes visible to screen readers and any TypeScript type errors surface for proper fixing (if TS flags show the prop is invalid, update the component's props/type definitions instead of suppressing the error).
250-268:⚠️ Potential issue | 🟠 Majoraria 文案仍为硬编码中文，i18n 退化未修复。
此处将 "已选定"、"今日"、"号"、"按钮变暗" 等中文字面量直接拼接到
ariaLabel中，非中文 locale 下屏幕阅读器仍会朗读中文，与组件其它通过locale.calendaritem提供本地化的文案不一致。建议把这些 token 抽到locale.calendaritem中（如selected/today/day/disabled），由调用方按 locale 翻译。同时ariaRole="button"已在父级声明，标签里再带 "按钮" 会被读屏重复朗读，注释里的示例也建议同步更新。🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/packages/calendarcard/calendarcard.taro.tsx` around lines 250 - 268, getAriaLabel currently builds Chinese-only aria strings by concatenating literals like "已选定"/"今日"/"号"/"按钮变暗" and even repeats "按钮" despite ariaRole="button" on the parent; replace these hardcoded tokens with locale-driven tokens (e.g. use locale.calendaritem.selected, .today, .day, .disabled) inside getAriaLabel so callers can supply translations, and remove the explicit "按钮" wording from the strings to avoid duplicate reads; ensure isActive/isDisable/isToday branches compose the final aria label by joining the locale tokens in the same order (selected + today + month + day + dayToken, disabled + month + day + disabledToken, or today + month + day etc.) using the CalendarCardDay values.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/packages/calendarcard/calendarcard.taro.tsx`:
- Around line 432-445: The useMemo call returning the weekdays array is
incorrectly destructured as const [weekHeader] = useMemo(...), which grabs only
the first weekday object instead of the full array; change this to directly
assign the memo result (e.g., const weekHeader = useMemo(...)) inside
src/packages/calendarcard/calendarcard.taro.tsx and any other similar
occurrences in that file (search for patterns like const [something] =
useMemo(...)/useMemo(() => arr) to ensure other H5 versions are fixed), so
weekHeader is the full array and weekHeader.map(...) works as expected.
---
Duplicate comments:
In `@src/packages/calendarcard/calendarcard.taro.tsx`:
- Around line 480-481: The inner day View currently includes an unnecessary
ariaHidden and a disabling `@ts-ignore` which hides accessibility content and
masks the underlying type issue; remove the ariaHidden attribute and the
preceding "@ts-ignore" from the JSX element that renders the inner day (the View
with className `${prefixCls}-day-inner`) so custom renderDay content becomes
visible to screen readers and any TypeScript type errors surface for proper
fixing (if TS flags show the prop is invalid, update the component's props/type
definitions instead of suppressing the error).
- Around line 250-268: getAriaLabel currently builds Chinese-only aria strings
by concatenating literals like "已选定"/"今日"/"号"/"按钮变暗" and even repeats "按钮"
despite ariaRole="button" on the parent; replace these hardcoded tokens with
locale-driven tokens (e.g. use locale.calendaritem.selected, .today, .day,
.disabled) inside getAriaLabel so callers can supply translations, and remove
the explicit "按钮" wording from the strings to avoid duplicate reads; ensure
isActive/isDisable/isToday branches compose the final aria label by joining the
locale tokens in the same order (selected + today + month + day + dayToken,
disabled + month + day + disabledToken, or today + month + day etc.) using the
CalendarCardDay values.
🪄 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: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 2dfa500e-7d5d-4451-a019-08398f27dc77
📒 Files selected for processing (1)
src/packages/calendarcard/calendarcard.taro.tsx
There was a problem hiding this comment.
♻️ Duplicate comments (1)
src/packages/calendarcard/calendarcard.taro.tsx (1)
249-268:⚠️ Potential issue | 🟠 Majoraria 文案仍硬编码为中文，i18n 仍未修复。
getAriaLabel直接拼接 "已选定"、"今日"、"号"、"按钮变暗" 等中文字符串，与组件其余文案（monthTitle、weekdays）走locale的做法不一致。在非中文 locale 下，屏幕阅读器仍会朗读中文，导致严重的可访问性回退。建议将这些片段抽到locale.calendaritem中（如selected/today/day/disabled），由 locale 决定语言。另外，行内注释（"按钮"、"按钮 变暗"）与实际返回值已经不一致——
ariaRole="button"由父级提供，label 中无需重复，建议同步更新注释以免误导后续维护者。🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/packages/calendarcard/calendarcard.taro.tsx` around lines 249 - 268, getAriaLabel currently returns hard-coded Chinese fragments; extract all text fragments into the locale map (e.g., add locale.calendaritem keys like selected, today, daySuffix or dayLabel, disabled) and build the aria string using those locale values inside getAriaLabel (use isToday, isActive, isDisable to pick fragments). Remove redundant "按钮" wording from the label (ariaRole="button" is provided elsewhere) and update comments to reflect that the label should not include the word "button". Ensure monthTitle/weekdays locale pattern is followed so ARIA strings are fully localized.
🧹 Nitpick comments (1)
src/packages/calendarcard/calendarcard.taro.tsx (1)
480-481: 改用@ts-expect-error取代@ts-ignore来处理ariaHidden的类型问题。当前使用
@ts-ignore会屏蔽该位置的所有类型错误。改用@ts-expect-error可以在类型问题解决后自动提醒，确保错误抑制不会遗留。🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/packages/calendarcard/calendarcard.taro.tsx` around lines 480 - 481, Replace the "// `@ts-ignore`" suppression above the JSX element that renders View with className `${prefixCls}-day-inner` and the ariaHidden prop by using "// `@ts-expect-error`" instead; locate the comment immediately before the JSX node in calendarcard.taro.tsx (the View with ariaHidden) and change the directive so TypeScript will fail the build once the prop's typing is fixed rather than permanently silencing all type errors.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@src/packages/calendarcard/calendarcard.taro.tsx`:
- Around line 249-268: getAriaLabel currently returns hard-coded Chinese
fragments; extract all text fragments into the locale map (e.g., add
locale.calendaritem keys like selected, today, daySuffix or dayLabel, disabled)
and build the aria string using those locale values inside getAriaLabel (use
isToday, isActive, isDisable to pick fragments). Remove redundant "按钮" wording
from the label (ariaRole="button" is provided elsewhere) and update comments to
reflect that the label should not include the word "button". Ensure
monthTitle/weekdays locale pattern is followed so ARIA strings are fully
localized.
---
Nitpick comments:
In `@src/packages/calendarcard/calendarcard.taro.tsx`:
- Around line 480-481: Replace the "// `@ts-ignore`" suppression above the JSX
element that renders View with className `${prefixCls}-day-inner` and the
ariaHidden prop by using "// `@ts-expect-error`" instead; locate the comment
immediately before the JSX node in calendarcard.taro.tsx (the View with
ariaHidden) and change the directive so TypeScript will fail the build once the
prop's typing is fixed rather than permanently silencing all type errors.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 53d62dab-7efd-463d-b979-12e3247fb0e4
📒 Files selected for processing (1)
src/packages/calendarcard/calendarcard.taro.tsx
Merged
xiaoyatong
added a commit
that referenced
this pull request
Apr 26, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
发布说明
新功能
可访问性改进
类型更新