Ako používať React na jednoduché pridávanie prístupných štítkov ARIA do DayPicker

Sprístupnenie komponentu kalendára React pomocou štítkov ARIA

Dostupnosť je kritickým aspektom moderného vývoja webu, ktorý zabezpečuje, že aplikácie sú inkluzívne pre všetkých používateľov. V projektoch React s použitím komponentov ako DayPicker Zobrazenie používateľských rozhraní kalendára môže predstavovať jedinečné problémy pri pokuse o ich sprístupnenie pre čítačky obrazovky.

Nedávno som pracoval na projekte, kde som potreboval dynamicky pridávať štítky ARIA k jednotlivým denným prvkom v a DayPicker komponent. Cieľom bolo poskytnúť používateľom zmysluplné informácie, ako napríklad „Vybraný dátum: 1. januára 2024“ alebo „Dátum nedostupnosti: 2. januára 2024“ na základe stavu každého dňa.

Najprv som skúšal štandardné riešenia ako napr ariaLabelFormatter alebo renderDay, ale rýchlo si uvedomil, že reakčný-denný výber knižnici chýbala vstavaná podpora pre takéto rekvizity. Mojím ďalším inštinktom bolo manipulovať pomocou post-renderu DOM useRef a useEffect. Aj keď bol tento prístup funkčný, zdal sa krehký a veľmi závislý od názvov tried. 😕

Tento článok vás prevedie robustnejším riešením na dynamické pridávanie štítkov ARIA do vášho DayPicker dní. Či už máte čo do činenia s vybranými, zakázanými alebo nedostupnými stavmi, zabezpečíme, aby váš kalendár zostal prístupný a vhodný pre čítanie obrazovky. Poďme sa ponoriť! 🚀

Dynamické štítky ARIA pre DayPicker: Podrobný sprievodca

Pri budovaní a kalendárny komponent v React pomocou knižnice DayPicker môže byť zabezpečenie dostupnosti pre čítačky obrazovky zložité. Hlavná výzva spočíva v dynamickom pridávaní štítky ARIA denné prvky, takže komunikujú stavy ako „vybrané“, „zakázané“ alebo „nedostupné“. Aby sme to vyriešili, použili sme dva prístupy: manipuláciu s DOM po vykreslení a vlastnú funkciu vykresľovania. Poďme si rozobrať, ako tieto riešenia fungujú a kľúčové komponenty používané na dosiahnutie dostupnosti. 🗓️

Prvé riešenie sa spolieha na post-renderová manipulácia DOM pomocou React's useRef a useEffect. Vytvorením odkazu na komponent DayPicker pomocou `useRef` môžeme získať prístup k vykresleným uzlom DOM. V rámci háku „useEffect“ dopytujeme všetky prvky dňa (`.rdp-day`) pomocou `querySelectorAll`. Pre každý deň kontrolujeme jeho názvy tried, aby sme určili jeho stav. Ak má deň triedu „rdp-day_selected“, pridáme štítok ARIA, napríklad „Vybratý dátum: 1. januára 2024“. Táto metóda zabezpečuje, že štítky ARIA sa aktualizujú dynamicky vždy, keď sa zmení stav kalendára.

Druhé riešenie má čistejší prístup, ktorý je priateľskejší k React, a to definovaním a funkcia vlastného vykresľovania. V programe DayPicker používame vlastný komponent prostredníctvom podpery „komponenty“, aby sme prepísali vykresľovanie prvkov dňa. Vlastná funkcia dostáva každý deň a jeho modifikátory stavu ako parametre. Pomocou pomocnej funkcie dynamicky generujeme štítky ARIA na základe stavu každého dňa (napr. vybraté, vypnuté). Napríklad „Dátum nedostupnosti: 2. januára 2024“ je priradený ku dňom označeným ako zakázané. Tento prístup zabraňuje manipulácii s DOM a udržuje riešenie lepšie udržiavateľné.

Oba spôsoby majú svoje pre a proti. Zatiaľ čo manipulácia DOM po vykreslení nám dáva kontrolu nad vykresleným výstupom, veľmi závisí od názvov tried, ktoré sa môžu zmeniť s aktualizáciami knižnice. Na druhej strane, použitie podpery „komponenty“ sa lepšie zhoduje s deklaratívnou paradigmou Reactu, vďaka čomu je kód čistejší a ľahšie sa ladí. V konečnom dôsledku výber medzi týmito prístupmi závisí od požiadaviek vášho projektu a obmedzení knižnice. V každom prípade konečný výsledok zaisťuje, že kalendár je prístupný používateľom, ktorí sa spoliehajú na čítačky obrazovky, čím sa zlepšuje použiteľnosť pre všetkých. 🌟

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

Zabezpečenie dostupnosti čítačky obrazovky v React DayPicker

Pridávanie štítky ARIA dynamicky je rozhodujúca pre dostupnosť, ale pri vytváraní inkluzívneho zážitku v React DayPicker je toho viac. Jeden prehliadaný aspekt je zabezpečenie navigácia pomocou klávesnice a riadenie zamerania. Používatelia čítačiek obrazovky sa pri prechode interaktívnymi komponentmi, ako sú kalendáre, vo veľkej miere spoliehajú na vstupy z klávesnice. DayPicker po vybalení podporuje základnú navigáciu pomocou klávesnice, ale prispôsobenie spolu s menovkami ARIA môže byť intuitívnejšie.

Ďalšou oblasťou, ktorú treba preskúmať, je podpora internacionalizácie (i18n). Ak sa váš projekt zameriava na používateľov z rôznych regiónov, štítky ARIA musia odrážať lokalizované formáty dátumu a jazyk. Napríklad namiesto „1. januára 2024“ by mal francúzsky používateľ počuť „1. január 2024“. Knižnice ako `react-intl` alebo natívny JavaScript `Intl.DateTimeFormat` môžu pomôcť dynamicky formátovať tieto označenia pre čítačky obrazovky v rôznych miestnych nastaveniach.

Nakoniec môžete ešte zlepšiť dostupnosť vizuálnym označením aktuálneho zamerania alebo stavu dňa. Kombinovanie zvyku CSS triedy s atribútmi ARIA ako `aria-current="date"` zaisťuje vizuálnu aj sémantickú dostupnosť. Môžete napríklad vizuálne zvýrazniť dnešný dátum a zároveň poskytnúť kontext čítačkám obrazovky. Táto úroveň lesku zaisťuje, že váš DayPicker nielen funguje, ale vyniká tým, že je inkluzívny pre všetkých používateľov. 🎯