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 å 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 til de enkelte dagselementene i en 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 eller , men skjønte raskt at biblioteket manglet innebygd støtte for slike rekvisitter. Mitt neste instinkt var å manipulere DOM etter gjengivelse ved hjelp av brukRef og . 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 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! 🚀

Kommando	Eksempel på bruk
useRef	const calendarRef = brukRef(null); Oppretter et mutbart referanseobjekt for å få direkte tilgang til og manipulere DOM-en til DayPicker-komponenten.
querySelectorAll	calendarRef.current.querySelectorAll(".rdp-day"); Henter alle elementer som samsvarer med klasse i DayPicker-komponenten for videre manipulering.
setAttribute	day.setAttribute("aria-etikett", ariaLabel); Legger til eller endrer dynamisk attributt for å gi tilgjengelighet for skjermlesere.
components	komponenter={{ Dag: renderDay }} Injiserer en tilpasset funksjon for å erstatte standardgjengivelsen for hver dag, noe som muliggjør tilpasning av ARIA-etiketter.
modifiers	modifiers={{ limited: calendarDates.limited }} Definerer spesifikke dagstilstander (f.eks. begrenset, utilgjengelig) i DayPicker for å skille dager visuelt og funksjonelt.
aria-label	Legger til en semantisk beskrivelse til dager, noe som gjør dem forståelige og navigerbare for hjelpeteknologier som skjermlesere.
getByLabelText	screen.getByLabelText("Valgt dato: 1. januar"); I enhetstester spør dette om elementer etter deres attributt for å sikre at tilgjengelighetsetiketter brukes riktig.
useEffect	useEffect(() => {...}, [calendarDates]); Utfører logikk etter at DayPicker gjengir, og sikrer at ARIA-etiketter legges til dynamisk når kalendertilstanden endres.
modifiersStyles	modifiersStyles={{ limited: limitedStyle }} Bruker tilpasset stil på spesifikke dagsmodifikatorer, og gjør tilstandene deres visuelt forskjellige for brukerne.
generateAriaLabel	generAriaLabel(dag, modifikatorer) En verktøyfunksjon som genererer kontekstspesifikke ARIA-etiketter dynamisk basert på en dags tilstand.

Dynamiske ARIA-etiketter for DayPicker: En dybdeveiledning

Når du bygger en i React ved å bruke DayPicker-biblioteket, kan det være vanskelig å sikre tilgjengelighet for skjermlesere. Hovedutfordringen ligger i å legge til dynamisk 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 ved hjelp av React's og . 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 . 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 dynamisk er avgjørende for tilgjengelighet, men det er mer å skape en inkluderende opplevelse i en React DayPicker. Et oversett aspekt er å sikre 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 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. 🎯

1. Hva er brukt for i DayPicker?
2. ARIA-etiketter gir tilgjengelige beskrivelser for skjermlesere, og hjelper brukere å forstå dagstilstander som «Valgt» eller «Deaktivert».
3. Hvordan legger jeg til dynamisk uten å bruke DOM-manipulasjon?
4. Bruke DayPicker prop, kan du tilpasse dagsgjengivelsen og legge til ARIA-etiketter direkte.
5. Kan jeg lokalisere for internasjonale brukere?
6. Ja, du kan formatere datoer ved å bruke for å sikre at ARIA-etiketter gjenspeiler lokaliserte datoformater.
7. Hvordan forbedrer jeg meg sammen med ARIA-etiketter?
8. DayPicker støtter tastaturnavigasjon naturlig, men legger til tilpasset forbedrer både brukervennlighet og tilgjengelighet.
9. Er det en ytelseskostnad når du legger til dynamisk ?
10. Riktig implementering av ARIA-attributter ved å bruke Reacts tilstand og rekvisitter sikrer minimal ytelsesoverhead.

Legger til til DayPicker forbedrer tilgjengeligheten ved å beskrive tilstanden til individuelle dagselementer for hjelpeteknologier. Det skaper en sømløs opplevelse for brukere som stoler på skjermlesere, og sikrer at nøkkeltilstander som "valgt" eller "utilgjengelig" er klare. ✅

Ved å kombinere React-kroker og tilpassede gjengivelsesmetoder, oppnår vi en løsning som er både effektiv og vedlikeholdbar. Enten gjennom direkte DOM-manipulasjon eller deklarative rekvisitter, forblir fokuset på å levere et inkluderende kalendergrensesnitt tilgjengelig for alle brukere. 🌟