Com utilitzar React per afegir fàcilment etiquetes ARIA accessibles a DayPicker

Fer que el vostre component del calendari React sigui accessible amb etiquetes ARIA

L'accessibilitat és un aspecte crític del desenvolupament web modern, assegurant que les aplicacions siguin inclusives per a tots els usuaris. En projectes React, utilitzant components com Selector de dia mostrar les interfícies d'usuari del calendari poden presentar reptes únics quan s'intenta fer-les accessibles per als lectors de pantalla.

Recentment, vaig treballar en un projecte on necessitava afegir dinàmicament Etiquetes ARIA als elements individuals del dia a Selector de dia component. L'objectiu era proporcionar als usuaris informació significativa com ara "Data seleccionada: 1 de gener de 2024" o "Data no disponible: 2 de gener de 2024" en funció de l'estat de cada dia.

Al principi, vaig provar solucions estàndard com ariaLabelFormatter o renderDay, però ràpidament es va adonar que el reaccionar-selector de dies La biblioteca no tenia suport integrat per a aquests accessoris. El meu següent instint va ser manipular el DOM posterior a la renderització úsRef i useEffect. Tot i que era funcional, aquest enfocament semblava fràgil i depenia molt dels noms de classe. 😕

Aquest article us guiarà per una solució més robusta per afegir-hi etiquetes ARIA de manera dinàmica Selector de dia dies. Tant si estàs tractant amb estats seleccionats, desactivats o no disponibles, ens assegurarem que el teu calendari segueixi sent accessible i fàcil de llegir en pantalla. Submergem-nos! 🚀

Etiquetes ARIA dinàmiques per a DayPicker: una guia detallada

Quan es construeix a component del calendari a React mitjançant la biblioteca DayPicker, garantir l'accessibilitat per als lectors de pantalla pot ser complicat. El principal repte és sumar dinàmicament Etiquetes ARIA elements actuals, de manera que comuniquen estats com "seleccionat", "desactivat" o "no disponible". Per resoldre-ho, hem utilitzat dos enfocaments: la manipulació de DOM després de la representació i una funció de renderització personalitzada. Desglossem com funcionen aquestes solucions i els components clau que s'utilitzen per aconseguir l'accessibilitat. 🗓️

La primera solució es basa manipulació DOM posterior a la renderització utilitzant React úsRef i useEffect. En crear una referència al component DayPicker amb `useRef`, podem accedir als nodes DOM representats. Dins d'un ganxo `useEffect`, consultem els elements de tot el dia (`.rdp-day`) mitjançant `querySelectorAll`. Per a cada dia, comprovem els seus noms de classe per determinar-ne l'estat. Si un dia té la classe "rdp-day_selected", afegim una etiqueta ARIA com "Data seleccionada: 1 de gener de 2024". Aquest mètode garanteix que les etiquetes ARIA s'actualitzen dinàmicament sempre que canvia l'estat del calendari.

La segona solució adopta un enfocament més net i amigable amb React definint a funció de renderització personalitzada. A DayPicker, utilitzem un component personalitzat mitjançant l'accessori "components" per anul·lar la representació dels elements del dia. La funció personalitzada rep cada dia i els seus modificadors d'estat com a paràmetres. Utilitzant una funció d'ajuda, generem de forma dinàmica etiquetes ARIA en funció de l'estat de cada dia (p. ex., seleccionat, desactivat). Per exemple, "Data no disponible: 2 de gener de 2024" s'assigna als dies marcats com a desactivats. Aquest enfocament evita la manipulació DOM i manté la solució més fàcil de mantenir.

Tots dos mètodes tenen els seus pros i contres. Tot i que la manipulació DOM posterior a la representació ens dóna control sobre la sortida renderitzada, depèn molt dels noms de classe, que podrien canviar amb les actualitzacions de la biblioteca. D'altra banda, l'ús de l'accessori "components" s'alinea millor amb el paradigma declaratiu de React, fent que el codi sigui més net i més fàcil de depurar. En definitiva, l'elecció entre aquests enfocaments depèn dels requisits del vostre projecte i de les limitacions de la biblioteca. De qualsevol manera, el resultat final garanteix que el calendari sigui accessible per als usuaris que confien en lectors de pantalla, millorant la usabilitat per a tothom. 🌟

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

Garantir l'accessibilitat del lector de pantalla a React DayPicker

Afegint Etiquetes ARIA de manera dinàmica és fonamental per a l'accessibilitat, però hi ha més coses per crear una experiència inclusiva en un React DayPicker. Un aspecte passat per alt és garantir navegació amb teclat i gestió del focus. Els usuaris de lectors de pantalla depenen molt de les entrades del teclat per recórrer components interactius com ara calendaris. DayPicker, fora de la caixa, admet la navegació bàsica del teclat, però personalitzar-lo juntament amb les etiquetes ARIA pot fer-lo més intuïtiu.

Una altra àrea a explorar és el suport a la internacionalització (i18n). Si el vostre projecte s'adreça a usuaris de diverses regions, les etiquetes ARIA han de reflectir els formats de data i l'idioma localitzats. Per exemple, en comptes de "1 de gener de 2024", un usuari francès hauria de sentir "1 de gener de 2024". Biblioteques com `react-intl` o JavaScript natiu `Intl.DateTimeFormat` poden ajudar a formatar dinàmicament aquestes etiquetes per als lectors de pantalla en diferents entorns.

Finalment, podeu millorar encara més l'accessibilitat indicant visualment el focus o l'estat actual d'un dia. Combinació personalitzada Classes CSS amb atributs ARIA com `aria-current="date"` garanteix l'accessibilitat tant visual com semàntica. Per exemple, podeu ressaltar visualment la data d'avui alhora que proporcioneu context als lectors de pantalla. Aquest nivell de poliment garanteix que el vostre DayPicker no només funcioni, sinó que destaca per ser inclusiu per a tots els usuaris. 🎯