Як використовувати React для легкого додавання доступних міток ARIA до DayPicker

Зробіть ваш компонент календаря React доступним за допомогою міток ARIA

Доступність є критично важливим аспектом сучасної веб-розробки, що гарантує доступність програм для всіх користувачів. У проектах React використання таких компонентів, як DayPicker для відображення інтерфейсів користувача календаря можуть виникати унікальні проблеми, коли намагаються зробити їх доступними для програм зчитування з екрана.

Нещодавно я працював над проектом, де мені потрібно було динамічно додавати Етикетки ARIA до окремих елементів дня в a DayPicker компонент. Мета полягала в тому, щоб надати користувачам значущу інформацію, таку як «Вибрана дата: 1 січня 2024 року» або «Недоступна дата: 2 січня 2024 року» на основі стану кожного дня.

Спочатку я спробував стандартні рішення, такі як ariaLabelFormatter або renderDay, але швидко зрозумів, що вибір дня реакції бібліотеці не вистачало вбудованої підтримки для таких реквізитів. Моїм наступним бажанням було маніпулювати пост-рендером DOM за допомогою useRef і useEffect. Незважаючи на функціональність, цей підхід здавався крихким і сильно залежав від імен класів. 😕

Ця стаття проведе вас через більш надійне рішення для динамічного додавання міток ARIA до вашого DayPicker днів. Незалежно від того, чи маєте ви справу з вибраним, вимкненим або недоступним станом, ми подбаємо про те, щоб ваш календар залишався доступним і зручним для зчитування з екрана. Давайте зануримося! 🚀

Динамічні мітки ARIA для DayPicker: поглиблений посібник

При будівництві а компонент календаря у React, використовуючи бібліотеку DayPicker, забезпечення доступності для програм зчитування з екрана може бути складним. Основна проблема полягає в динамічному додаванні Етикетки ARIA до денних елементів, тому вони передають такі стани, як «вибрано», «вимкнено» або «недоступно». Щоб вирішити цю проблему, ми застосували два підходи: маніпулювання DOM після візуалізації та спеціальну функцію рендерингу. Давайте розберемо принципи роботи цих рішень і ключові компоненти, які використовуються для досягнення доступності. 🗓️

Перше рішення спирається на маніпуляції DOM після візуалізації за допомогою React useRef і useEffect. Створивши посилання на компонент DayPicker за допомогою `useRef`, ми можемо отримати доступ до візуалізованих вузлів DOM. У хуку `useEffect` ми запитуємо всі елементи дня (`.rdp-day`) за допомогою `querySelectorAll`. Для кожного дня ми перевіряємо імена класів, щоб визначити їх стан. Якщо день має клас «rdp-day_selected», ми додаємо мітку ARIA, наприклад «Вибрана дата: 1 січня 2024 року». Цей метод забезпечує динамічне оновлення міток ARIA щоразу, коли змінюється стан календаря.

Друге рішення використовує чистіший, більш дружній до React підхід, визначаючи a користувальницька функція візуалізації. У DayPicker ми використовуємо настроюваний компонент через властивість `components`, щоб замінити рендеринг елементів дня. Настроювана функція отримує кожен день і його модифікатори стану як параметри. Використовуючи допоміжну функцію, ми динамічно генеруємо мітки ARIA на основі стану кожного дня (наприклад, вибрано, вимкнено). Наприклад, «Недоступна дата: 2 січня 2024» призначається дням, позначеним як вимкнені. Цей підхід дозволяє уникнути маніпуляцій з DOM і робить рішення більш придатним для обслуговування.

Обидва методи мають свої плюси і мінуси. Хоча маніпуляції DOM після рендерингу дають нам контроль над рендерингом, він сильно залежить від імен класів, які можуть змінюватися з оновленням бібліотеки. З іншого боку, використання властивості `components` краще узгоджується з декларативною парадигмою React, роблячи код чистішим і легшим для налагодження. Зрештою, вибір між цими підходами залежить від вимог вашого проекту та обмежень бібліотеки. У будь-якому випадку кінцевий результат гарантує, що календар доступний для користувачів, які покладаються на програми зчитування з екрана, покращуючи зручність використання для всіх. 🌟

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

Забезпечення доступності програми зчитування екрана в React DayPicker

Додавання Етикетки ARIA динамічно має вирішальне значення для доступності, але є ще щось для створення інклюзивного досвіду в React DayPicker. Один аспект, який не враховується, — забезпечення навігація з клавіатури і управління фокусом. Користувачі програм зчитування з екрана значною мірою покладаються на введення з клавіатури для перегляду інтерактивних компонентів, таких як календарі. DayPicker, готовий до роботи, підтримує основну навігацію з клавіатури, але налаштування його разом із мітками ARIA може зробити його більш інтуїтивно зрозумілим.

Інша сфера, яку варто дослідити, — підтримка інтернаціоналізації (i18n). Якщо ваш проект націлений на користувачів із різних регіонів, мітки ARIA мають відображати локалізовані формати дати та мову. Наприклад, замість «1 січня 2024» французький користувач повинен почути «1 січня 2024». Такі бібліотеки, як `react-intl` або рідний JavaScript `Intl.DateTimeFormat`, можуть допомогти динамічно форматувати ці мітки для програм зчитування з екрана в різних мовах.

Нарешті, ви можете покращити доступність, візуально вказавши поточний фокус або стан дня. Комбінування на замовлення Класи CSS з такими атрибутами ARIA, як `aria-current="date"`, забезпечує як візуальну, так і семантичну доступність. Наприклад, ви можете візуально виділити сьогоднішню дату, а також надати контекст програмам зчитування з екрана. Цей рівень досконалості гарантує, що ваш DayPicker не тільки працює, але й чудово підходить для всіх користувачів. 🎯