Jak używać React, aby łatwo dodawać dostępne etykiety ARIA do DayPicker

Udostępnianie komponentu kalendarza React za pomocą etykiet ARIA

Dostępność jest krytycznym aspektem współczesnego tworzenia stron internetowych, zapewniającym, że aplikacje będą dostępne dla wszystkich użytkowników. W projektach React, używając komponentów takich jak Wybór dnia wyświetlanie interfejsów kalendarza może stanowić wyjątkowe wyzwanie przy próbie udostępnienia ich czytnikom ekranu.

Ostatnio pracowałem nad projektem, w którym musiałem dynamicznie dodawać Etykiety ARIA do poszczególnych elementów dnia w a Wybór dnia część. Celem było zapewnienie użytkownikom istotnych informacji, takich jak „Wybrana data: 1 stycznia 2024 r.” lub „Niedostępna data: 2 stycznia 2024 r.” na podstawie stanu każdego dnia.

Na początku próbowałem standardowych rozwiązań, np ariaLabelFormatter Lub dzień renderowania, ale szybko zdałem sobie sprawę, że selekcjoner dnia reakcji biblioteka nie posiadała wbudowanej obsługi takich rekwizytów. Moim następnym odruchem było manipulowanie post-renderem DOM za pomocą użyjRef I użyjEfektu. Chociaż podejście to było funkcjonalne, wydawało się kruche i w dużym stopniu zależne od nazw klas. 😕

W tym artykule opisano bardziej niezawodne rozwiązanie umożliwiające dynamiczne dodawanie etykiet ARIA do pliku Wybór dnia dni. Niezależnie od tego, czy masz do czynienia ze stanami wybranymi, wyłączonymi czy niedostępnymi, zadbamy o to, aby Twój kalendarz pozostał dostępny i przyjazny dla czytnika ekranu. Zanurzmy się! 🚀

Dynamiczne etykiety ARIA dla DayPicker: szczegółowy przewodnik

Kiedy budujesz A element kalendarza w React przy użyciu biblioteki DayPicker, zapewnienie dostępności dla czytników ekranu może być trudne. Głównym wyzwaniem jest dynamiczne dodawanie Etykiety ARIA do elementów day, dzięki czemu komunikują stany takie jak „wybrany”, „wyłączony” lub „niedostępny”. Aby rozwiązać ten problem, zastosowaliśmy dwa podejścia: manipulację DOM po renderowaniu i niestandardową funkcję renderowania. Przyjrzyjmy się, jak działają te rozwiązania i jakie są kluczowe komponenty wykorzystywane do osiągnięcia dostępności. 🗓️

Pierwsze rozwiązanie opiera się na Manipulacja DOM po renderowaniu używając Reacta użyjRef I użyjEfektu. Tworząc odwołanie do komponentu DayPicker za pomocą `useRef`, możemy uzyskać dostęp do renderowanych węzłów DOM. W haku `useEffect` odpytujemy elementy całodzienne (`.rdp-day`) za pomocą `querySelectorAll`. Dla każdego dnia sprawdzamy nazwy klas, aby określić jego stan. Jeśli dzień ma klasę „rdp-day_selected”, dodajemy etykietę ARIA, np. „Wybrana data: 1 stycznia 2024 r.”. Ta metoda zapewnia dynamiczną aktualizację etykiet ARIA przy każdej zmianie stanu kalendarza.

Drugie rozwiązanie przyjmuje czystsze i bardziej przyjazne dla React podejście poprzez zdefiniowanie pliku a niestandardowa funkcja renderowania. W DayPicker używamy niestandardowego komponentu za pośrednictwem właściwości `components`, aby zastąpić renderowanie elementów dnia. Funkcja niestandardowa otrzymuje każdy dzień i jego modyfikatory stanu jako parametry. Korzystając z funkcji pomocniczej, dynamicznie generujemy etykiety ARIA na podstawie stanu każdego dnia (np. wybrany, wyłączony). Przykładowo „Data niedostępna: 2 stycznia 2024” jest przypisana do dni oznaczonych jako wyłączone. Takie podejście pozwala uniknąć manipulacji DOM i sprawia, że ​​rozwiązanie jest łatwiejsze w utrzymaniu.

Obie metody mają swoje zalety i wady. Chociaż manipulacja DOM po renderowaniu daje nam kontrolę nad renderowanym wyjściem, zależy to w dużej mierze od nazw klas, które mogą ulec zmianie wraz z aktualizacjami bibliotek. Z drugiej strony użycie atrybutu „komponenty” lepiej pasuje do deklaratywnego paradygmatu Reacta, dzięki czemu kod jest czystszy i łatwiejszy do debugowania. Ostatecznie wybór pomiędzy tymi podejściami zależy od wymagań projektu i ograniczeń biblioteki. Tak czy inaczej, wynik końcowy zapewnia dostępność kalendarza użytkownikom korzystającym z czytników ekranu, co poprawia użyteczność dla wszystkich. 🌟

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

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

// 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();
  });
});

Zapewnienie dostępności czytnika ekranu w React DayPicker

Dodawanie Etykiety ARIA dynamicznie ma kluczowe znaczenie dla dostępności, ale tworzenie włączającego doświadczenia w React DayPicker to coś więcej. Jednym z pomijanych aspektów jest zapewnienie nawigacja klawiaturowa i zarządzanie koncentracją. Użytkownicy czytników ekranu w dużym stopniu korzystają z klawiatury, aby przeglądać interaktywne komponenty, takie jak kalendarze. DayPicker od razu po wyjęciu z pudełka obsługuje podstawową nawigację za pomocą klawiatury, ale dostosowanie go do etykiet ARIA może sprawić, że będzie bardziej intuicyjny.

Kolejnym obszarem do zbadania jest obsługa internacjonalizacji (i18n). Jeśli Twój projekt jest skierowany do użytkowników z różnych regionów, etykiety ARIA muszą odzwierciedlać zlokalizowane formaty dat i język. Na przykład zamiast „1 stycznia 2024 r.” użytkownik z Francji powinien usłyszeć „1 stycznia 2024 r.”. Biblioteki takie jak `react-intl` lub natywny JavaScript `Intl.DateTimeFormat` mogą pomóc w dynamicznym formatowaniu tych etykiet dla czytników ekranu w różnych lokalizacjach.

Na koniec możesz jeszcze bardziej poprawić dostępność, wskazując wizualnie bieżący cel lub stan dnia. Łączenie niestandardowe Klasy CSS z atrybutami ARIA, takimi jak `aria-current="date"`, zapewnia dostępność zarówno wizualną, jak i semantyczną. Możesz na przykład wizualnie wyróżnić dzisiejszą datę, zapewniając jednocześnie kontekst czytnikom ekranu. Ten poziom dopracowania gwarantuje, że Twój DayPicker nie tylko działa, ale wyróżnia się tym, że jest włączający dla wszystkich użytkowników. 🎯