React를 사용하여 DayPicker에 접근 가능한 ARIA 라벨을 쉽게 추가하는 방법

React DayPicker 구성 요소에 ARIA 레이블을 동적으로 추가하는 방법

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 조작을 통해서든 선언적 소품을 통해서든 모든 사용자가 액세스할 수 있는 포괄적인 달력 인터페이스를 제공하는 데 중점을 둡니다. 🌟