Kuidas kasutada Reacti, et DayPickerisse hõlpsasti juurdepääsetavaid ARIA-silte lisada

Oma Reacti kalendri komponendi juurdepääsetavaks muutmine ARIA siltidega

Juurdepääsetavus on kaasaegse veebiarenduse oluline aspekt, mis tagab, et rakendused on kaasavad kõigile kasutajatele. Reacti projektides kasutatakse selliseid komponente nagu Päevavalija kalendri kuvamise kasutajaliidesed võivad kujutada endast ainulaadseid väljakutseid, kui proovite muuta need ekraanilugejatele juurdepääsetavaks.

Hiljuti töötasin ühe projekti kallal, kus oli vaja dünaamiliselt lisada ARIA sildid üksikutele päevaelementidele a Päevavalija komponent. Eesmärk oli pakkuda kasutajatele iga päeva oleku põhjal sisukat teavet, näiteks „Valitud kuupäev: 1. jaanuar 2024” või „Kuupäev pole saadaval: 2. jaanuar 2024”.

Algul proovisin standardlahendusi nagu ariaLabelFormatter või renderdamise päev, kuid mõistsin kiiresti, et reageerida päevavalija raamatukogul puudus selliste rekvisiitide jaoks sisseehitatud tugi. Minu järgmine instinkt oli manipuleerida DOM-i järelrenderduse abil useRef ja useEffect. Kuigi see lähenemisviis oli funktsionaalne, tundus see habras ja sõltus suuresti klassinimedest. 😕

See artikkel tutvustab teile tõhusamat lahendust ARIA siltide dünaamiliseks lisamiseks Päevavalija päevadel. Olenemata sellest, kas tegemist on valitud, keelatud või kättesaamatud olekutega, tagame, et teie kalender jääb juurdepääsetavaks ja ekraanilugejasõbralikuks. Sukeldume sisse! 🚀

Dünaamilised ARIA-sildid DayPickerile: põhjalik juhend

Ehitades a kalendri komponent rakenduses React, kasutades DayPickeri teeki, võib ekraanilugejatele juurdepääsetavuse tagamine olla keeruline. Peamine väljakutse seisneb dünaamilises lisamises ARIA sildid igapäevastele elementidele, nii et nad edastavad olekuid, nagu „valitud”, „puuetega” või „pole saadaval”. Selle lahendamiseks kasutasime kahte lähenemisviisi: renderdamisjärgne DOM-i manipuleerimine ja kohandatud renderdusfunktsioon. Teeme lahti nende lahenduste toimimise ja juurdepääsetavuse saavutamiseks kasutatavad põhikomponendid. 🗓️

Esimene lahendus tugineb renderdamisjärgne DOM-i manipuleerimine kasutades Reacti useRef ja useEffect. Luues viite DayPickeri komponendile käsuga "useRef", pääseme juurde renderdatud DOM-i sõlmedele. Konksu "useEffect" raames esitame päringu kogu päeva elementidele (".rdp-day"), kasutades funktsiooni "querySelectorAll". Iga päeva kohta kontrollime selle klassi nimesid, et määrata selle olek. Kui päeval on klass „rdp-day_selected”, lisame ARIA sildi, näiteks „Valitud kuupäev: 1. jaanuar 2024”. See meetod tagab, et ARIA-silte värskendatakse dünaamiliselt, kui kalendri olek muutub.

Teine lahendus on puhtam ja reageerimissõbralikum, määratledes a kohandatud renderdusfunktsioon. DayPickeris kasutame kohandatud komponenti rekvisiidi „Components” kaudu, et alistada päevaelementide renderdamine. Kohandatud funktsioon võtab parameetritena vastu iga päeva ja selle olekumuutujad. Abifunktsiooni abil genereerime dünaamiliselt ARIA silte iga päeva oleku alusel (nt valitud, keelatud). Näiteks „Pole saadaval kuupäev: 2. jaanuar 2024” on määratud päevadele, mis on märgitud keelatuks. See lähenemine väldib DOM-i manipuleerimist ja hoiab lahenduse paremini hooldatavana.

Mõlemal meetodil on oma plussid ja miinused. Kuigi renderdamisjärgne DOM-i manipuleerimine annab meile renderdatud väljundi üle kontrolli, sõltub see suuresti klasside nimedest, mis võivad muutuda koos teegi värskendustega. Teisest küljest sobib komponentide kasutamine paremini Reacti deklaratiivse paradigmaga, muutes koodi puhtamaks ja hõlpsamini silutavaks. Lõppkokkuvõttes sõltub nende lähenemisviiside valik teie projekti nõuetest ja raamatukogu piirangutest. Mõlemal juhul tagab lõpptulemus, et kalender on juurdepääsetav kasutajatele, kes tuginevad ekraanilugejatele, parandades kasutatavust kõigi jaoks. 🌟

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

Ekraanilugeri juurdepääsetavuse tagamine rakenduses React DayPicker

Lisamine ARIA sildid dünaamiline on juurdepääsetavuse jaoks ülioluline, kuid React DayPickeris on kõikehõlmava kogemuse loomine palju enamat. Üks tähelepanuta jäetud aspekt on tagamine klaviatuuriga navigeerimine ja fookuse juhtimine. Ekraanilugeja kasutajad sõltuvad interaktiivsete komponentide, näiteks kalendrite, läbimiseks suuresti klaviatuuri sisenditest. DayPicker, mis on kasutusel, toetab põhilist klaviatuuriga navigeerimist, kuid selle kohandamine koos ARIA siltidega võib muuta selle intuitiivsemaks.

Teine valdkond, mida uurida, on rahvusvahelistumise (i18n) tugi. Kui teie projekt sihib kasutajaid erinevatest piirkondadest, peavad ARIA sildid kajastama lokaliseeritud kuupäevavorminguid ja keelt. Näiteks peaks prantsuse kasutaja kuulma sõna „1. jaanuar 2024” asemel sõna „1. jaanuar 2024”. Teegid, nagu „react-intl” või natiivne JavaScript „Intl.DateTimeFormat”, võivad aidata neid silte dünaamiliselt vormindada ekraanilugejate jaoks erinevates lokaatides.

Lõpuks saate juurdepääsetavust veelgi parandada, näidates visuaalselt päeva praegust fookust või olekut. Kombineerides CSS-i klassid ARIA atribuutidega nagu `aria-current="date"` tagab nii visuaalse kui semantilise ligipääsetavuse. Näiteks võite tänase kuupäeva visuaalselt esile tõsta, pakkudes samal ajal ekraanilugejatele konteksti. See lihvimise tase tagab, et teie DayPicker mitte ainult ei tööta, vaid on suurepärane ka kõigi kasutajate jaoks. 🎯