Kā izmantot React, lai DayPicker ērti pievienotu pieejamas ARIA etiķetes

Padariet savu React kalendāra komponentu pieejamu, izmantojot ARIA etiķetes

Pieejamība ir būtisks mūsdienu tīmekļa izstrādes aspekts, kas nodrošina, ka lietojumprogrammas ir iekļaujošas visiem lietotājiem. React projektos, izmantojot tādas sastāvdaļas kā Dienas atlasītājs kalendāra UI var radīt unikālas problēmas, mēģinot padarīt tās pieejamas ekrāna lasītājiem.

Nesen es strādāju pie projekta, kurā man vajadzēja dinamiski pievienot ARIA etiķetes uz atsevišķiem dienas elementiem a Dienas atlasītājs sastāvdaļa. Mērķis bija sniegt lietotājiem nozīmīgu informāciju, piemēram, “Atlasītais datums: 2024. gada 1. janvāris” vai “Nav pieejams datums: 2024. gada 2. janvāris”, pamatojoties uz katras dienas stāvokli.

Sākumā es mēģināju standarta risinājumus, piemēram ariaLabelFormatter vai RenderDay, bet ātri sapratu, ka reaģēt-dienu atlasītājs bibliotēkai trūka iebūvēta atbalsta šādiem rekvizītiem. Mans nākamais instinkts bija manipulēt ar DOM pēcrenderēšanu, izmantojot useRef un useEffect. Lai gan šī pieeja bija funkcionāla, tā šķita trausla un lielā mērā atkarīga no klašu nosaukumiem. 😕

Šajā rakstā tiks parādīts efektīvāks risinājums, lai dinamiski pievienotu ARIA etiķetes Dienas atlasītājs dienas. Neatkarīgi no tā, vai jūs saskaraties ar atlasītiem, atspējotiem vai nepieejamiem stāvokļiem, mēs nodrošināsim, ka jūsu kalendārs joprojām ir pieejams un ekrāna lasītājam draudzīgs. Iegremdējamies! 🚀

Dinamiskās ARIA etiķetes pakalpojumam DayPicker: padziļināts ceļvedis

Būvējot a kalendāra sastāvdaļa React, izmantojot DayPicker bibliotēku, ekrāna lasītāju pieejamības nodrošināšana var būt sarežģīta. Galvenais izaicinājums ir dinamiska pievienošana ARIA etiķetes līdz ikdienas elementiem, tāpēc tie paziņo tādus stāvokļus kā “atlasīts”, “invalīds” vai “nav pieejams”. Lai to atrisinātu, mēs izmantojām divas pieejas: pēcrenderēšanas DOM manipulācijas un pielāgotu renderēšanas funkciju. Apskatīsim, kā šie risinājumi darbojas, un galvenās sastāvdaļas, kas tiek izmantotas pieejamības nodrošināšanai. 🗓️

Pirmais risinājums balstās uz pēcrenderēšanas DOM manipulācijas izmantojot React useRef un useEffect. Izveidojot atsauci uz DayPicker komponentu ar "useRef", mēs varam piekļūt renderētajiem DOM mezgliem. Izmantojot 'useEffect' āķi, mēs vaicājam visas dienas elementus (.rdp-day), izmantojot 'querySelectorAll'. Katrai dienai mēs pārbaudām tās klases nosaukumus, lai noteiktu tās stāvokli. Ja dienai ir klase “rdp-day_selected”, mēs pievienojam ARIA iezīmi, piemēram, “Atlasītais datums: 2024. gada 1. janvāris”. Šī metode nodrošina, ka ARIA etiķetes tiek dinamiski atjauninātas ikreiz, kad mainās kalendāra stāvoklis.

Otrais risinājums izmanto tīrāku, reaģēšanai draudzīgāku pieeju, definējot a pielāgota renderēšanas funkcija. Programmā DayPicker mēs izmantojam pielāgotu komponentu, izmantojot komponentu rekvizītu, lai ignorētu dienas elementu renderēšanu. Pielāgotā funkcija kā parametrus saņem katru dienu un tās stāvokļa modifikatorus. Izmantojot palīgfunkciju, mēs dinamiski ģenerējam ARIA etiķetes, pamatojoties uz katras dienas stāvokli (piemēram, atlasīts, atspējots). Piemēram, “Nav pieejams datums: 2024. gada 2. janvāris” ir piešķirts dienām, kas atzīmētas kā atspējotas. Šī pieeja ļauj izvairīties no manipulācijām ar DOM un nodrošina risinājuma labāku apkopi.

Abām metodēm ir savi plusi un mīnusi. Lai gan pēcrenderēšanas DOM manipulācijas ļauj mums kontrolēt renderēto izvadi, tas lielā mērā ir atkarīgs no klašu nosaukumiem, kas var mainīties līdz ar bibliotēkas atjauninājumiem. No otras puses, komponentu izmantošana labāk atbilst React deklaratīvajai paradigmai, padarot kodu tīrāku un vieglāk atkļūdojamu. Galu galā izvēle starp šīm pieejām ir atkarīga no jūsu projekta prasībām un bibliotēkas ierobežojumiem. Jebkurā gadījumā gala rezultāts nodrošina, ka kalendārs ir pieejams lietotājiem, kuri paļaujas uz ekrāna lasītājiem, tādējādi uzlabojot lietojamību visiem. 🌟

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

Ekrāna lasītāja pieejamības nodrošināšana programmā React DayPicker

Pievienošana ARIA etiķetes dinamiski ir ļoti svarīgi pieejamībai, taču ir vēl vairāk, lai radītu iekļaujošu pieredzi programmā React DayPicker. Viens aizmirstais aspekts ir nodrošināšana tastatūras navigācija un fokusa vadība. Ekrāna lasītāju lietotāji ļoti paļaujas uz tastatūras ievadi, lai šķērsotu interaktīvos komponentus, piemēram, kalendārus. Ierīce DayPicker atbalsta pamata tastatūras navigāciju, taču tās pielāgošana kopā ar ARIA etiķetēm var padarīt to intuitīvāku.

Vēl viena joma, kas jāizpēta, ir internacionalizācijas (i18n) atbalsts. Ja jūsu projekta mērķauditorija ir lietotāji no dažādiem reģioniem, ARIA etiķetēm ir jāatspoguļo lokalizēti datuma formāti un valoda. Piemēram, vārda “2024. gada 1. janvāris” vietā franču lietotājam ir jādzird “2024. gada 1. janvāris”. Tādas bibliotēkas kā “react-intl” vai vietējais JavaScript “Intl.DateTimeFormat” var palīdzēt dinamiski formatēt šīs etiķetes ekrāna lasītājiem dažādās lokalizācijās.

Visbeidzot, varat vēl vairāk uzlabot pieejamību, vizuāli norādot pašreizējo fokusu vai dienas stāvokli. Apvienojot pasūtījumu CSS nodarbības ar ARIA atribūtiem, piemēram, `aria-current="date"` nodrošina gan vizuālo, gan semantisko pieejamību. Piemēram, varat vizuāli izcelt šodienas datumu, vienlaikus nodrošinot kontekstu ekrāna lasītājiem. Šis slīpēšanas līmenis nodrošina, ka jūsu DayPicker ne tikai darbojas, bet arī lieliski iekļaujas visiem lietotājiem. 🎯