A React használatával könnyen hozzáadhat hozzáférhető ARIA-címkéket a DayPickerhez

Tegye elérhetővé React naptár-összetevőjét ARIA-címkékkel

A kisegítő lehetőségek a modern webfejlesztés kritikus aspektusa, amely biztosítja, hogy az alkalmazások minden felhasználó számára elérhetőek legyenek. A React projektekben olyan komponensek használatával, mint pl DayPicker A naptár megjelenítéséhez a felhasználói felületek egyedi kihívásokat jelenthetnek, amikor megpróbálják elérhetővé tenni őket a képernyőolvasók számára.

Nemrég dolgoztam egy projekten, ahol dinamikusan kellett hozzáadnom ARIA címkék az egyes napelemekhez a DayPicker összetevő. A cél az volt, hogy az egyes napok állapota alapján értelmes információkat nyújtsunk a felhasználóknak, például „Kiválasztott dátum: 2024. január 1.” vagy „Nem elérhető dátum: 2024. január 2.”.

Eleinte standard megoldásokkal próbálkoztam, mint pl ariaLabelFormatter vagy renderDay, de hamar rájött, hogy a reagál-napválasztó a könyvtárban hiányzott az ilyen kellékek beépített támogatása. A következő ösztönöm az volt, hogy manipuláljam a DOM utólagos megjelenítését useRef és useEffect. Bár funkcionális volt, ez a megközelítés törékenynek tűnt, és erősen függ az osztálynevektől. 😕

Ez a cikk végigvezeti Önt egy robusztusabb megoldáson, amellyel dinamikusan adhat hozzá ARIA-címkéket DayPicker napokon. Függetlenül attól, hogy kiválasztott, letiltott vagy nem elérhető állapotokról van szó, gondoskodunk arról, hogy naptárja továbbra is elérhető és képernyőolvasóbarát maradjon. Merüljünk el! 🚀

Dinamikus ARIA-címkék a DayPickerhez: Részletes útmutató

Építésekor a naptár összetevő a DayPicker-könyvtárat használó React alkalmazásban a képernyőolvasók hozzáférésének biztosítása bonyolult lehet. A fő kihívás a dinamikus hozzáadásban rejlik ARIA címkék napi elemekre, így olyan állapotokat közölnek, mint a „kiválasztva”, „letiltva” vagy „nem elérhető”. Ennek megoldására két megközelítést alkalmaztunk: a renderelés utáni DOM-manipulációt és az egyéni renderelő függvényt. Nézzük meg, hogyan működnek ezek a megoldások, és milyen kulcsfontosságú összetevőket használnak a hozzáférhetőség eléréséhez. 🗓️

Az első megoldás azon alapul megjelenítés utáni DOM-manipuláció a React segítségével useRef és useEffect. Ha hivatkozást hozunk létre a DayPicker komponensre a `useRef` segítségével, elérhetjük a renderelt DOM csomópontokat. A `useEffect` hook-on belül az egész napos elemeket (`.rdp-day`) lekérdezzük a `querySelectorAll` használatával. Minden napra ellenőrizzük az osztályneveket, hogy meghatározzuk az állapotát. Ha egy napon az „rdp-day_selected” osztály szerepel, akkor hozzáadunk egy ARIA-címkét, például „Kiválasztott dátum: 2024. január 1.”. Ez a módszer biztosítja, hogy az ARIA-címkék dinamikusan frissüljenek, amikor a naptár állapota megváltozik.

A második megoldás tisztább, React-barát megközelítést alkalmaz az a egyéni renderelési funkció. A DayPickerben egy egyéni komponenst használunk a "components" propon keresztül, hogy felülírjuk a napi elemek megjelenítését. Az egyéni függvény minden napot és annak állapotmódosítóit megkapja paraméterként. Segítő funkció segítségével dinamikusan generálunk ARIA címkéket az egyes napok állapota alapján (pl. kiválasztott, letiltott). Például a „Nem elérhető dátum: 2024. január 2.” a letiltottként megjelölt napokhoz van hozzárendelve. Ez a megközelítés elkerüli a DOM-manipulációt, és karbantarthatóbbá teszi a megoldást.

Mindkét módszernek megvannak a maga előnyei és hátrányai. Míg a renderelés utáni DOM-manipuláció lehetővé teszi számunkra a renderelt kimenet ellenőrzését, ez nagymértékben függ az osztálynevektől, amelyek a könyvtár frissítésével változhatnak. Másrészt, az "összetevők" prop használata jobban illeszkedik a React deklaratív paradigmájához, így a kód tisztább és könnyebben hibakereshető. Végső soron az ilyen megközelítések közötti választás a projekt követelményeitől és a könyvtári korlátoktól függ. Akárhogy is, a végeredmény biztosítja, hogy a naptár elérhető legyen a képernyőolvasókat használó felhasználók számára, így mindenki számára javul a használhatóság. 🌟

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

Képernyőolvasó hozzáférhetőségének biztosítása a React DayPickerben

Hozzáadás ARIA címkék A dinamikusan kulcsfontosságú a kisegítő lehetőségek szempontjából, de a React DayPickerben sokkal több a befogadó élmény megteremtése. Az egyik figyelmen kívül hagyott szempont a biztosítása billentyűzet navigáció és fókuszkezelés. A képernyőolvasó-felhasználók nagymértékben támaszkodnak a billentyűzet bemeneteire az interaktív összetevők, például a naptárak bejárásához. A kész DayPicker támogatja az alapvető billentyűzet-navigációt, de az ARIA címkék melletti testreszabása intuitívabbá teheti.

Egy másik felfedezésre váró terület a nemzetköziesítés (i18n) támogatása. Ha a projekt különböző régiókból származó felhasználókat céloz meg, az ARIA-címkéknek honosított dátumformátumokat és nyelvet kell tükrözniük. Például a „2024. január 1.” helyett egy francia felhasználónak a „2024. január 1.” szöveget kell hallania. Az olyan könyvtárak, mint a „react-intl” vagy a natív JavaScript „Intl.DateTimeFormat”, segíthetnek dinamikusan formázni ezeket a címkéket a képernyőolvasók számára a különböző területeken.

Végül tovább javíthatja a kisegítő lehetőségeket, ha vizuálisan jelzi a nap aktuális fókuszát vagy állapotát. Egyedi kombináció CSS osztályok az ARIA attribútumokkal, például az `aria-current="date"` vizuális és szemantikai hozzáférhetőséget is biztosít. Például vizuálisan kiemelheti a mai dátumot, miközben kontextust is biztosít a képernyőolvasók számára. Ez a csiszolási szint biztosítja, hogy a DayPicker ne csak működjön, hanem az összes felhasználó számára is kiváló legyen. 🎯