Kako uporabljati React za enostavno dodajanje dostopnih oznak ARIA v DayPicker

Omogočanje dostopnosti vaše komponente koledarja React z oznakami ARIA

Dostopnost je ključni vidik sodobnega spletnega razvoja, ki zagotavlja, da so aplikacije vključujoče za vse uporabnike. V projektih React uporaba komponent, kot je DayPicker za prikaz koledarskih uporabniških vmesnikov lahko predstavljajo edinstvene izzive, ko poskušate narediti dostopne za bralnike zaslona.

Pred kratkim sem delal na projektu, kjer sem moral dinamično dodajati Oznake ARIA na posamezne dnevne elemente v a DayPicker komponento. Cilj je bil uporabnikom zagotoviti pomembne informacije, kot je »Izbrani datum: 1. januar 2024« ali »Nerazpoložljiv datum: 2. januar 2024« glede na stanje vsakega dne.

Sprva sem poskušal standardne rešitve, kot je ariaLabelFormatter oz renderDay, a je hitro ugotovila, da je izbirnik odzivnih dni knjižnica ni imela vgrajene podpore za takšne pripomočke. Moj naslednji instinkt je bil manipulirati z naknadnim upodabljanjem DOM z uporabo useRef in useEffect. Čeprav je bil ta pristop funkcionalen, se je zdel krhek in močno odvisen od imen razredov. 😕

Ta članek vas bo vodil skozi robustnejšo rešitev za dinamično dodajanje oznak ARIA vašim DayPicker dni. Ne glede na to, ali imate opravka z izbranimi, onemogočenimi ali nedosegljivimi stanji, bomo zagotovili, da bo vaš koledar ostal dostopen in prijazen bralniku zaslona. Potopimo se! 🚀

Dinamične oznake ARIA za DayPicker: Poglobljen vodnik

Pri gradnji a koledarsko komponento v Reactu z uporabo knjižnice DayPicker je zagotavljanje dostopnosti za bralnike zaslona lahko težavno. Glavni izziv je dinamično dodajanje oznake ARIA na dnevne elemente, tako da sporočajo stanja, kot so »izbrano«, »onemogočeno« ali »ni na voljo«. Za rešitev tega problema smo uporabili dva pristopa: manipulacijo DOM po upodabljanju in funkcijo upodabljanja po meri. Razčlenimo, kako te rešitve delujejo, in ključne komponente, ki se uporabljajo za doseganje dostopnosti. 🗓️

Prva rešitev temelji na manipulacija DOM po upodabljanju z uporabo React-ja useRef in useEffect. Če ustvarimo sklic na komponento DayPicker z `useRef`, lahko dostopamo do upodobljenih vozlišč DOM. Znotraj kljuke `useEffect` poizvedujemo po vseh dnevnih elementih (`.rdp-day`) z uporabo `querySelectorAll`. Za vsak dan preverimo imena njegovih razredov, da ugotovimo njihovo stanje. Če ima dan razred »rdp-day_selected«, dodamo oznako ARIA, kot je »Izbrani datum: 1. januar 2024«. Ta metoda zagotavlja, da se oznake ARIA dinamično posodabljajo vsakič, ko se spremeni stanje koledarja.

Druga rešitev uporablja čistejši, Reactu prijaznejši pristop z definiranjem a funkcija upodabljanja po meri. V DayPickerju uporabljamo komponento po meri prek elementa `components`, da preglasimo upodabljanje dnevnih elementov. Funkcija po meri prejme vsak dan in njegove modifikatorje stanja kot parametre. S pomožno funkcijo dinamično ustvarimo oznake ARIA glede na stanje posameznega dne (npr. izbrano, onemogočeno). Na primer, »Nerazpoložljiv datum: 2. januar 2024« je dodeljen dnevom, ki so označeni kot onemogočeni. Ta pristop se izogne ​​manipulaciji z DOM in poskrbi, da je rešitev bolj vzdržljiva.

Obe metodi imata svoje prednosti in slabosti. Medtem ko nam manipulacija DOM po upodabljanju daje nadzor nad upodobljenim izhodom, je močno odvisna od imen razredov, ki se lahko spremenijo s posodobitvami knjižnice. Po drugi strani pa je uporaba elementa `components` bolje usklajena z Reactovo deklarativno paradigmo, zaradi česar je koda čistejša in lažja za odpravljanje napak. Končno je izbira med temi pristopi odvisna od vaših projektnih zahtev in omejitev knjižnice. Kakor koli že, končni rezultat zagotavlja, da je koledar dostopen uporabnikom, ki se zanašajo na bralnike zaslona, ​​kar izboljša uporabnost za vse. 🌟

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

Zagotavljanje dostopnosti bralnika zaslona v React DayPicker

Dodajanje oznake ARIA dinamično je ključnega pomena za dostopnost, vendar je ustvarjanje vključujoče izkušnje v React DayPickerju še več. En spregledan vidik je zagotavljanje navigacija s tipkovnico in upravljanje fokusa. Uporabniki bralnikov zaslona se za premikanje po interaktivnih komponentah, kot so koledarji, močno zanašajo na vnose s tipkovnice. DayPicker, takoj po izdelavi, podpira osnovno navigacijo s tipkovnico, vendar ga lahko naredite bolj intuitivnega, če ga prilagodite poleg oznak ARIA.

Drugo področje, ki ga je treba raziskati, je podpora za internacionalizacijo (i18n). Če je vaš projekt namenjen uporabnikom iz različnih regij, morajo oznake ARIA odražati lokalizirane oblike zapisa datuma in jezik. Na primer, namesto »1. januar 2024« bi moral francoski uporabnik slišati »1. januar 2024«. Knjižnice, kot je `react-intl` ali izvorni JavaScript `Intl.DateTimeFormat`, lahko pomagajo dinamično oblikovati te oznake za bralnike zaslona v različnih jezikih.

Nazadnje lahko dodatno izboljšate dostopnost z vizualno navedbo trenutnega fokusa ali stanja dneva. Kombinacija po meri razredi CSS z atributi ARIA, kot je `aria-current="date"`, zagotavlja vizualno in semantično dostopnost. Na primer, lahko vizualno poudarite današnji datum, hkrati pa zagotovite kontekst bralnikom zaslona. Ta stopnja dovršenosti zagotavlja, da vaš DayPicker ne le deluje, temveč se odlikuje po tem, da je vključujoč za vse uporabnike. 🎯