Cara Menggunakan React untuk Menambahkan Label ARIA yang Dapat Diakses dengan Mudah ke DayPicker

Membuat Komponen Kalender React Anda Dapat Diakses dengan Label ARIA

Aksesibilitas adalah aspek penting dalam pengembangan web modern, yang memastikan bahwa aplikasi bersifat inklusif bagi semua pengguna. Dalam proyek React, menggunakan komponen seperti Pemilih Hari untuk menampilkan UI kalender dapat menghadirkan tantangan unik saat mencoba membuatnya dapat diakses oleh pembaca layar.

Baru-baru ini, saya mengerjakan sebuah proyek yang perlu saya tambahkan secara dinamis label ARIA ke elemen hari individu dalam a Pemilih Hari komponen. Tujuannya adalah untuk memberikan informasi bermakna kepada pengguna seperti "Tanggal yang dipilih: 1 Januari 2024" atau "Tanggal tidak tersedia: 2 Januari 2024" berdasarkan status setiap hari.

Pada awalnya, saya mencoba solusi standar seperti ariaLabelFormatter atau renderDay, tetapi segera menyadari bahwa pemilih hari reaksi perpustakaan tidak memiliki dukungan bawaan untuk alat peraga tersebut. Naluri saya selanjutnya adalah memanipulasi DOM pasca-render menggunakan gunakanRef Dan gunakanEffect. Meskipun fungsional, pendekatan ini terasa rapuh dan sangat bergantung pada nama kelas. 😕

Artikel ini akan memandu Anda melalui solusi yang lebih tangguh untuk menambahkan label ARIA secara dinamis ke file Anda Pemilih Hari hari. Baik Anda berurusan dengan negara bagian yang dipilih, dinonaktifkan, atau tidak tersedia, kami akan memastikan kalender Anda tetap dapat diakses dan ramah pembaca layar. Mari selami! 🚀

Label ARIA Dinamis untuk DayPicker: Panduan Mendalam

Saat membangun a komponen kalender di React menggunakan perpustakaan DayPicker, memastikan aksesibilitas bagi pembaca layar bisa jadi rumit. Tantangan utamanya terletak pada penjumlahan secara dinamis label ARIA elemen sehari-hari, sehingga mereka mengomunikasikan status seperti “dipilih”, “dinonaktifkan”, atau “tidak tersedia”. Untuk mengatasi hal ini, kami menggunakan dua pendekatan: manipulasi DOM pasca-render dan fungsi rendering khusus. Mari kita uraikan cara kerja solusi ini dan komponen utama yang digunakan untuk mencapai aksesibilitas. 🗓️

Solusi pertama bergantung pada manipulasi DOM pasca-render menggunakan React gunakanRef Dan gunakanEffect. Dengan membuat referensi ke komponen DayPicker dengan `useRef`, kita dapat mengakses node DOM yang dirender. Dalam hook `useEffect`, kami mengkueri elemen sepanjang hari (`.rdp-day`) menggunakan `querySelectorAll`. Untuk setiap hari, kami memeriksa nama kelasnya untuk menentukan statusnya. Jika suatu hari memiliki kelas “rdp-day_selected”, kami menambahkan label ARIA seperti “Tanggal yang dipilih: 1 Januari 2024.” Metode ini memastikan label ARIA diperbarui secara dinamis setiap kali status kalender berubah.

Solusi kedua menggunakan pendekatan yang lebih bersih dan ramah terhadap React dengan mendefinisikan a fungsi render khusus. Di DayPicker, kami menggunakan komponen khusus melalui prop `components` untuk mengganti rendering elemen hari. Fungsi kustom menerima setiap hari dan pengubah statusnya sebagai parameter. Dengan menggunakan fungsi pembantu, kami secara dinamis membuat label ARIA berdasarkan keadaan setiap hari (misalnya, dipilih, dinonaktifkan). Misalnya, “Tanggal tidak tersedia: 2 Januari 2024” ditetapkan ke hari yang ditandai sebagai dinonaktifkan. Pendekatan ini menghindari manipulasi DOM dan menjaga solusi lebih mudah dipertahankan.

Kedua metode tersebut memiliki kelebihan dan kekurangannya masing-masing. Meskipun manipulasi DOM pasca-render memberi kita kendali atas keluaran yang dirender, hal ini sangat bergantung pada nama kelas, yang dapat berubah seiring dengan pembaruan perpustakaan. Di sisi lain, penggunaan prop `components` lebih selaras dengan paradigma deklaratif React, membuat kode lebih bersih dan lebih mudah untuk di-debug. Pada akhirnya, pilihan antara pendekatan ini bergantung pada kebutuhan proyek Anda dan batasan perpustakaan. Apa pun pilihannya, hasil akhirnya memastikan bahwa kalender dapat diakses oleh pengguna yang mengandalkan pembaca layar, sehingga meningkatkan kegunaan bagi semua orang. 🌟

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

Memastikan Aksesibilitas Pembaca Layar di React DayPicker

Menambahkan label ARIA dinamis sangat penting untuk aksesibilitas, namun menciptakan pengalaman inklusif di React DayPicker memiliki lebih dari itu. Salah satu aspek yang diabaikan adalah memastikan navigasi papan ketik dan manajemen fokus. Pengguna pembaca layar sangat bergantung pada input keyboard untuk menelusuri komponen interaktif seperti kalender. DayPicker, secara langsung, mendukung navigasi keyboard dasar, namun menyesuaikannya bersama label ARIA dapat membuatnya lebih intuitif.

Bidang lain yang perlu dijajaki adalah dukungan internasionalisasi (i18n). Jika proyek Anda menargetkan pengguna dari berbagai wilayah, label ARIA harus mencerminkan format tanggal dan bahasa yang dilokalkan. Misalnya, alih-alih “1 Januari 2024”, pengguna Prancis seharusnya mendengar “1 Janvier 2024”. Library seperti `react-intl` atau JavaScript asli `Intl.DateTimeFormat` dapat membantu memformat label ini secara dinamis untuk pembaca layar di lokasi berbeda.

Terakhir, Anda dapat lebih meningkatkan aksesibilitas dengan menunjukkan secara visual fokus atau keadaan saat ini. Menggabungkan adat kelas CSS dengan atribut ARIA seperti `aria-current="date"` memastikan aksesibilitas visual dan semantik. Misalnya, Anda dapat menyorot tanggal hari ini secara visual sekaligus memberikan konteks kepada pembaca layar. Tingkat penyempurnaan ini memastikan bahwa DayPicker Anda tidak hanya berfungsi tetapi juga unggul dalam hal inklusif bagi semua pengguna. 🎯