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

Temp mail SuperHeros
Jak używać React, aby łatwo dodawać dostępne etykiety ARIA do DayPicker
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ę! 🚀

Rozkaz Przykład użycia
useRef const kalendarzRef = useRef(null); Tworzy modyfikowalny obiekt referencyjny umożliwiający bezpośredni dostęp do modelu DOM składnika DayPicker i manipulowanie nim.
querySelectorAll kalendarzRef.prąd.querySelectorAll(.rdp-day"); Pobiera wszystkie elementy pasujące do dzień rdp class w komponencie DayPicker w celu dalszej manipulacji.
setAttribute day.setAttribute("aria-label", ariaLabel); Dynamicznie dodaje lub modyfikuje aria-label atrybut zapewniający dostępność czytnikom ekranu.
components komponenty={{ Dzień: renderDay }} Wprowadza niestandardową funkcję zastępującą domyślne renderowanie każdego dnia, umożliwiając dostosowywanie etykiet ARIA.
modifiers modifiers={{ograniczone: kalendarzDaty.limited }} Definiuje określone stany dnia (np. ograniczony, niedostępny) w DayPicker, aby rozróżnić dni wizualnie i funkcjonalnie.
aria-label
Dodaje opis semantyczny do dni, dzięki czemu są one zrozumiałe i łatwe w nawigacji dla technologii wspomagających, takich jak czytniki ekranu.
getByLabelText screen.getByLabelText("Wybrana data: 1 stycznia"); W testach jednostkowych sprawdza to elementy według ich aria-label atrybut, aby zapewnić prawidłowe zastosowanie etykiet dostępności.
useEffect useEffect(() => {...}, [data_kalendarza]); Wykonuje logikę po renderowaniu DayPicker, zapewniając dynamiczne dodawanie etykiet ARIA w przypadku zmiany stanu kalendarza.
modifiersStyles modifiersStyles={{ograniczony:ograniczonyStyle }} Stosuje niestandardową stylizację do modyfikatorów określonych dni, dzięki czemu ich stany są wizualnie odrębne dla użytkowników.
generateAriaLabel generujAriaLabel(dzień, modyfikatory) Funkcja narzędziowa, która dynamicznie generuje kontekstowe etykiety ARIA na podstawie stanu dnia.

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. 🌟

Jak dynamicznie dodawać etykiety ARIA do komponentu React DayPicker

Dynamiczne zarządzanie etykietami ARIA przy użyciu React, JavaScript i metod zoptymalizowanych

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

Implementowanie niestandardowego opakowania dla etykiet ARIA w DayPicker

Dostosowywanie etykiet ARIA w oparciu o reakcję przy użyciu komponentów funkcjonalnych

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

Testy jednostkowe dla przypisania etykiet ARIA

Biblioteka testowa Jest i React w celu zapewnienia integralności etykiet 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();
  });
});

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. 🎯

Często zadawane pytania dotyczące etykiet ARIA w DayPicker

  1. Jakie są ARIA labels używany w DayPicker?
  2. Etykiety ARIA zapewniają przystępne opisy dla czytników ekranu, pomagając użytkownikom zrozumieć stany dnia, takie jak „Wybrany” lub „Wyłączony”.
  3. Jak dynamicznie dodać ARIA attributes bez użycia manipulacji DOM?
  4. Korzystanie z DayPickera components prop, możesz dostosować renderowanie dnia i bezpośrednio dodać etykiety ARIA.
  5. Czy mogę zlokalizować plik ARIA labels dla użytkowników międzynarodowych?
  6. Tak, możesz formatować daty za pomocą Intl.DateTimeFormat aby mieć pewność, że etykiety ARIA odzwierciedlają zlokalizowane formaty dat.
  7. Jak mam się poprawić keyboard navigation obok etykiet ARIA?
  8. DayPicker obsługuje natywnie nawigację za pomocą klawiatury, ale dodaje ją niestandardową focus styles poprawia zarówno użyteczność, jak i dostępność.
  9. Czy dodawanie dynamic ARIA attributes?
  10. Prawidłowa implementacja atrybutów ARIA przy użyciu stanu i właściwości Reacta zapewnia minimalne obciążenie wydajności.

Poprawa dostępności dzięki dynamicznym etykietom ARIA

Dodawanie Etykiety ARIA do DayPicker poprawia dostępność poprzez opisanie stanu poszczególnych elementów dnia dla technologii wspomagających. Zapewnia płynną obsługę użytkownikom korzystającym z czytników ekranu, zapewniając przejrzystość kluczowych stanów, takich jak „wybrany” lub „niedostępny”. ✅

Łącząc haki React i niestandardowe podejścia do renderowania, uzyskujemy rozwiązanie, które jest zarówno skuteczne, jak i łatwe w utrzymaniu. Niezależnie od tego, czy chodzi o bezpośrednią manipulację DOM, czy o deklaratywne rekwizyty, nacisk pozostaje na dostarczaniu zintegrowanego interfejsu kalendarza dostępnego dla wszystkich użytkowników. 🌟

Źródła i odniesienia do dostępnych etykiet ARIA w React DayPicker
  1. Opracowuje urzędnika Wybór dnia reakcji dokumentacja biblioteczna umożliwiająca eksplorację funkcjonalności i modyfikatorów komponentów. Więcej znajdziesz na Dokumentacja narzędzia React-Day-Picker .
  2. Odwołuje się do znaczenia dostępności i najlepszych praktyk ARIA z Dokumenty internetowe MDN. Szczegółowe wytyczne dotyczące atrybutów ARIA są dostępne pod adresem Dokumentacja MDN ARIA .
  3. Bada koncepcje poprawy dostępności sieci i kompatybilności czytników ekranu udostępnione w WebAIM, który można znaleźć pod adresem WebAIM: z myślą o dostępności sieci .