Како користити Реацт за једноставно додавање доступних АРИА ознака у ДаиПицкер

Омогућавање приступа вашој компоненти Реацт календара помоћу АРИА ознака

Приступачност је критичан аспект модерног веб развоја, осигуравајући да апликације буду инклузивне за све кориснике. У Реацт пројектима, користећи компоненте попут ДаиПицкер за приказ корисничких интерфејса календара могу представљати јединствене изазове када покушавате да их учините доступним читачима екрана.

Недавно сам радио на пројекту где сам морао да динамички додам АРИА ознаке појединим елементима дана у а ДаиПицкер компонента. Циљ је био да се корисницима пруже значајне информације као што су „Изабрани датум: 1. јануар 2024.“ или „Недоступан датум: 2. јануар 2024.“ на основу стања сваког дана.

У почетку сам пробао стандардна решења као што су ариаЛабелФорматтер или рендерДаи, али брзо схватио да је бирач дана реакције библиотека није имала уграђену подршку за такве реквизите. Мој следећи инстинкт је био да манипулишем ДОМ пост-рендером користећи усеРеф и усеЕффецт. Иако је био функционалан, овај приступ се осећао крхким и у великој мери се ослања на имена класа. 😕

Овај чланак ће вас провести кроз робусније решење за динамичко додавање АРИА ознака на ваше ДаиПицкер дана. Без обзира да ли имате посла са изабраним, онемогућеним или недоступним стањима, постараћемо се да ваш календар остане приступачан и прилагођен за читање екрана. Хајде да заронимо! 🚀

Динамичке АРИА ознаке за ДаиПицкер: Детаљни водич

Приликом изградње а календарска компонента у Реацт-у помоћу библиотеке ДаиПицкер, обезбеђивање приступа читачима екрана може бити тешко. Главни изазов лежи у динамичком додавању АРИА ознаке до данашњих елемената, тако да они саопштавају стања попут „изабрано“, „онемогућено“ или „недоступно“. Да бисмо ово решили, користили смо два приступа: манипулацију ДОМ-ом после рендеровања и прилагођену функцију рендеровања. Хајде да анализирамо како ова решења функционишу и кључне компоненте које се користе за постизање приступачности. 🗓

Прво решење се ослања на манипулација ДОМ-ом после рендеровања користећи Реацт усеРеф и усеЕффецт. Креирањем референце на компоненту ДаиПицкер са `усеРеф`, можемо приступити приказаним ДОМ чворовима. У оквиру куке `усеЕффецт`, постављамо упите за целодневне елементе (`.рдп-даи`) користећи `куериСелецторАлл`. За сваки дан проверавамо имена његових класа да бисмо утврдили његово стање. Ако дан има класу „рдп-даи_селецтед“, додајемо АРИА ознаку попут „Изабрани датум: 1. јануар 2024.“. Овај метод обезбеђује да се АРИА ознаке динамички ажурирају кад год се промени стање календара.

Друго решење има чишћи приступ који више одговара Реацт-у тако што дефинише а прилагођена функција рендеровања. У ДаиПицкер-у користимо прилагођену компоненту преко проп-а `цомпонентс` да заменимо приказивање елемената дана. Прилагођена функција прима сваки дан и његове модификаторе стања као параметре. Користећи помоћну функцију, динамички генеришемо АРИА ознаке на основу стања сваког дана (нпр. изабрано, онемогућено). На пример, „Датум недоступан: 2. јануар 2024.“ је додељен данима означеним као онемогућени. Овај приступ избегава манипулацију ДОМ-ом и одржава решење лакше за одржавање.

Обе методе имају своје предности и мане. Док нам манипулација ДОМ-ом после рендеровања даје контролу над приказаним излазом, она у великој мери зависи од имена класа, која би се могла променити са ажурирањима библиотеке. С друге стране, коришћење `цомпонентс` пропа боље је усклађено са Реацт-овом декларативном парадигмом, чинећи код чистијим и лакшим за отклањање грешака. На крају крајева, избор између ових приступа зависи од захтева вашег пројекта и ограничења библиотеке. У сваком случају, крајњи резултат осигурава да је календар доступан корисницима који се ослањају на читаче екрана, побољшавајући употребљивост за све. 🌟

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

Обезбеђивање приступачности читача екрана у Реацт ДаиПицкер-у

Додавање АРИА ознаке динамички је критичан за приступачност, али постоји више од стварања инклузивног искуства у Реацт ДаиПицкер-у. Један занемарен аспект је осигурање навигација са тастатуре и управљање фокусом. Корисници читача екрана се у великој мери ослањају на уносе са тастатуре да би прелазили преко интерактивних компоненти као што су календари. ДаиПицкер, изван кутије, подржава основну навигацију тастатуром, али прилагођавање уз АРИА ознаке може је учинити интуитивнијом.

Још једна област коју треба истражити је подршка интернационализацији (и18н). Ако ваш пројекат циља кориснике из различитих региона, АРИА ознаке морају одражавати локализоване формате датума и језик. На пример, уместо „1. јануар 2024.“, француски корисник би требало да чује „1. јануар 2024.“. Библиотеке као што су `реацт-интл` или изворни ЈаваСцрипт `Интл.ДатеТимеФормат` могу помоћи у динамичком форматирању ових ознака за читаче екрана на различитим локацијама.

На крају, можете додатно побољшати приступачност визуелним указивањем на тренутни фокус или стање дана. Комбиновање обичаја ЦСС класе са АРИА атрибутима као што је `ариа-цуррент="дате"` обезбеђује и визуелну и семантичку доступност. На пример, можете визуелно да истакнете данашњи датум, а истовремено пружите контекст читачима екрана. Овај ниво углађености осигурава да ваш ДаиПицкер не само да ради, већ и да се истиче укључивањем за све кориснике. 🎯