Cách sử dụng React để dễ dàng thêm nhãn ARIA có thể truy cập vào DayPicker

Làm cho thành phần lịch phản ứng của bạn có thể truy cập được bằng nhãn ARIA

Khả năng truy cập là một khía cạnh quan trọng của quá trình phát triển web hiện đại, đảm bảo rằng các ứng dụng đều phù hợp với tất cả người dùng. Trong các dự án React, sử dụng các thành phần như ngày chọn để hiển thị giao diện người dùng lịch có thể đưa ra những thách thức đặc biệt khi cố gắng làm cho chúng có thể truy cập được đối với trình đọc màn hình.

Gần đây, tôi đã làm việc trong một dự án mà tôi cần thêm động Nhãn ARIA đến các yếu tố ngày riêng lẻ trong một DayPicker thành phần. Mục tiêu là cung cấp cho người dùng những thông tin có ý nghĩa như "Ngày đã chọn: ngày 1 tháng 1 năm 2024" hoặc "Ngày không có sẵn: ngày 2 tháng 1 năm 2024" dựa trên trạng thái của mỗi ngày.

Lúc đầu, tôi đã thử các giải pháp tiêu chuẩn như ariaLabelFormatter hoặc ngày kết xuất, nhưng nhanh chóng nhận ra rằng công cụ chọn ngày phản ứng thư viện thiếu sự hỗ trợ tích hợp cho các đạo cụ như vậy. Bản năng tiếp theo của tôi là thao tác kết xuất sau DOM bằng cách sử dụng sử dụngRef Và sử dụngHiệu ứng. Về mặt chức năng, cách tiếp cận này có vẻ mong manh và phụ thuộc nhiều vào tên lớp. 😕

Bài viết này sẽ hướng dẫn bạn một giải pháp mạnh mẽ hơn để tự động thêm nhãn ARIA vào ngày chọn ngày. Cho dù bạn đang xử lý các trạng thái đã chọn, bị vô hiệu hóa hay không khả dụng, chúng tôi sẽ đảm bảo lịch của bạn vẫn có thể truy cập được và thân thiện với trình đọc màn hình. Hãy đi sâu vào! 🚀

Nhãn ARIA động cho DayPicker: Hướng dẫn chuyên sâu

Khi xây dựng một thành phần lịch trong React bằng thư viện DayPicker, việc đảm bảo khả năng truy cập cho trình đọc màn hình có thể khó khăn. Thách thức chính nằm ở việc thêm động Nhãn ARIA với các phần tử hàng ngày, do đó chúng truyền đạt các trạng thái như “đã chọn”, “bị vô hiệu hóa” hoặc “không khả dụng”. Để giải quyết vấn đề này, chúng tôi đã sử dụng hai phương pháp: thao tác DOM sau kết xuất và chức năng hiển thị tùy chỉnh. Hãy chia nhỏ cách thức hoạt động của các giải pháp này và các thành phần chính được sử dụng để đạt được khả năng tiếp cận. 🗓️

Giải pháp đầu tiên dựa vào thao tác DOM sau kết xuất sử dụng React sử dụngRef Và sử dụngHiệu ứng. Bằng cách tạo tham chiếu đến thành phần DayPicker bằng `useRef`, chúng ta có thể truy cập vào các nút DOM được hiển thị. Trong hook `useEffect`, chúng tôi truy vấn các phần tử cả ngày (`.rdp-day`) bằng cách sử dụng `querySelectorAll`. Mỗi ngày, chúng tôi kiểm tra tên lớp của nó để xác định trạng thái của nó. Nếu một ngày có lớp “rdp-day_selected”, chúng tôi sẽ thêm nhãn ARIA như “Ngày đã chọn: ngày 1 tháng 1 năm 2024”. Phương pháp này đảm bảo nhãn ARIA được cập nhật động bất cứ khi nào trạng thái lịch thay đổi.

