React を使用してアクセス可能な ARIA ラベルを DayPicker に簡単に追加する方法

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 ラベル割り当ての単体テスト

ARIA ラベルの整合性を確保するための Jest および React テスト ライブラリ

// 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 の状態とプロパティを使用して ARIA 属性を適切に実装すると、パフォーマンスのオーバーヘッドが最小限に抑えられます。

動的 ARIA ラベルによるアクセシビリティの向上

追加 ARIA ラベル DayPicker に追加すると、支援技術の個々の日の要素の状態が記述されるため、アクセシビリティが向上します。スクリーン リーダーに依存するユーザーにシームレスなエクスペリエンスを提供し、「選択済み」や「利用不可」などの主要な状態を明確にします。 ✅

React フックとカスタム レンダリング アプローチを組み合わせることで、効果的で保守可能なソリューションを実現します。直接 DOM 操作を使用するか、宣言型 props を使用するかにかかわらず、すべてのユーザーがアクセスできる包括的なカレンダー インターフェイスを提供することに重点が置かれています。 🌟