Como usar o React para adicionar facilmente rótulos ARIA acessíveis ao DayPicker

Tornando seu componente React Calendar acessível com rótulos ARIA

A acessibilidade é um aspecto crítico do desenvolvimento web moderno, garantindo que os aplicativos sejam inclusivos para todos os usuários. Em projetos React, usando componentes como Selecionador de dias exibir UIs de calendário pode apresentar desafios únicos ao tentar torná-las acessíveis para leitores de tela.

Recentemente, trabalhei em um projeto onde precisava adicionar dinamicamente Etiquetas ARIA aos elementos individuais do dia em um Selecionador de dias componente. O objetivo era fornecer aos usuários informações significativas, como “Data selecionada: 1º de janeiro de 2024” ou “Data indisponível: 2 de janeiro de 2024” com base no estado de cada dia.

No começo, tentei soluções padrão como ariaLabelFormatter ou renderDay, mas rapidamente percebeu que selecionador de dia de reação a biblioteca não tinha suporte integrado para tais adereços. Meu próximo instinto foi manipular a pós-renderização do DOM usando useRef e useEfeito. Embora funcional, essa abordagem parecia frágil e fortemente dependente de nomes de classes. 😕

Este artigo irá guiá-lo através de uma solução mais robusta para adicionar rótulos ARIA dinamicamente ao seu Selecionador de dias dias. Esteja você lidando com estados selecionados, desativados ou indisponíveis, garantiremos que sua agenda permaneça acessível e fácil de ler na tela. Vamos mergulhar! 🚀

Rótulos ARIA dinâmicos para DayPicker: um guia detalhado

Ao construir um componente de calendário no React usando a biblioteca DayPicker, garantir acessibilidade para leitores de tela pode ser complicado. O principal desafio reside em adicionar dinamicamente Etiquetas ARIA elementos do dia a dia, então eles comunicam estados como “selecionado”, “desativado” ou “indisponível”. Para resolver isso, empregamos duas abordagens: manipulação DOM pós-renderização e uma função de renderização personalizada. Vamos detalhar como essas soluções funcionam e os principais componentes usados ​​para alcançar acessibilidade. 🗓️

A primeira solução depende manipulação de DOM pós-renderização usando React's useRef e useEfeito. Ao criar uma referência ao componente DayPicker com `useRef`, podemos acessar os nós DOM renderizados. Dentro de um gancho `useEffect`, consultamos todos os elementos do dia (`.rdp-day`) usando `querySelectorAll`. Para cada dia, verificamos os nomes das classes para determinar seu estado. Se um dia tiver a classe “rdp-day_selected”, adicionamos um rótulo ARIA como “Data selecionada: 1º de janeiro de 2024”. Este método garante que os rótulos ARIA sejam atualizados dinamicamente sempre que o estado do calendário for alterado.

A segunda solução adota uma abordagem mais limpa e amigável ao React, definindo um função de renderização personalizada. No DayPicker, usamos um componente personalizado por meio da propriedade `components` para substituir a renderização dos elementos do dia. A função personalizada recebe cada dia e seus modificadores de estado como parâmetros. Usando uma função auxiliar, geramos rótulos ARIA dinamicamente com base no estado de cada dia (por exemplo, selecionado, desabilitado). Por exemplo, “Data indisponível: 2 de janeiro de 2024” é atribuído aos dias marcados como desativados. Essa abordagem evita a manipulação do DOM e mantém a solução mais sustentável.

Ambos os métodos têm seus prós e contras. Embora a manipulação do DOM pós-renderização nos dê controle sobre a saída renderizada, ela depende muito dos nomes das classes, que podem mudar com as atualizações da biblioteca. Por outro lado, usar a propriedade `components` se alinha melhor com o paradigma declarativo do React, tornando o código mais limpo e fácil de depurar. Em última análise, a escolha entre essas abordagens depende dos requisitos do seu projeto e das restrições da biblioteca. De qualquer forma, o resultado final garante que o calendário seja acessível aos usuários que contam com leitores de tela, melhorando a usabilidade para todos. 🌟

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

Garantindo a acessibilidade do leitor de tela no React DayPicker

Adicionando Etiquetas ARIA dinamicamente é fundamental para a acessibilidade, mas criar uma experiência inclusiva em um React DayPicker envolve muito mais. Um aspecto esquecido é garantir navegação pelo teclado e gerenciamento de foco. Os usuários de leitores de tela dependem muito das entradas do teclado para percorrer componentes interativos, como calendários. O DayPicker, pronto para uso, oferece suporte à navegação básica pelo teclado, mas personalizá-lo junto com os rótulos ARIA pode torná-lo mais intuitivo.

Outra área a explorar é o apoio à internacionalização (i18n). Se o seu projeto for direcionado a usuários de diversas regiões, os rótulos ARIA deverão refletir formatos de data e idioma localizados. Por exemplo, em vez de “1º de janeiro de 2024”, um usuário francês deverá ouvir “1º de janeiro de 2024”. Bibliotecas como `react-intl` ou JavaScript nativo `Intl.DateTimeFormat` podem ajudar a formatar dinamicamente esses rótulos para leitores de tela em diferentes localidades.

Por último, você pode melhorar ainda mais a acessibilidade indicando visualmente o foco ou estado atual de um dia. Combinando personalizado Classes CSS com atributos ARIA como `aria-current="date"` garante acessibilidade visual e semântica. Por exemplo, você pode destacar visualmente a data de hoje e, ao mesmo tempo, fornecer contexto aos leitores de tela. Esse nível de polimento garante que seu DayPicker não apenas funcione, mas também seja excelente por ser inclusivo para todos os usuários. 🎯