Slik bruker du React for enkelt å legge til tilgjengelige ARIA-etiketter til DayPicker

Gjør din React-kalenderkomponent tilgjengelig med ARIA-etiketter

Tilgjengelighet er et kritisk aspekt ved moderne nettutvikling, og sikrer at applikasjoner er inkluderende for alle brukere. I React-prosjekter, bruker komponenter som DayPicker å vise kalendergrensesnitt kan by på unike utfordringer når du prøver å gjøre dem tilgjengelige for skjermlesere.

Nylig jobbet jeg med et prosjekt der jeg trengte å legge til dynamisk ARIA-etiketter til de enkelte dagselementene i en DayPicker komponent. Målet var å gi brukerne meningsfull informasjon som «Valgt dato: 1. januar 2024» eller «Utilgjengelig dato: 2. januar 2024» basert på hver dags tilstand.

Først prøvde jeg standardløsninger som ariaLabelFormatter eller renderDay, men skjønte raskt at reagere-dagvelger biblioteket manglet innebygd støtte for slike rekvisitter. Mitt neste instinkt var å manipulere DOM etter gjengivelse ved hjelp av brukRef og useEffect. Selv om den var funksjonell, føltes denne tilnærmingen skjør og sterkt avhengig av klassenavn. 😕

Denne artikkelen vil lede deg gjennom en mer robust løsning for dynamisk å legge til ARIA-etiketter til din DayPicker dager. Enten du har å gjøre med valgte, deaktiverte eller utilgjengelige tilstander, sørger vi for at kalenderen din forblir tilgjengelig og skjermleservennlig. La oss dykke inn! 🚀

Dynamiske ARIA-etiketter for DayPicker: En dybdeveiledning

Når du bygger en kalenderkomponent i React ved å bruke DayPicker-biblioteket, kan det være vanskelig å sikre tilgjengelighet for skjermlesere. Hovedutfordringen ligger i å legge til dynamisk ARIA-etiketter daglige elementer, slik at de kommuniserer tilstander som «valgt», «deaktivert» eller «utilgjengelig». For å løse dette brukte vi to tilnærminger: DOM-manipulasjon etter gjengivelse og en tilpasset gjengivelsesfunksjon. La oss bryte ned hvordan disse løsningene fungerer og nøkkelkomponentene som brukes for å oppnå tilgjengelighet. 🗓️

Den første løsningen er avhengig av DOM-manipulasjon etter gjengivelse ved hjelp av React's brukRef og useEffect. Ved å opprette en referanse til DayPicker-komponenten med `useRef`, kan vi få tilgang til de gjengitte DOM-nodene. Innenfor en `useEffect`-hook, spør vi hele dagen-elementer (`.rdp-day`) ved å bruke `querySelectorAll`. For hver dag sjekker vi klassenavnene for å bestemme statusen. Hvis en dag har klassen «rdp-day_selected», legger vi til en ARIA-etikett som «Valgt dato: 1. januar 2024». Denne metoden sikrer at ARIA-etiketter oppdateres dynamisk hver gang kalendertilstanden endres.

Den andre løsningen tar en renere, mer React-vennlig tilnærming ved å definere en tilpasset gjengivelsesfunksjon. I DayPicker bruker vi en egendefinert komponent via 'components' prop for å overstyre gjengivelsen av dagselementer. Den egendefinerte funksjonen mottar hver dag og dens tilstandsmodifikatorer som parametere. Ved å bruke en hjelpefunksjon genererer vi dynamisk ARIA-etiketter basert på tilstanden for hver dag (f.eks. valgt, deaktivert). For eksempel er «Utilgjengelig dato: 2. januar 2024» tilordnet dager merket som deaktivert. Denne tilnærmingen unngår DOM-manipulasjon og gjør løsningen mer vedlikeholdbar.

Begge metodene har sine fordeler og ulemper. Mens post-render DOM-manipulasjon gir oss kontroll over den gjengitte utdata, avhenger det sterkt av klassenavn, som kan endres med bibliotekoppdateringer. På den annen side stemmer bruk av "komponenter"-rekvisitten bedre med Reacts deklarative paradigme, noe som gjør koden renere og enklere å feilsøke. Til syvende og sist avhenger valget mellom disse tilnærmingene av prosjektkravene dine og biblioteksbegrensninger. Uansett sikrer sluttresultatet at kalenderen er tilgjengelig for brukere som stoler på skjermlesere, noe som forbedrer brukervennligheten 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();
  });
});

Sikre tilgjengelighet for skjermleser i React DayPicker

Legger til ARIA-etiketter dynamisk er avgjørende for tilgjengelighet, men det er mer å skape en inkluderende opplevelse i en React DayPicker. Et oversett aspekt er å sikre tastaturnavigering og fokusstyring. Brukere av skjermlesere er sterkt avhengige av tastaturinndata for å krysse interaktive komponenter som kalendere. DayPicker, ut av esken, støtter grunnleggende tastaturnavigasjon, men å tilpasse den sammen med ARIA-etiketter kan gjøre den mer intuitiv.

Et annet område å utforske er internasjonalisering (i18n) støtte. Hvis prosjektet ditt er rettet mot brukere fra forskjellige regioner, må ARIA-etikettene gjenspeile lokaliserte datoformater og språk. For eksempel, i stedet for «1. januar 2024», bør en fransk bruker høre «1. januar 2024». Biblioteker som `react-intl` eller native JavaScript `Intl.DateTimeFormat` kan bidra til å dynamisk formatere disse etikettene for skjermlesere på forskjellige steder.

Til slutt kan du forbedre tilgjengeligheten ytterligere ved å visuelt indikere dagens fokus eller tilstand. Kombinere tilpasset CSS-klasser med ARIA-attributter som `aria-current="date"` sikrer både visuell og semantisk tilgjengelighet. Du kan for eksempel fremheve dagens dato visuelt samtidig som du gir kontekst til skjermlesere. Dette nivået av polering sikrer at DayPicker ikke bare fungerer, men utmerker seg ved å være inkluderende for alle brukere. 🎯