Kaip naudoti „React“ ir lengvai pridėti prieinamas ARIA etiketes prie „DayPicker“.

Padarykite savo „React“ kalendoriaus komponentą prieinamą naudojant ARIA etiketes

Prieinamumas yra svarbus šiuolaikinio žiniatinklio kūrimo aspektas, užtikrinantis, kad programos būtų įtrauktos visiems vartotojams. React projektuose naudojant tokius komponentus kaip Dienos rinkiklis kalendoriaus vartotojo sąsajos gali sukelti unikalių iššūkių bandant padaryti jas pasiekiamas ekrano skaitytuvams.

Neseniai dirbau su projektu, kuriame man reikėjo dinamiškai pridėti ARIA etiketės į atskirus dienos elementus a Dienos rinkiklis komponentas. Tikslas buvo suteikti naudotojams prasmingos informacijos, pvz., „Pasirinkta data: 2024 m. sausio 1 d.“ arba „Nepasiekiama data: 2024 m. sausio 2 d.“, atsižvelgiant į kiekvienos dienos būseną.

Iš pradžių bandžiau standartinius sprendimus, pvz ariaLabelFormatter arba renderDay, bet greitai suprato, kad reaguoti-dienų rinkėjas bibliotekoje trūko įmontuoto tokio rekvizito palaikymo. Kitas mano instinktas buvo manipuliuoti DOM po atvaizdavimo naudojant useRef ir naudojimoEfektas. Nors šis metodas buvo funkcionalus, jis atrodė trapus ir labai priklausė nuo klasių pavadinimų. 😕

Šiame straipsnyje sužinosite apie patikimesnį sprendimą, kaip dinamiškai pridėti ARIA etiketes Dienos rinkiklis dienų. Nesvarbu, ar susiduriate su pasirinktomis, išjungtomis ar nepasiekiamomis būsenomis, užtikrinsime, kad jūsų kalendorius išliktų pasiekiamas ir pritaikytas ekrano skaitytuvui. Pasinerkime! 🚀

Dinaminės ARIA etiketės, skirtos DayPicker: išsamus vadovas

Statant a kalendoriaus komponentas React naudojant DayPicker biblioteką, užtikrinti ekrano skaitytuvų pasiekiamumą gali būti sudėtinga. Pagrindinis iššūkis yra dinamiškai pridėti ARIA etiketės į dienos elementus, todėl jie perduoda būsenas, pvz., „pasirinkta“, „išjungta“ arba „nepasiekiama“. Norėdami tai išspręsti, naudojome du būdus: manipuliavimą po pateikimo DOM ir pasirinktinę atvaizdavimo funkciją. Išsiaiškinkime, kaip šie sprendimai veikia, ir pagrindinius komponentus, naudojamus pasiekiamumui pasiekti. 🗓️

Pirmasis sprendimas priklauso nuo manipuliavimas po pateikimo DOM naudojant React useRef ir naudojimoEfektas. Sukūrę nuorodą į DayPicker komponentą su „useRef“, galime pasiekti pateiktus DOM mazgus. Naudojant „useEffect“ kabliuką, pateikiame užklausą visos dienos elementams („.rdp-day“), naudojant „querySelectorAll“. Kiekvieną dieną tikriname jos klasių pavadinimus, kad nustatytų jos būseną. Jei diena turi klasę „rdp-day_selected“, pridedame ARIA etiketę, pvz., „Pasirinkta data: 2024 m. sausio 1 d.“. Šis metodas užtikrina, kad ARIA etiketės būtų dinamiškai atnaujinamos, kai pasikeičia kalendoriaus būsena.

Antrasis sprendimas yra švaresnis ir palankesnis reaguoti, apibrėžiant a pasirinktinio atvaizdavimo funkcija. Programoje „DayPicker“ naudojame tinkintą komponentą per „komponentų“ rekvizitą, kad nepaisytume dienos elementų pateikimo. Pasirinktinė funkcija gauna kiekvieną dieną ir jos būsenos modifikatorius kaip parametrus. Naudodami pagalbinę funkciją, dinamiškai generuojame ARIA etiketes pagal kiekvienos dienos būseną (pvz., pasirinkta, išjungta). Pavyzdžiui, „Data nepasiekiama: 2024 m. sausio 2 d.“ priskiriama dienoms, pažymėtoms kaip išjungtos. Taikant šį metodą išvengiama manipuliavimo DOM, o sprendimas yra labiau prižiūrimas.

Abu metodai turi savo pliusų ir minusų. Nors manipuliavimas po pateikimo DOM suteikia mums galimybę valdyti pateiktą išvestį, tai labai priklauso nuo klasių pavadinimų, kurie gali keistis atnaujinus biblioteką. Kita vertus, „komponentų“ rekvizito naudojimas geriau suderinamas su „React“ deklaratyvia paradigma, todėl kodas tampa švaresnis ir lengviau derinamas. Galiausiai pasirinkimas tarp šių metodų priklauso nuo jūsų projekto reikalavimų ir bibliotekos apribojimų. Bet kuriuo atveju galutinis rezultatas užtikrina, kad kalendorius bus prieinamas vartotojams, kurie pasikliauja ekrano skaitytuvais, o tai pagerina naudojimą visiems. 🌟

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

Ekrano skaitytuvo pasiekiamumo užtikrinimas naudojant „React DayPicker“.

Pridedama ARIA etiketės dinamiškas yra labai svarbus prieinamumui, tačiau norint sukurti įtraukią „React DayPicker“ patirtį, reikia daugiau. Vienas nepastebėtas aspektas yra užtikrinimas klaviatūros navigacija ir dėmesio valdymas. Ekrano skaitytuvo naudotojai labai pasikliauja klaviatūros įvestimis, kad galėtų naršyti interaktyvius komponentus, pvz., kalendorius. „DayPicker“ palaiko pagrindinį klaviatūros naršymą, tačiau pritaikius jį kartu su ARIA etiketėmis, jis gali būti intuityvesnis.

Kita sritis, kurią reikia ištirti, yra internacionalizacijos (i18n) palaikymas. Jei jūsų projektas skirtas naudotojams iš įvairių regionų, ARIA etiketės turi atspindėti lokalizuotus datos formatus ir kalbą. Pavyzdžiui, vietoj „2024 m. sausio 1 d.“ prancūzų naudotojas turėtų išgirsti „2024 m. sausio 1 d.“. Bibliotekos, pvz., „react-intl“ arba vietinis „JavaScript“ „Intl.DateTimeFormat“, gali padėti dinamiškai formatuoti šias etiketes ekrano skaitytuvams skirtingose ​​​​vietose.

Galiausiai galite dar labiau pagerinti pasiekiamumą, vizualiai nurodydami dabartinį fokusą arba dienos būseną. Derinant papročius CSS klasės su ARIA atributais, tokiais kaip `aria-current="date"`, užtikrina vizualinį ir semantinį prieinamumą. Pavyzdžiui, galite vizualiai paryškinti šiandienos datą, taip pat suteikti konteksto ekrano skaitytuvams. Šio lygio nušlifavimas užtikrina, kad jūsų „DayPicker“ ne tik veiktų, bet ir puikiai tinka visiems vartotojams. 🎯