Comment utiliser React pour ajouter facilement des étiquettes ARIA accessibles à DayPicker

Rendre votre composant de calendrier React accessible avec les étiquettes ARIA

L'accessibilité est un aspect essentiel du développement Web moderne, car elle garantit que les applications sont inclusives pour tous les utilisateurs. Dans les projets React, en utilisant des composants comme Sélecteur de jour Afficher les interfaces utilisateur du calendrier peut présenter des défis uniques lorsqu'on essaie de les rendre accessibles aux lecteurs d'écran.

Récemment, j'ai travaillé sur un projet dans lequel je devais ajouter dynamiquement Etiquettes ARIA aux éléments individuels de la journée dans un Sélecteur de jour composant. L'objectif était de fournir aux utilisateurs des informations significatives telles que « Date sélectionnée : 1er janvier 2024 » ou « Date indisponible : 2 janvier 2024 » en fonction de l'état de chaque jour.

Au début, j'ai essayé des solutions standards comme ariaLabelFormatter ou Jour de rendu, mais je me suis vite rendu compte que sélecteur de jour de réaction la bibliothèque ne disposait pas d'un support intégré pour de tels accessoires. Mon instinct suivant a été de manipuler le post-rendu DOM en utilisant utiliserRef et utiliserEffet. Bien que fonctionnelle, cette approche semblait fragile et fortement dépendante des noms de classe. 😕

Cet article vous présentera une solution plus robuste pour ajouter dynamiquement des étiquettes ARIA à votre Sélecteur de jour jours. Que vous ayez affaire à des états sélectionnés, désactivés ou indisponibles, nous veillerons à ce que votre calendrier reste accessible et convivial pour les lecteurs d'écran. Allons-y ! 🚀

Étiquettes ARIA dynamiques pour DayPicker : un guide détaillé

Lors de la construction d'un composant de calendrier dans React à l'aide de la bibliothèque DayPicker, garantir l'accessibilité pour les lecteurs d'écran peut être délicat. Le principal défi réside dans l’ajout dynamique Etiquettes ARIA aux éléments quotidiens, ils communiquent donc des états tels que « sélectionné », « désactivé » ou « indisponible ». Pour résoudre ce problème, nous avons utilisé deux approches : la manipulation DOM après le rendu et une fonction de rendu personnalisée. Décrivons le fonctionnement de ces solutions et les composants clés utilisés pour atteindre l'accessibilité. 🗓️

La première solution repose sur manipulation du DOM après le rendu en utilisant React utiliserRef et utiliserEffet. En créant une référence au composant DayPicker avec `useRef`, nous pouvons accéder aux nœuds DOM rendus. Dans un hook `useEffect`, nous interrogeons tous les éléments de la journée (`.rdp-day`) à l'aide de `querySelectorAll`. Pour chaque jour, nous vérifions ses noms de classe pour déterminer son état. Si un jour a la classe « rdp-day_selected », nous ajoutons une étiquette ARIA comme « Date sélectionnée : 1er janvier 2024 ». Cette méthode garantit que les étiquettes ARIA sont mises à jour dynamiquement chaque fois que l'état du calendrier change.

La deuxième solution adopte une approche plus propre et plus conviviale pour React en définissant un fonction de rendu personnalisée. Dans DayPicker, nous utilisons un composant personnalisé via la prop `components` pour remplacer le rendu des éléments du jour. La fonction personnalisée reçoit chaque jour et ses modificateurs d'état comme paramètres. À l'aide d'une fonction d'assistance, nous générons dynamiquement des étiquettes ARIA en fonction de l'état de chaque jour (par exemple, sélectionné, désactivé). Par exemple, « Date d'indisponibilité : 2 janvier 2024 » est attribué aux jours marqués comme désactivés. Cette approche évite la manipulation du DOM et maintient la solution plus maintenable.

Les deux méthodes ont leurs avantages et leurs inconvénients. Bien que la manipulation DOM après le rendu nous donne le contrôle sur la sortie rendue, elle dépend fortement des noms de classes, qui pourraient changer avec les mises à jour de la bibliothèque. D'un autre côté, l'utilisation de la prop `components` s'aligne mieux sur le paradigme déclaratif de React, rendant le code plus propre et plus facile à déboguer. En fin de compte, le choix entre ces approches dépend des exigences de votre projet et des contraintes de la bibliothèque. Quoi qu’il en soit, le résultat final garantit que le calendrier est accessible aux utilisateurs utilisant des lecteurs d’écran, améliorant ainsi la convivialité pour tous. 🌟

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

Assurer l'accessibilité du lecteur d'écran dans React DayPicker

Ajout Etiquettes ARIA la dynamique est essentielle pour l'accessibilité, mais il y a plus à créer une expérience inclusive dans un React DayPicker. Un aspect négligé est de garantir navigation au clavier et gestion de la concentration. Les utilisateurs de lecteurs d'écran s'appuient fortement sur les saisies au clavier pour parcourir les composants interactifs tels que les calendriers. DayPicker, prêt à l'emploi, prend en charge la navigation de base au clavier, mais sa personnalisation avec les étiquettes ARIA peut le rendre plus intuitif.

Un autre domaine à explorer est la prise en charge de l’internationalisation (i18n). Si votre projet cible des utilisateurs de diverses régions, les étiquettes ARIA doivent refléter les formats de date et la langue localisés. Par exemple, au lieu de « 1 janvier 2024 », un utilisateur français devrait entendre « 1 janvier 2024 ». Des bibliothèques comme « react-intl » ou JavaScript natif « Intl.DateTimeFormat » peuvent aider à formater dynamiquement ces étiquettes pour les lecteurs d'écran dans différents paramètres régionaux.

Enfin, vous pouvez améliorer encore l'accessibilité en indiquant visuellement l'objectif ou l'état actuel de la journée. Combiner la coutume Cours CSS avec des attributs ARIA comme `aria-current="date"` garantit une accessibilité à la fois visuelle et sémantique. Par exemple, vous pouvez mettre en évidence visuellement la date du jour tout en fournissant un contexte aux lecteurs d’écran. Ce niveau de finition garantit que votre DayPicker non seulement fonctionne, mais excelle en étant inclusif pour tous les utilisateurs. 🎯