Hur man använder React för att enkelt lägga till tillgängliga ARIA-etiketter till DayPicker

Gör din React-kalenderkomponent tillgänglig med ARIA-etiketter

Tillgänglighet är en kritisk aspekt av modern webbutveckling, vilket säkerställer att applikationer är inkluderande för alla användare. I React-projekt använder man komponenter som DayPicker att visa kalendergränssnitt kan innebära unika utmaningar när man försöker göra dem tillgängliga för skärmläsare.

Nyligen arbetade jag med ett projekt där jag behövde lägga till dynamiskt ARIA-etiketter till de enskilda dagmomenten i en DayPicker komponent. Målet var att ge användarna meningsfull information som "Valt datum: 1 januari 2024" eller "Ej tillgängligt datum: 2 januari 2024" baserat på varje dags tillstånd.

Först provade jag standardlösningar som ariaLabelFormatter eller renderDay, men insåg snabbt att reagera-dagsväljare biblioteket saknade inbyggt stöd för sådana rekvisita. Min nästa instinkt var att manipulera DOM efter rendering med hjälp av användRef och useEffect. Även om det var funktionellt kändes det här tillvägagångssättet bräckligt och var starkt beroende av klassnamn. 😕

Den här artikeln går igenom en mer robust lösning för att dynamiskt lägga till ARIA-etiketter till din DayPicker dagar. Oavsett om du har att göra med valda, inaktiverade eller otillgängliga tillstånd ser vi till att din kalender förblir tillgänglig och skärmläsarvänlig. Låt oss dyka in! 🚀

Dynamiska ARIA-etiketter för DayPicker: En djupgående guide

När man bygger en kalenderkomponent i React med hjälp av DayPicker-biblioteket kan det vara svårt att säkerställa tillgänglighet för skärmläsare. Den största utmaningen ligger i att dynamiskt lägga till ARIA-etiketter dagliga element, så de kommunicerar tillstånd som "vald", "inaktiverad" eller "inte tillgänglig". För att lösa detta använde vi två metoder: DOM-manipulation efter rendering och en anpassad renderingsfunktion. Låt oss bryta ner hur dessa lösningar fungerar och de nyckelkomponenter som används för att uppnå tillgänglighet. 🗓️

Den första lösningen förlitar sig på DOM-manipulation efter rendering med hjälp av React's användRef och useEffect. Genom att skapa en referens till DayPicker-komponenten med `useRef` kan vi komma åt de renderade DOM-noderna. Inom en `useEffect`-hook, frågar vi alla dagars element (`.rdp-day`) med `querySelectorAll`. För varje dag kontrollerar vi dess klassnamn för att fastställa dess tillstånd. Om en dag har klassen "rdp-day_selected" lägger vi till en ARIA-etikett som "Valt datum: 1 januari 2024." Den här metoden säkerställer att ARIA-etiketter uppdateras dynamiskt när kalendertillståndet ändras.

Den andra lösningen tar ett renare, mer React-vänligt tillvägagångssätt genom att definiera en anpassad renderingsfunktion. I DayPicker använder vi en anpassad komponent via propriet 'components' för att åsidosätta renderingen av dagelement. Den anpassade funktionen tar emot varje dag och dess tillståndsmodifierare som parametrar. Med hjälp av en hjälpfunktion genererar vi dynamiskt ARIA-etiketter baserat på tillståndet för varje dag (t.ex. valda, inaktiverade). Till exempel, "Ej tillgängligt datum: 2 januari 2024" tilldelas dagar markerade som inaktiverade. Detta tillvägagångssätt undviker DOM-manipulation och håller lösningen mer underhållbar.

Båda metoderna har sina för- och nackdelar. Medan DOM-manipulation efter rendering ger oss kontroll över den renderade utdata, beror det mycket på klassnamn, som kan ändras med biblioteksuppdateringar. Å andra sidan stämmer det bättre överens med Reacts deklarativa paradigm att använda "komponenter", vilket gör koden renare och lättare att felsöka. I slutändan beror valet mellan dessa metoder på dina projektkrav och biblioteksbegränsningar. Hur som helst, slutresultatet säkerställer att kalendern är tillgänglig för användare som förlitar sig på skärmläsare, vilket förbättrar användbarheten för alla. 🌟

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

Säkerställer tillgänglighet för skärmläsare i React DayPicker

Lägger till ARIA-etiketter dynamiskt är avgörande för tillgänglighet, men det finns mer att skapa en inkluderande upplevelse i en React DayPicker. En förbisedd aspekt är att säkerställa tangentbordsnavigering och fokushantering. Användare av skärmläsare förlitar sig starkt på tangentbordsingångar för att gå igenom interaktiva komponenter som kalendrar. DayPicker, ur lådan, stöder grundläggande tangentbordsnavigering, men att anpassa den tillsammans med ARIA-etiketter kan göra det mer intuitivt.

Ett annat område att utforska är stöd för internationalisering (i18n). Om ditt projekt riktar sig till användare från olika regioner måste ARIA-etiketterna återspegla lokaliserade datumformat och språk. Till exempel, istället för "1 januari 2024" ska en fransk användare höra "1 januari 2024." Bibliotek som `react-intl` eller inbyggt JavaScript `Intl.DateTimeFormat` kan hjälpa till att dynamiskt formatera dessa etiketter för skärmläsare på olika platser.

Slutligen kan du förbättra tillgängligheten ytterligare genom att visuellt indikera dagens fokus eller tillstånd för en dag. Kombinera anpassade CSS klasser med ARIA-attribut som `aria-current="date"` säkerställer både visuell och semantisk tillgänglighet. Du kan till exempel lyfta fram dagens datum visuellt samtidigt som du ger skärmläsare sammanhang. Denna nivå av polering säkerställer att din DayPicker inte bara fungerar utan utmärker sig genom att vara inkluderande för alla användare. 🎯