如何使用 React 轻松向 DayPicker 添加可访问的 ARIA 标签

如何动态添加 ARIA 标签到 React DayPicker 组件

使用 React、JavaScript 和优化方法进行动态 ARIA 标签管理

// Solution 1: Adding ARIA labels with post-render DOM Manipulation
import React, { useEffect, useRef } from "react";
import { DayPicker } from "react-day-picker";
import "react-day-picker/dist/style.css";

const AccessibleDayPicker = ({ calendarDates, startDate, endDate }) => {
  const calendarRef = useRef(null);

  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]);

  return (
    <div ref={calendarRef}>
      <DayPicker
        mode="single"
        selected={calendarDates.selected}
        onDayClick={() => {}}
        showOutsideDays
        disabled={{ before: startDate, after: endDate }}
        modifiers={{
          limited: calendarDates.limited,
          unavailable: calendarDates.unavailable,
        }}
      />
    </div>
  );
};

export default AccessibleDayPicker;

在 DayPicker 中实现 ARIA 标签的自定义包装器

使用功能组件进行基于 React 的 ARIA 标签定制

// Solution 2: Using a Custom Wrapper to Assign ARIA Labels
import React from "react";
import { DayPicker } from "react-day-picker";

const CustomDayPicker = ({ calendarDates, startDate, endDate }) => {
  const generateAriaLabel = (date, modifiers) => {
    if (modifiers.selected) return `Selected date: ${date.toDateString()}`;
    if (modifiers.disabled) return `${date.toDateString()} is not available.`;
    return date.toDateString();
  };

  const renderDay = (day, modifiers) => (
    <div aria-label={generateAriaLabel(day, modifiers)}>
      {day.getDate()}
    </div>
  );

  return (
    <DayPicker
      mode="single"
      selected={calendarDates.selected}
      disabled={{ before: startDate, after: endDate }}
      modifiers={{
        limited: calendarDates.limited,
        unavailable: calendarDates.unavailable,
      }}
      components={{ Day: renderDay }}
    />
  );
};

export default CustomDayPicker;

ARIA 标签分配的单元测试

Jest 和 React 测试库确保 ARIA 标签完整性

// Solution 3: Unit tests to validate ARIA label assignment
import React from "react";
import { render, screen } from "@testing-library/react";
import AccessibleDayPicker from "./AccessibleDayPicker";
import "@testing-library/jest-dom";

describe("AccessibleDayPicker ARIA labels", () => {
  test("adds ARIA labels for selected and disabled days", () => {
    const calendarDates = {
      selected: new Date(2024, 0, 1),
      unavailable: [new Date(2024, 0, 2)],
    };
    render(<AccessibleDayPicker calendarDates={calendarDates} />);

    const selectedDay = screen.getByLabelText("Selected date: Monday, January 1, 2024");
    expect(selectedDay).toBeInTheDocument();

    const unavailableDay = screen.getByLabelText("Monday, January 2, 2024 is not available.");
    expect(unavailableDay).toBeInTheDocument();
  });
});

有关 DayPicker 中 ARIA 标签的常见问题

1. 什么是 ARIA labels 用于DayPicker？
2. ARIA 标签为屏幕阅读器提供易于理解的描述，帮助用户了解“已选择”或“已禁用”等日期状态。
3. 如何动态添加 ARIA attributes 不使用 DOM 操作？
4. 使用 DayPicker components prop，您可以自定义日期渲染并直接添加 ARIA 标签。
5. 我可以本地化吗 ARIA labels 对于国际用户？
6. 是的，您可以使用以下格式设置日期格式 Intl.DateTimeFormat 确保 ARIA 标签反映本地化的日期格式。
7. 我该如何改进 keyboard navigation 与 ARIA 标签一起？
8. DayPicker 原生支持键盘导航，但添加自定义 focus styles 提高可用性和可访问性。
9. 添加动态时是否有性能成本 ARIA attributes？
10. 使用 React 的 state 和 props 正确实现 ARIA 属性可确保最小的性能开销。

使用动态 ARIA 标签提高可访问性

添加 咏叹调标签 DayPicker 通过描述辅助技术的各个日期元素的状态来提高可访问性。它为依赖屏幕阅读器的用户创造了无缝体验，确保“已选择”或“不可用”等关键状态清晰可见。 ✅

通过结合 React hooks 和自定义渲染方法，我们实现了一个既有效又可维护的解决方案。无论是通过直接 DOM 操作还是声明性 props，重点仍然是提供一个可供所有用户访问的包容性日历界面。 🌟