Kuinka lisätä helposti saatavilla olevia ARIA-tarroja DayPickeriin Reactin avulla

Tee React-kalenterikomponentistasi käytettäväksi ARIA-tarrojen avulla

Esteettömyys on kriittinen osa nykyaikaista verkkokehitystä, mikä varmistaa, että sovellukset ovat kaikkien käyttäjien ulottuvilla. React-projekteissa käyttämällä komponentteja, kuten Päivänvalitsin kalenterin näyttämisen käyttöliittymät voivat aiheuttaa ainutlaatuisia haasteita, kun niitä yritetään tehdä näytönlukuohjelmien käytettäviksi.

Äskettäin työskentelin projektin parissa, johon minun piti lisätä dynaamisesti ARIA-tarrat yksittäisiin päivän elementteihin a Päivänvalitsin komponentti. Tavoitteena oli tarjota käyttäjille merkityksellisiä tietoja, kuten "Valittu päivämäärä: 1. tammikuuta 2024" tai "Päivämäärä ei saatavilla: 2. tammikuuta 2024" kunkin päivän tilan perusteella.

Aluksi kokeilin vakioratkaisuja, kuten ariaLabelFormatter tai renderDay, mutta huomasin nopeasti, että reagoi-päivän valitseja kirjastosta puuttui sisäänrakennettu tuki tällaisille rekvisiittalle. Seuraava vaistoni oli manipuloida DOM:n jälkirenderöintiä käyttämällä useRef ja useEffect. Vaikka tämä lähestymistapa oli toimiva, se tuntui hauraalta ja riippui voimakkaasti luokkanimistä. 😕

Tämä artikkeli opastaa sinut tehokkaamman ratkaisun läpi ARIA-tarrojen lisäämiseen dynaamisesti Päivänvalitsin päivää. Olipa kyseessä valittujen, käytöstä poistettujen tai ei-käytettävissä olevien tilojen tilanne, varmistamme, että kalenterisi pysyy käytettävissä ja näytönlukijaystävällisenä. Sukellaan sisään! 🚀

Dynaamiset ARIA-tarrat DayPickerille: perusteellinen opas

Kun rakennat a kalenterikomponentti Reactissa DayPicker-kirjaston avulla, joten näytönlukuohjelmien käytettävyyden varmistaminen voi olla hankalaa. Suurin haaste on dynaaminen lisääminen ARIA-tarrat päivittäisiin elementteihin, joten ne välittävät tiloja, kuten "valittu", "pois käytöstä" tai "ei käytettävissä". Tämän ratkaisemiseksi käytimme kahta lähestymistapaa: renderöinnin jälkeistä DOM-käsittelyä ja mukautettua renderöintitoimintoa. Selvitetään näiden ratkaisujen toiminta ja saavutettavuuden saavuttamiseen käytetyt keskeiset komponentit. 🗓️

Ensimmäinen ratkaisu perustuu renderöinnin jälkeinen DOM-manipulaatio Reactin avulla useRef ja useEffect. Luomalla viittauksen DayPicker-komponenttiin "useRef":llä, voimme käyttää hahmonnettuja DOM-solmuja. "useEffect"-koukussa teemme kyselyn koko päivän elementeistä (`.rdp-day') käyttämällä querySelectorAll-toimintoa. Jokaisen päivän osalta tarkistamme sen luokan nimet määrittääksemme sen tilan. Jos päivä sisältää luokan "rdp-day_selected", lisäämme ARIA-tunnisteen, kuten "Valittu päivämäärä: 1. tammikuuta 2024". Tämä menetelmä varmistaa, että ARIA-tunnisteet päivitetään dynaamisesti aina, kun kalenterin tila muuttuu.

Toinen ratkaisu on puhtaampi, React-ystävällisempi lähestymistapa määrittelemällä a mukautettu renderöintitoiminto. DayPickerissä käytämme mukautettua komponenttia "komponentit"-propanin kautta ohittamaan päiväelementtien renderöinnin. Mukautettu funktio vastaanottaa jokaisen päivän ja sen tilamuuttujat parametreina. Aputoiminnon avulla luomme dynaamisesti ARIA-tunnisteita kunkin päivän tilan perusteella (esim. valittu, poistettu käytöstä). Esimerkiksi "Päivämäärä ei saatavilla: 2. tammikuuta 2024" on määritetty päiville, jotka on merkitty pois käytöstä. Tämä lähestymistapa välttää DOM-manipuloinnin ja pitää ratkaisun ylläpidettävämpänä.

Molemmilla tavoilla on hyvät ja huonot puolensa. Vaikka renderöinnin jälkeinen DOM-manipulaatio antaa meille hallinnan renderöidyn tulosteen suhteen, se riippuu suuresti luokkanimistä, jotka voivat muuttua kirjastopäivitysten myötä. Toisaalta "komponenttien" käyttäminen sopii paremmin Reactin deklaratiiviseen paradigmaan, mikä tekee koodista puhtaamman ja helpommin virheenkorjauksen. Lopulta valinta näiden lähestymistapojen välillä riippuu projektisi vaatimuksista ja kirjaston rajoituksista. Joka tapauksessa lopputulos varmistaa, että kalenteri on näytönlukuohjelmiin luottavien käyttäjien saatavilla, mikä parantaa käytettävyyttä kaikille. 🌟

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

Näytönlukijan käytettävyyden varmistaminen React DayPickerissä

Lisätään ARIA-tarrat dynaamisesti on kriittistä saavutettavuuden kannalta, mutta kattavan kokemuksen luominen React DayPickerissä on muutakin. Yksi huomiotta jätetty näkökohta on varmistaminen näppäimistön navigointi ja keskittymisen hallinta. Näytönlukijan käyttäjät luottavat suuresti näppäimistösyötteisiin interaktiivisten komponenttien, kuten kalentereiden, läpi kulkemiseen. Valmis DayPicker tukee perusnäppäimistön navigointia, mutta sen mukauttaminen ARIA-tarrojen kanssa voi tehdä siitä intuitiivisemman.

Toinen tutkittava alue on kansainvälistymisen (i18n) tuki. Jos projektisi on kohdistettu käyttäjille eri alueilta, ARIA-tunnisteiden on heijastettava lokalisoituja päivämäärämuotoja ja kieltä. Esimerkiksi ranskalaisen käyttäjän pitäisi kuulla sanan "1. tammikuuta 2024" sijaan "1. tammikuuta 2024". Kirjastot, kuten "react-intl" tai natiivi JavaScript "Intl.DateTimeFormat", voivat auttaa muotoilemaan nämä tunnisteet dynaamisesti näytönlukuohjelmia varten eri kielialueilla.

Lopuksi voit parantaa käytettävyyttä entisestään osoittamalla visuaalisesti päivän nykyisen painopisteen tai tilan. Mukautettuja yhdistelmiä CSS-luokat ARIA-attribuutit, kuten `aria-current="date"`, takaavat sekä visuaalisen että semanttisen käytettävyyden. Voit esimerkiksi korostaa tämän päivän päivämäärää visuaalisesti ja tarjota samalla kontekstin näytönlukuohjelmille. Tällä kiillotusasteella varmistetaan, että DayPicker ei vain toimi, vaan on erinomaista kaikkien käyttäjien osallistamisessa. 🎯