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

Temp mail SuperHeros
Kaip naudoti „React“ ir lengvai pridėti prieinamas ARIA etiketes prie „DayPicker“.
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! 🚀

komandą Naudojimo pavyzdys
useRef const calendarRef = useRef(null); Sukuria kintamą nuorodos objektą, kad būtų galima tiesiogiai pasiekti ir valdyti DayPicker komponento DOM.
querySelectorAll calendarRef.current.querySelectorAll(.rdp-day"); Gauna visus elementus, atitinkančius rdp-diena klasę DayPicker komponente, kad galėtumėte toliau manipuliuoti.
setAttribute day.setAttribute("aria-label", ariaLabel); Dinamiškai prideda arba modifikuoja arija-etiketė atributas, suteikiantis prieigą prie ekrano skaitytuvų.
components komponentai={{ Diena: renderDay }} Įveda pasirinktinę funkciją, kuri pakeis numatytąjį kiekvienos dienos atvaizdavimą ir leidžia tinkinti ARIA etiketę.
modifiers modifikatoriai={{ ribotas: calendarDates.limited }} Apibrėžia konkrečias dienos būsenas (pvz., ribotas, nepasiekiamas) DayPicker, kad vizualiai ir funkciškai atskirtų dienas.
aria-label
Prie dienų pridedamas semantinis aprašymas, todėl jas galima suprasti ir naudoti pagalbinėms technologijoms, pvz., ekrano skaitytuvams.
getByLabelText screen.getByLabelText("Pasirinkta data: sausio 1 d."); Atliekant vienetų testus, elementų užklausa atliekama pagal jų arija-etiketė atributas, siekiant užtikrinti, kad pritaikymo neįgaliesiems etiketės būtų tinkamai pritaikytos.
useEffect useEffect(() => {...}, [calendarDates]); Vykdo logiką po „DayPicker“ pateikimo, užtikrinant, kad ARIA etiketės būtų dinamiškai pridedamos pasikeitus kalendoriaus būsenai.
modifiersStyles modifiersStyles={{ ribotas: limitedStyle }} Taiko pasirinktinį stilių konkretiems dienos modifikatoriams, todėl jų būsenos naudotojams vizualiai skiriasi.
generateAriaLabel generuotiAriaLabel(diena, modifikatoriai) Naudingumo funkcija, kuri dinamiškai generuoja kontekstui būdingas ARIA etiketes pagal dienos būseną.

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. 🌟

Kaip dinamiškai pridėti ARIA etiketes prie „React DayPicker“ komponento

Dinaminis ARIA etikečių valdymas naudojant „React“, „JavaScript“ ir optimizuotus metodus

// 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;

ARIA etikečių tinkinto įvyniotuvo diegimas programoje DayPicker

Reagavimu pagrįstas ARIA etikečių pritaikymas naudojant funkcinius komponentus

// 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;

ARIA etiketės priskyrimo vienetų testai

„Jest and React“ testavimo biblioteka, užtikrinanti ARIA etiketės vientisumą

// 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. 🎯

Dažnai užduodami klausimai apie ARIA etiketes programoje DayPicker

  1. Kokie yra ARIA labels naudojamas DayPicker?
  2. ARIA etiketėse pateikiami pasiekiami ekrano skaitytuvų aprašai, padedantys naudotojams suprasti dienos būsenas, pvz., „Pasirinkta“ arba „Išjungta“.
  3. Kaip dinamiškai pridėti ARIA attributes nenaudojant DOM manipuliavimo?
  4. DayPicker naudojimas components prop, galite tinkinti dienos atvaizdavimą ir tiesiogiai pridėti ARIA etikečių.
  5. Ar galiu lokalizuoti ARIA labels tarptautiniams vartotojams?
  6. Taip, galite formatuoti datas naudodami Intl.DateTimeFormat kad ARIA etiketės atspindėtų lokalizuotus datos formatus.
  7. Kaip man tobulėti keyboard navigation kartu su ARIA etiketėmis?
  8. „DayPicker“ palaiko klaviatūros naršymą vietoje, bet prideda tinkintą focus styles pagerina naudojimo patogumą ir prieinamumą.
  9. Ar pridedant dinamiškumo yra našumo išlaidų ARIA attributes?
  10. Tinkamai įdiegus ARIA atributus naudojant React būseną ir rekvizitus, užtikrinamos minimalios našumo išlaidos.

Prieinamumo tobulinimas naudojant dinamines ARIA etiketes

Pridedama ARIA etiketės „DayPicker“ pagerina pasiekiamumą, aprašydamas atskirų pagalbinių technologijų dienos elementų būseną. Tai sukuria sklandžią patirtį naudotojams, kurie pasitiki ekrano skaitytuvais, užtikrinant, kad pagrindinės būsenos, pvz., „pasirinkta“ arba „nepasiekiama“, būtų aiškios. ✅

Sujungę „React“ kabliukus ir pasirinktinius atvaizdavimo būdus, pasiekiame efektyvų ir prižiūrimą sprendimą. Nesvarbu, ar naudojant tiesioginį DOM manipuliavimą, ar deklaratyvius rekvizitus, pagrindinis dėmesys skiriamas visiems vartotojams prieinamos kalendoriaus sąsajos teikimui. 🌟

Prieinamų ARIA etikečių šaltiniai ir nuorodos programoje „React DayPicker“.
  1. Išsamiau apie oficialų Reagavimo dienos rinkiklis bibliotekos dokumentacija, skirta komponentų funkcijoms ir modifikatoriams ištirti. Daugiau rasite adresu „React-Day-Picker“ dokumentacija .
  2. Nurodo prieinamumo svarbą ir ARIA geriausią praktiką MDN žiniatinklio dokumentai. Išsamias ARIA atributų rekomendacijas rasite adresu MDN ARIA dokumentacija .
  3. Nagrinėja žiniatinklio pasiekiamumo ir ekrano skaitytuvo suderinamumo tobulinimo koncepcijas WebAIM, kurį galite rasti adresu WebAIM: žiniatinklio prieinamumas turimas omenyje .