Giải pháp thứ hai có cách tiếp cận rõ ràng hơn, thân thiện với React hơn bằng cách xác định một chức năng kết xuất tùy chỉnh. Trong DayPicker, chúng tôi sử dụng thành phần tùy chỉnh thông qua prop `comments` để ghi đè hiển thị các phần tử ngày. Hàm tùy chỉnh nhận mỗi ngày và các công cụ sửa đổi trạng thái của nó dưới dạng tham số. Bằng cách sử dụng chức năng trợ giúp, chúng tôi tự động tạo nhãn ARIA dựa trên trạng thái của mỗi ngày (ví dụ: đã chọn, đã tắt). Ví dụ: “Ngày không khả dụng: ngày 2 tháng 1 năm 2024” được chỉ định cho những ngày được đánh dấu là bị vô hiệu hóa. Cách tiếp cận này tránh thao tác DOM và giữ cho giải pháp dễ bảo trì hơn.

Cả hai phương pháp đều có ưu và nhược điểm. Mặc dù thao tác DOM sau kết xuất cho phép chúng ta kiểm soát kết quả được kết xuất, nhưng nó phụ thuộc rất nhiều vào tên lớp, tên này có thể thay đổi khi cập nhật thư viện. Mặt khác, việc sử dụng prop `comComponents` sẽ phù hợp hơn với mô hình khai báo của React, giúp mã sạch hơn và dễ gỡ lỗi hơn. Cuối cùng, việc lựa chọn giữa các phương pháp này phụ thuộc vào yêu cầu dự án của bạn và các ràng buộc về thư viện. Dù bằng cách nào, kết quả cuối cùng đảm bảo rằng người dùng có thể truy cập lịch dựa vào trình đọc màn hình, cải thiện khả năng sử dụng cho tất cả mọi người. 🌟

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

Đảm bảo khả năng truy cập trình đọc màn hình trong React DayPicker

Thêm Nhãn ARIA tính linh hoạt rất quan trọng đối với khả năng truy cập, nhưng còn nhiều điều hơn thế nữa để tạo ra trải nghiệm toàn diện trong React DayPicker. Một khía cạnh bị bỏ qua là đảm bảo điều hướng bàn phím và quản lý tập trung. Người dùng trình đọc màn hình chủ yếu dựa vào đầu vào bàn phím để duyệt qua các thành phần tương tác như lịch. DayPicker, ngay lập tức, hỗ trợ điều hướng bàn phím cơ bản nhưng việc tùy chỉnh nó cùng với nhãn ARIA có thể làm cho nó trực quan hơn.

Một lĩnh vực khác cần khám phá là hỗ trợ quốc tế hóa (i18n). Nếu dự án của bạn nhắm mục tiêu người dùng từ các khu vực khác nhau thì nhãn ARIA phải phản ánh ngôn ngữ và định dạng ngày được bản địa hóa. Ví dụ: thay vì “ngày 1 tháng 1 năm 2024”, người dùng Pháp sẽ nghe thấy “1 Janvier 2024”. Các thư viện như `react-intl` hoặc JavaScript gốc `Intl.DateTimeFormat` có thể giúp định dạng động các nhãn này cho trình đọc màn hình ở các ngôn ngữ khác nhau.

Cuối cùng, bạn có thể cải thiện hơn nữa khả năng truy cập bằng cách chỉ ra trực quan trọng tâm hoặc trạng thái hiện tại của một ngày. Kết hợp tùy chỉnh Các lớp CSS với các thuộc tính ARIA như `aria-current="date"` đảm bảo khả năng truy cập cả về mặt hình ảnh và ngữ nghĩa. Ví dụ: bạn có thể đánh dấu ngày hôm nay một cách trực quan đồng thời cung cấp ngữ cảnh cho trình đọc màn hình. Mức độ hoàn thiện này đảm bảo rằng DayPicker của bạn không chỉ hoạt động mà còn vượt trội trong việc phù hợp với tất cả người dùng. 🎯