Jak používat React ke snadnému přidávání přístupných štítků ARIA do DayPicker

Jak dynamicky přidávat štítky ARIA do komponenty React DayPicker

Dynamická správa štítků ARIA pomocí React, JavaScript a optimalizovaných metod

// 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;

Implementace vlastního obalu pro štítky ARIA v DayPicker

Přizpůsobení štítků ARIA založené na Reactu pomocí funkčních komponent

// 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;

Unit Tests pro ARIA Label Assignment

Knihovna testování Jest and React pro zajištění integrity štítků 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();
  });
});

Často kladené otázky o štítcích ARIA v DayPicker

1. co jsou ARIA labels používané v DayPicker?
2. Štítky ARIA poskytují přístupné popisy pro čtečky obrazovky a pomáhají uživatelům porozumět denním stavům, jako je „Vybráno“ nebo „Zakázáno“.
3. Jak dynamicky přidám ARIA attributes bez použití DOM manipulace?
4. Pomocí nástroje DayPicker components rekvizitu, můžete přizpůsobit vykreslování dne a přímo přidat štítky ARIA.
5. Mohu lokalizovat ARIA labels pro mezinárodní uživatele?
6. Ano, data můžete formátovat pomocí Intl.DateTimeFormat zajistit, aby štítky ARIA odrážely lokalizované formáty data.
7. Jak se mohu zlepšit keyboard navigation vedle značek ARIA?
8. DayPicker nativně podporuje navigaci pomocí klávesnice, ale přidává vlastní focus styles zlepšuje jak použitelnost, tak dostupnost.
9. Existují náklady na výkon při přidávání dynamiky ARIA attributes?
10. Správná implementace atributů ARIA pomocí stavu a rekvizit React zajišťuje minimální režii výkonu.

Zlepšení dostupnosti pomocí dynamických štítků ARIA

Přidávání štítky ARIA na DayPicker zlepšuje dostupnost popisem stavu jednotlivých prvků dne pro asistenční technologie. Vytváří bezproblémové prostředí pro uživatele, kteří se spoléhají na čtečky obrazovky, a zajišťuje, že klíčové stavy jako „vybrané“ nebo „nedostupné“ jsou jasné. ✅

Kombinací háčků React a vlastních přístupů vykreslování dosahujeme řešení, které je efektivní a udržovatelné. Ať už prostřednictvím přímé manipulace s DOM nebo deklarativních rekvizit, zaměření zůstává na poskytování komplexního kalendářového rozhraní přístupného všem uživatelům. 🌟