如何在React的DayPicker组件中动态添加aria-labels

问题背景 #

在React项目中使用react-day-picker@8.10.0时，需要为日期元素根据状态（已选中、禁用、受限、不可用）动态设置aria-label，确保屏幕阅读器能正确识别日期状态。

当前代码 #

<DayPicker
  mode="single"
  selected={calendarDates.selected}
  onDayClick={setDate}
  showOutsideDays
  disabled={{ before: startDate, after: endDate }}
  modifiers={{
    limited: calendarDates.limited,
    unavailable: calendarDates.unavailable,
  }}
  modifiersStyles={{
    limited: limitedStyle,
    unavailable: unavailableStyle,
  }}
/>

需求 #

• 为每个日期元素生成动态aria-label，例如：“已选中日期：2024年1月1日”、“不可用日期：2024年1月2日”
• 确保标签可被屏幕阅读器正确识别

已尝试的不可靠方案 #

尝试过ariaLabelFormatter、renderDay属性，但组件版本不支持；也通过useRef+useEffect直接操作DOM，但依赖类名，维护性差：

useEffect(() => {
  if (calendarRef.current) {
    const days = calendarRef.current.querySelectorAll(".rdp-day");
    days.forEach((day) => {
      const date = day.getAttribute("aria-label");
      let ariaLabel = date;

      if (day.classList.contains("rdp-day_selected")) {
        ariaLabel = `Selected date: ${date}`;
      } else if (day.classList.contains("rdp-day_disabled")) {
        ariaLabel = `${date} is not available for selection.`;
      }

      day.setAttribute("aria-label", ariaLabel || date);
    });
  }
}, [calendarDates]);

使用版本：

• react: ^18.2.0
• react-datepicker: ^6.6.0
• react-day-picker: ^8.10.0

可靠解决方案 #

react-day-picker@8.x支持通过components属性自定义日期组件，无需操作DOM即可动态控制aria-label：

步骤1：自定义日期组件 #

import { DayPicker, DayComponentProps } from 'react-day-picker';

const CustomDay = ({ day, modifiers, selected, disabled }: DayComponentProps) => {
  // 格式化日期为本地化文本
  const dateText = new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(day.date);

  let ariaLabel = dateText;

  // 根据状态生成对应标签
  if (selected) {
    ariaLabel = `已选中日期：${dateText}`;
  } else if (disabled) {
    ariaLabel = `${dateText}，不可选择`;
  } else if (modifiers.limited) {
    ariaLabel = `${dateText}，受限日期`;
  } else if (modifiers.unavailable) {
    ariaLabel = `${dateText}，不可用`;
  }

  // 保留原组件样式与语义化角色
  return (
    <div
      className={`rdp-day ${selected ? 'rdp-day_selected' : ''} ${disabled ? 'rdp-day_disabled' : ''} ${modifiers.limited ? 'rdp-day_limited' : ''} ${modifiers.unavailable ? 'rdp-day_unavailable' : ''}`}
      aria-label={ariaLabel}
      role="gridcell"
    >
      {day.date.getDate()}
    </div>
  );
};

步骤2：在DayPicker中使用自定义组件 #

<DayPicker
  mode="single"
  selected={calendarDates.selected}
  onDayClick={setDate}
  showOutsideDays
  disabled={{ before: startDate, after: endDate }}
  modifiers={{
    limited: calendarDates.limited,
    unavailable: calendarDates.unavailable,
  }}
  modifiersStyles={{
    limited: limitedStyle,
    unavailable: unavailableStyle,
  }}
  components={{ Day: CustomDay }} {/* 传入自定义日期组件 */}
/>

方案说明 #

• 自定义组件通过DayComponentProps获取日期的所有状态（选中、禁用、自定义modifiers等），无需依赖DOM类名
• 使用Intl.DateTimeFormat实现日期本地化显示，适配不同语言环境
• 保留原组件的类名与role="gridcell"语义，确保样式和无障碍规范不受影响
• 完全基于React组件化逻辑，避免直接DOM操作，代码更可靠易维护

内容的提问来源于stack exchange，提问作者flash