Как использовать React для простого добавления доступных меток ARIA в DayPicker

Обеспечение доступности компонента календаря React с помощью меток ARIA

Доступность — важнейший аспект современной веб-разработки, обеспечивающий доступность приложений для всех пользователей. В проектах React использование таких компонентов, как DayPicker Отображение пользовательского интерфейса календаря может представлять собой уникальные проблемы при попытке сделать его доступным для программ чтения с экрана.

Недавно я работал над проектом, в котором мне нужно было динамически добавлять Этикетки АРИА к отдельным элементам дня в DayPicker компонент. Цель заключалась в том, чтобы предоставить пользователям содержательную информацию, такую ​​как «Выбранная дата: 1 января 2024 г.» или «Дата недоступна: 2 января 2024 г.», в зависимости от состояния каждого дня.

Сначала я пробовал стандартные решения типа ariaLabelFormatter или день рендеринга, но быстро понял, что выбор дня реакции в библиотеке отсутствовала встроенная поддержка таких реквизитов. Следующим моим побуждением было манипулировать пост-рендерингом DOM, используя использоватьRef и использованиеЭффект. Несмотря на свою функциональность, этот подход казался хрупким и сильно зависел от имен классов. 😕

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

Динамические метки ARIA для DayPicker: подробное руководство

При построении компонент календаря в React с использованием библиотеки DayPicker обеспечить доступность для программ чтения с экрана может быть непросто. Основная задача заключается в динамическом добавлении Этикетки АРИА к элементам дня, поэтому они сообщают о таких состояниях, как «выбрано», «отключено» или «недоступно». Чтобы решить эту проблему, мы использовали два подхода: манипулирование DOM после рендеринга и пользовательскую функцию рендеринга. Давайте разберем, как работают эти решения и ключевые компоненты, используемые для обеспечения доступности. 🗓️

Первое решение основано на манипулирование DOM после рендеринга используя React использоватьRef и использованиеЭффект. Создав ссылку на компонент DayPicker с помощью useRef, мы можем получить доступ к отображаемым узлам DOM. В хуке useEffect мы запрашиваем все элементы дня (.rdp-day), используя querySelectorAll. Каждый день мы проверяем имена его классов, чтобы определить его состояние. Если день имеет класс «rdp-day_selected», мы добавляем метку ARIA, например «Выбранная дата: 1 января 2024 г.». Этот метод обеспечивает динамическое обновление меток ARIA при каждом изменении состояния календаря.

Второе решение использует более чистый и более дружественный к React подход, определяя пользовательская функция рендеринга. В DayPicker мы используем специальный компонент через свойство «comComponents», чтобы переопределить рендеринг элементов дня. Пользовательская функция получает каждый день и его модификаторы состояния в качестве параметров. Используя вспомогательную функцию, мы динамически генерируем метки ARIA на основе состояния каждого дня (например, выбрано, отключено). Например, «Дата недоступности: 2 января 2024 г.» назначается дням, отмеченным как отключенные. Этот подход позволяет избежать манипуляций с DOM и делает решение более удобным в сопровождении.

Оба метода имеют свои плюсы и минусы. Хотя манипуляции с DOM после рендеринга дают нам контроль над отображаемым выводом, это сильно зависит от имен классов, которые могут меняться при обновлениях библиотеки. С другой стороны, использование реквизита «компоненты» лучше согласуется с декларативной парадигмой 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

Добавление Этикетки АРИА динамически имеет решающее значение для доступности, но создание инклюзивного опыта в React DayPicker — это нечто большее. Одним из упущенных из виду аспектов является обеспечение навигация с помощью клавиатуры и управление фокусом. Пользователи программ чтения с экрана в значительной степени полагаются на ввод с клавиатуры для перемещения по интерактивным компонентам, таким как календари. DayPicker изначально поддерживает базовую навигацию с помощью клавиатуры, но настройка его вместе с метками ARIA может сделать его более интуитивным.

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

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