Sådan bruger du React til nemt at tilføje tilgængelige ARIA-etiketter til DayPicker

Gør din React-kalenderkomponent tilgængelig med ARIA-etiketter

Tilgængelighed er et kritisk aspekt af moderne webudvikling, der sikrer, at applikationer er inkluderende for alle brugere. I React-projekter, ved hjælp af komponenter som DayPicker at vise kalender UI'er kan give unikke udfordringer, når de forsøger at gøre dem tilgængelige for skærmlæsere.

For nylig arbejdede jeg på et projekt, hvor jeg skulle tilføje dynamisk ARIA etiketter til de enkelte dagselementer i en DayPicker komponent. Målet var at give brugerne meningsfulde oplysninger såsom "Valgt dato: 1. januar 2024" eller "Utilgængelig dato: 2. januar 2024" baseret på hver dags tilstand.

Først prøvede jeg standardløsninger som f.eks ariaLabelFormatter eller renderDag, men indså hurtigt, at reagere-dagvælger biblioteket manglede indbygget understøttelse af sådanne rekvisitter. Mit næste instinkt var at manipulere DOM efter-rendering ved hjælp af brugRef og useEffekt. Selvom den var funktionel, føltes denne tilgang skrøbelig og stærkt afhængig af klassenavne. 😕

Denne artikel vil lede dig gennem en mere robust løsning til dynamisk at tilføje ARIA-etiketter til din DayPicker dage. Uanset om du har at gøre med udvalgte, deaktiverede eller utilgængelige tilstande, vil vi sikre, at din kalender forbliver tilgængelig og skærmlæservenlig. Lad os dykke ned! 🚀

Dynamiske ARIA-etiketter til DayPicker: En dybdegående vejledning

Når man bygger en kalenderkomponent i React ved hjælp af DayPicker-biblioteket, kan det være vanskeligt at sikre tilgængelighed for skærmlæsere. Den største udfordring ligger i dynamisk tilføjelse ARIA etiketter daglige elementer, så de kommunikerer tilstande som "valgt", "deaktiveret" eller "utilgængelig". For at løse dette brugte vi to tilgange: post-render DOM-manipulation og en brugerdefineret gengivelsesfunktion. Lad os nedbryde, hvordan disse løsninger fungerer, og de nøglekomponenter, der bruges til at opnå tilgængelighed. 🗓️

Den første løsning er afhængig af post-render DOM-manipulation ved hjælp af React's brugRef og useEffekt. Ved at oprette en reference til DayPicker-komponenten med `useRef`, kan vi få adgang til de renderede DOM-noder. Inden for en `useEffect`-hook forespørger vi alle dages elementer (`.rdp-day`) ved hjælp af `querySelectorAll`. For hver dag tjekker vi dens klassenavne for at bestemme dens tilstand. Hvis en dag har klassen "rdp-day_selected", tilføjer vi en ARIA-etiket som "Valgt dato: 1. januar 2024". Denne metode sikrer, at ARIA-etiketter opdateres dynamisk, hver gang kalendertilstanden ændres.

Den anden løsning tager en renere, mere React-venlig tilgang ved at definere en tilpasset gengivelsesfunktion. I DayPicker bruger vi en brugerdefineret komponent via `components` prop for at tilsidesætte gengivelsen af ​​dagselementer. Den brugerdefinerede funktion modtager hver dag og dens tilstandsmodifikatorer som parametre. Ved hjælp af en hjælpefunktion genererer vi dynamisk ARIA-etiketter baseret på tilstanden for hver dag (f.eks. valgt, deaktiveret). For eksempel er "Utilgængelig dato: 2. januar 2024" tildelt dage markeret som deaktiveret. Denne tilgang undgår DOM-manipulation og holder løsningen mere vedligeholdelsesdygtig.

Begge metoder har deres fordele og ulemper. Mens post-render DOM-manipulation giver os kontrol over det renderede output, afhænger det meget af klassenavne, som kan ændre sig med biblioteksopdateringer. På den anden side stemmer brugen af ​​'komponenter'-rekvisitten bedre med Reacts deklarative paradigme, hvilket gør koden renere og lettere at fejlsøge. I sidste ende afhænger valget mellem disse tilgange af dine projektkrav og biblioteksbegrænsninger. Uanset hvad, så sikrer slutresultatet, at kalenderen er tilgængelig for brugere, der er afhængige af skærmlæsere, hvilket forbedrer brugervenligheden for alle. 🌟

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

Sikring af skærmlæsertilgængelighed i React DayPicker

Tilføjelse ARIA etiketter dynamisk er afgørende for tilgængelighed, men der er mere til at skabe en inkluderende oplevelse i en React DayPicker. Et overset aspekt er at sikre tastaturnavigation og fokusstyring. Skærmlæserbrugere er stærkt afhængige af tastaturinput for at krydse interaktive komponenter som kalendere. DayPicker, ud af kassen, understøtter grundlæggende tastaturnavigation, men tilpasning af det sammen med ARIA-etiketter kan gøre det mere intuitivt.

Et andet område at udforske er støtte til internationalisering (i18n). Hvis dit projekt er målrettet mod brugere fra forskellige regioner, skal ARIA-etiketterne afspejle lokaliserede datoformater og sprog. I stedet for "1. januar 2024" bør en fransk bruger f.eks. høre "1. januar 2024". Biblioteker som `react-intl` eller native JavaScript `Intl.DateTimeFormat` kan hjælpe dynamisk med at formatere disse etiketter til skærmlæsere i forskellige lokaliteter.

Endelig kan du forbedre tilgængeligheden yderligere ved visuelt at angive dagens fokus eller tilstand på en dag. Kombinerer brugerdefineret CSS klasser med ARIA-attributter som `aria-current="date"` sikrer både visuel og semantisk tilgængelighed. For eksempel kan du fremhæve dagens dato visuelt, mens du også giver kontekst til skærmlæsere. Dette niveau af polering sikrer, at din DayPicker ikke kun fungerer, men udmærker sig ved at være inkluderende for alle brugere. 🎯