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

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

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

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

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

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

Цомманд	Пример употребе
useRef	цонст цалендарРеф = усеРеф(нулл); Креира променљиви референтни објекат за директан приступ и манипулисање ДОМ-ом компоненте ДаиПицкер.
querySelectorAll	цалендарРеф.цуррент.куериСелецторАлл(".рдп-даи"); Преузима све елементе који одговарају класе унутар компоненте ДаиПицкер за даљу манипулацију.
setAttribute	даи.сетАттрибуте("ариа-лабел", ариаЛабел); Динамички додаје или мења атрибут да би се омогућила приступачност за читаче екрана.
components	компоненте={{ Дан: рендерДаи }} Убацује прилагођену функцију која замењује подразумевано приказивање сваког дана, омогућавајући прилагођавање АРИА ознаке.
modifiers	модифиерс={{ лимитед: цалендарДатес.лимитед }} Дефинише одређена стања дана (нпр. ограничено, недоступно) унутар ДаиПицкер-а да би се дани визуелно и функционално разликовали.
aria-label	Додаје семантички опис данима, чинећи их разумљивим и навигацијским за помоћне технологије као што су читачи екрана.
getByLabelText	сцреен.гетБиЛабелТект("Изабрани датум: 1. јануар"); У јединичним тестовима, ово испитује елементе по њиховом атрибута како би се осигурало да су ознаке приступачности правилно примењене.
useEffect	усеЕффецт(() => {...}, [цалендарДатес]); Извршава логику након приказивања ДаиПицкер-а, осигуравајући да се АРИА ознаке динамички додају када се стање календара промени.
modifiersStyles	модифиерсСтилес={{ лимитед: лимитедСтиле }} Примењује прилагођени стил на одређене модификаторе дана, чинећи њихова стања визуелно различитим за кориснике.
generateAriaLabel	генератеАриаЛабел(дан, модификатори) Услужна функција која генерише АРИА ознаке специфичне за контекст динамички на основу стања у дану.

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

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

Прво решење се ослања на користећи Реацт и . Креирањем референце на компоненту ДаиПицкер са `усеРеф`, можемо приступити приказаним ДОМ чворовима. У оквиру куке `усеЕффецт`, постављамо упите за целодневне елементе (`.рдп-даи`) користећи `куериСелецторАлл`. За сваки дан проверавамо имена његових класа да бисмо утврдили његово стање. Ако дан има класу „рдп-даи_селецтед“, додајемо АРИА ознаку попут „Изабрани датум: 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.“. Библиотеке као што су `реацт-интл` или изворни ЈаваСцрипт `Интл.ДатеТимеФормат` могу помоћи у динамичком форматирању ових ознака за читаче екрана на различитим локацијама.

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

1. Шта су користи за у ДаиПицкер-у?
2. АРИА ознаке пружају приступачне описе за читаче екрана, помажући корисницима да разумеју стања дана као што су „Изабрано“ или „Онемогућено“.
3. Како да динамички додам без употребе ДОМ манипулације?
4. Коришћење ДаиПицкер-а проп, можете прилагодити дневно приказивање и директно додати АРИА ознаке.
5. Могу ли да локализујем за међународне кориснике?
6. Да, можете форматирати датуме користећи како би се осигурало да ознаке АРИА одражавају локализоване формате датума.
7. Како да се побољшам поред АРИА ознака?
8. ДаиПицкер изворно подржава навигацију тастатуром, али додаје прилагођено побољшава и употребљивост и приступачност.
9. Да ли постоји трошак перформанси при додавању динамичког ?
10. Правилна имплементација АРИА атрибута користећи Реацт-ово стање и пропс осигурава минималне трошкове перформанси.

Додавање у ДаиПицкер побољшава приступачност описујући стање појединачних дневних елемената за помоћне технологије. Он ствара беспрекорно искуство за кориснике који се ослањају на читаче екрана, осигуравајући да су кључна стања попут „изабрано“ или „недоступно“ јасна. ✅

Комбиновањем Реацт кукица и прилагођених приступа рендеровању, постижемо решење које је и ефикасно и за одржавање. Било путем директне ДОМ манипулације или декларативних реквизита, фокус остаје на пружању инклузивног календарског интерфејса доступног свим корисницима. 🌟