Kako koristiti React za jednostavno dodavanje dostupnih ARIA oznaka u DayPicker

Omogućite pristup komponenti React kalendara pomoću ARIA oznaka

Pristupačnost je ključni aspekt modernog web razvoja, koji osigurava da su aplikacije inkluzivne za sve korisnike. U React projektima, korištenje komponenti poput DayPicker za prikaz kalendara UI-ja mogu predstavljati jedinstvene izazove kada ih pokušavate učiniti dostupnima za čitače zaslona.

Nedavno sam radio na projektu gdje sam trebao dinamički dodavati ARIA oznake na pojedinačne elemente dana u a DayPicker komponenta. Cilj je bio pružiti korisnicima smislene informacije kao što su "Odabrani datum: 1. siječnja 2024." ili "Nedostupan datum: 2. siječnja 2024." na temelju stanja svakog dana.

Isprva sam isprobao standardna rješenja poput ariaLabelFormatter ili renderDay, ali je brzo shvatio da je birač dana reakcije knjižnica nije imala ugrađenu podršku za takve rekvizite. Moj sljedeći instinkt bio je manipulirati DOM post-renderom pomoću upotrebaRef i useEffect. Iako je bio funkcionalan, ovaj se pristup činio krhkim i snažno se oslanjao na nazive klasa. 😕

Ovaj će vas članak provesti kroz robusnije rješenje za dinamičko dodavanje ARIA oznaka vašim DayPicker dana. Bilo da imate posla s odabranim, onemogućenim ili nedostupnim stanjima, pobrinut ćemo se da vaš kalendar ostane pristupačan i jednostavan za čitanje zaslona. Zaronimo! 🚀

Dinamičke ARIA oznake za DayPicker: detaljan vodič

Prilikom izgradnje a komponenta kalendara u Reactu koristeći biblioteku DayPicker, osiguravanje pristupačnosti za čitače zaslona može biti teško. Glavni izazov leži u dinamičkom dodavanju ARIA oznake dnevnim elementima, tako da komuniciraju stanja poput "odabrano", "onemogućeno" ili "nedostupno". Da bismo to riješili, upotrijebili smo dva pristupa: manipulaciju DOM-om nakon renderiranja i prilagođenu funkciju renderiranja. Razdvojimo kako ta rješenja funkcioniraju i ključne komponente koje se koriste za postizanje pristupačnosti. 🗓️

Prvo rješenje oslanja se na manipulacija DOM-om nakon renderiranja pomoću React-a upotrebaRef i useEffect. Stvaranjem reference na DayPicker komponentu s `useRef`, možemo pristupiti prikazanim DOM čvorovima. Unutar kuke `useEffect` postavljamo upite za sve dnevne elemente (`.rdp-dan`) pomoću `querySelectorAll`. Za svaki dan provjeravamo nazive njegovih klasa kako bismo odredili njegovo stanje. Ako dan ima klasu "rdp-day_selected", dodajemo oznaku ARIA kao što je "Odabrani datum: 1. siječnja 2024." Ova metoda osigurava da se ARIA oznake dinamički ažuriraju kad god se promijeni stanje kalendara.

Drugo rješenje ima čišći pristup koji je više prilagođen Reactu definiranjem a prilagođena funkcija renderiranja. U DayPickeru koristimo prilagođenu komponentu putem rekvizita `components` za nadjačavanje prikazivanja elemenata dana. Prilagođena funkcija prima svaki dan i njegove modifikatore stanja kao parametre. Pomoću pomoćne funkcije dinamički generiramo ARIA oznake na temelju stanja svakog dana (npr. odabrano, onemogućeno). Na primjer, "Nedostupan datum: 2. siječnja 2024." dodjeljuje se danima koji su označeni kao onemogućeni. Ovim pristupom izbjegava se manipulacija DOM-om i rješenje se lakše održava.

Obje metode imaju svoje prednosti i nedostatke. Dok nam DOM manipulacija nakon renderiranja daje kontrolu nad renderiranim izlazom, ona uvelike ovisi o nazivima klasa, koji bi se mogli promijeniti s ažuriranjem biblioteke. S druge strane, korištenje prop `components` bolje se usklađuje s Reactovom deklarativnom paradigmom, čineći kod čišćim i lakšim za otklanjanje pogrešaka. U konačnici, izbor između ovih pristupa ovisi o zahtjevima vašeg projekta i ograničenjima knjižnice. U svakom slučaju, krajnji rezultat osigurava da je kalendar dostupan korisnicima koji se oslanjaju na čitače zaslona, ​​poboljšavajući upotrebljivost za sve. 🌟

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

Osiguravanje pristupačnosti čitača zaslona u React DayPickeru

Dodavanje ARIA oznake dinamički je ključan za pristupačnost, ali ima više za stvaranje inkluzivnog iskustva u React DayPickeru. Jedan zanemaren aspekt je osiguravanje navigacija tipkovnicom i upravljanje fokusom. Korisnici čitača zaslona uvelike se oslanjaju na unose s tipkovnice za kretanje kroz interaktivne komponente poput kalendara. DayPicker, izvan kutije, podržava osnovnu navigaciju tipkovnicom, ali prilagodba uz ARIA oznake može ga učiniti intuitivnijim.

Drugo područje koje treba istražiti je podrška za internacionalizaciju (i18n). Ako vaš projekt cilja korisnike iz različitih regija, ARIA oznake moraju odražavati lokalizirane formate datuma i jezik. Na primjer, umjesto "1. siječnja 2024.", francuski bi korisnik trebao čuti "1. siječnja 2024." Knjižnice kao što su `react-intl` ili izvorni JavaScript `Intl.DateTimeFormat` mogu pomoći u dinamičkom formatiranju ovih oznaka za čitače zaslona na različitim mjestima.

Na kraju, možete dodatno poboljšati pristupačnost vizualnim označavanjem trenutnog fokusa ili stanja dana. Kombinirajući običaj CSS klase s ARIA atributima poput `aria-current="date"` osigurava vizualnu i semantičku dostupnost. Na primjer, možete vizualno istaknuti današnji datum, istovremeno pružajući kontekst čitačima zaslona. Ova razina dotjeranosti osigurava da vaš DayPicker ne samo radi, već se ističe time što je inkluzivan za sve korisnike. 🎯