feat: 日历组件无障碍

src/packages/calendarcard/calendarcard.taro.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState, useRef } from 'react'
+import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react'
 import classNames from 'classnames'
 import { View } from '@tarojs/components'
 import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from './icon.taro'
@@ -24,6 +24,7 @@ const defaultProps = {
   ...ComponentDefaults,
   type: 'single',
   firstDayOfWeek: 0,
+  weekdays: [],
 }
 
 const prefixCls = 'nut-calendarcard'
@@ -47,6 +48,7 @@ export const CalendarCard = React.forwardRef<
     renderDay,
     renderDayTop,
     renderDayBottom,
+    weekdays,
     onDayClick,
     onPageChange,
     onChange,
@@ -235,6 +237,36 @@ export const CalendarCard = React.forwardRef<
     return d === 0 || d === 6
   }
 
+  const isToday = (day: CalendarCardDay) => {
+    const today = new Date()
+    return (
+      day.year === today.getFullYear() &&
+      day.month === today.getMonth() + 1 &&
+      day.date === today.getDate()
+    )
+  }
+
+  // 日期无障碍朗读
+  const getAriaLabel = (day: CalendarCardDay) => {
+    const today = isToday(day)
+    // 日期选定时，朗读="已选定 1号 按钮"
+    if (isActive(day)) {
+      return today
+        ? `已选定今日${day.month}月${day.date}号`
+        : `已选定${day.month}月${day.date}号`
+    }
+    // 若不可选中，朗读=“3号 按钮 变暗”
+    if (isDisable(day)) {
+      return today
+        ? `${day.month}月${day.date}号今日按钮变暗`
+        : `${day.month}月${day.date}号按钮变暗`
+    }
+    // 未选定时，朗读=“2号 按钮”
+    return today
+      ? `${day.month}月${day.date}号今日`
+      : `${day.month}月${day.date}号`
+  }
+
   const getClasses = (day: CalendarCardDay) => {
     /**
      * active: single、multiple 激活日期
@@ -397,18 +429,20 @@ export const CalendarCard = React.forwardRef<
     )
   }
 
-  const [weekHeader] = useState(() => {
-    const weekdays = locale.calendaritem.weekdays.map((day, index) => {
+  const weekHeader = useMemo(() => {
+    const weekdaysList =
+      weekdays.length > 0 ? weekdays : locale.calendaritem.weekdays
+    const weekdaysData = weekdaysList.map((day, index) => {
       return {
         name: day,
         key: index,
       }
     })
     return [
-      ...weekdays.slice(firstDayOfWeek, 7),
-      ...weekdays.slice(0, firstDayOfWeek),
+      ...weekdaysData.slice(firstDayOfWeek, 7),
+      ...weekdaysData.slice(0, firstDayOfWeek),
     ]
-  })
+  }, [weekdays, firstDayOfWeek, locale.calendaritem.weekdays])
 
   const renderContent = () => {
     return (
@@ -437,11 +471,14 @@ export const CalendarCard = React.forwardRef<
               )}
               key={`${day.year}-${day.month}-${day.date}`}
               onClick={() => handleDayClick(day)}
+              ariaLabel={getAriaLabel(day)}
+              ariaRole="button"
             >
               <View className={`${prefixCls}-day-top`}>
                 {renderDayTop ? renderDayTop(day) : ''}
               </View>
-              <View className={`${prefixCls}-day-inner`}>
+              {/* @ts-ignore */}
+              <View className={`${prefixCls}-day-inner`} ariaHidden>
                 {renderDay ? renderDay(day) : day.date}
               </View>
               <View className={`${prefixCls}-day-bottom`}>

src/packages/calendarcard/demo.taro.tsx

@@ -16,6 +16,7 @@ import Demo9 from './demos/taro/demo9'
 import Demo10 from './demos/taro/demo10'
 import Demo11 from './demos/taro/demo11'
 import Demo12 from './demos/taro/demo12'
+import Demo13 from './demos/taro/demo13'
 
 const CalendarDemo = () => {
   const [translated] = useTranslate({
@@ -34,6 +35,7 @@ const CalendarDemo = () => {
       confirm: '确定',
       ref: '使用 Ref 上的方法',
       title: '搭配 Ref 使用自定义头',
+      customWeekdays: '自定义周几',
     },
     'zh-TW': {
       single: '選擇單個日期',
@@ -50,6 +52,7 @@ const CalendarDemo = () => {
       confirm: '確定',
       ref: '使用 Ref 上的方法',
       title: '搭配 Ref 使用自定義头',
+      customWeekdays: '自定義周几',
     },
     'en-US': {
       single: 'Select a single date',
@@ -66,6 +69,7 @@ const CalendarDemo = () => {
       confirm: 'Confirm',
       ref: 'Use ref',
       title: 'Custom title',
+      customWeekdays: 'Custom weekdays',
     },
   })
 
@@ -97,6 +101,8 @@ const CalendarDemo = () => {
         <Demo11 />
         <View className="h2">{translated.title}</View>
         <Demo12 />
+        <View className="h2">{translated.customWeekdays}</View>
+        <Demo13 />
       </ScrollView>
     </>
   )

src/packages/calendarcard/demos/taro/demo13.tsx

@@ -0,0 +1,24 @@
+import React, { useRef, useState } from 'react'
+import { CalendarCard, CalendarCardRef } from '@nutui/nutui-react-taro'
+
+const date = new Date('2025-01-01')
+
+const Demo13 = () => {
+  const [dateStr, setDate] = useState(date.getMonth())
+  const onPageChange = (val: any) => {
+    console.log('onPageChange', val)
+    setDate(val.month)
+  }
+  const CalendarCardRef = useRef<CalendarCardRef>(null)
+
+  return (
+    <CalendarCard
+      ref={CalendarCardRef}
+      defaultValue={date}
+      onPageChange={onPageChange}
+      weekdays={['周日', '周一', '周二', '周三', '周四', '周五', '周六']}
+      firstDayOfWeek={1}
+    />
+  )
+}
+export default Demo13

src/types/spec/calendarcard/base.ts

@@ -30,6 +30,7 @@ export interface BaseCalendarCard extends BaseProps {
   firstDayOfWeek: number // 0-6
   startDate: Date
   endDate: Date
+  weekdays?: string[]
   disableDay: (day: CalendarCardDay) => boolean
   renderDay: (day: CalendarCardDay) => ReactNode
   renderDayTop: (day: CalendarCardDay) => ReactNode