डेपिकर में आसानी से सुलभ ARIA लेबल जोड़ने के लिए रिएक्ट का उपयोग कैसे करें

अपने रिएक्ट कैलेंडर घटक को ARIA लेबल के साथ सुलभ बनाना

पहुंच-योग्यता आधुनिक वेब विकास का एक महत्वपूर्ण पहलू है, जो यह सुनिश्चित करता है कि एप्लिकेशन सभी उपयोगकर्ताओं के लिए समावेशी हों। रिएक्ट परियोजनाओं में, जैसे घटकों का उपयोग करना डेपिकर कैलेंडर प्रदर्शित करने के लिए यूआई को स्क्रीन पाठकों के लिए सुलभ बनाने का प्रयास करते समय अद्वितीय चुनौतियाँ पेश की जा सकती हैं।

हाल ही में, मैंने एक प्रोजेक्ट पर काम किया जहां मुझे गतिशील रूप से जोड़ने की जरूरत थी ARIA लेबल ए में व्यक्तिगत दिन के तत्वों के लिए डेपिकर अवयव। लक्ष्य उपयोगकर्ताओं को प्रत्येक दिन की स्थिति के आधार पर "चयनित तिथि: 1 जनवरी, 2024" या "अनुपलब्ध तिथि: 2 जनवरी, 2024" जैसी सार्थक जानकारी प्रदान करना था।

सबसे पहले, मैंने जैसे मानक समाधान आज़माए ariaLabelFormatter या रेंडरडे, लेकिन जल्दी ही एहसास हुआ कि प्रतिक्रिया-दिन-पिकर लाइब्रेरी में ऐसे प्रॉप्स के लिए अंतर्निहित समर्थन का अभाव था। मेरी अगली प्रवृत्ति DOM पोस्ट-रेंडर का उपयोग करके हेरफेर करने की थी उपयोग रेफरी और उपयोगप्रभाव. कार्यात्मक होते हुए भी, यह दृष्टिकोण नाजुक और वर्ग नामों पर अत्यधिक निर्भर लगा। 😕

यह आलेख आपको ARIA लेबल को गतिशील रूप से जोड़ने के लिए एक अधिक मजबूत समाधान के बारे में बताएगा डेपिकर दिन. चाहे आप चयनित, अक्षम या अनुपलब्ध स्थितियों से निपट रहे हों, हम यह सुनिश्चित करेंगे कि आपका कैलेंडर सुलभ और स्क्रीन-रीडर-अनुकूल बना रहे। चलो अंदर गोता लगाएँ! 🚀

डेपिकर के लिए डायनामिक ARIA लेबल: एक गहन मार्गदर्शिका

निर्माण करते समय ए कैलेंडर घटक डेपिकर लाइब्रेरी का उपयोग करके रिएक्ट में, स्क्रीन रीडर्स के लिए पहुंच सुनिश्चित करना मुश्किल हो सकता है। मुख्य चुनौती गतिशील रूप से जोड़ने में है ARIA लेबल दिन के तत्वों के लिए, इसलिए वे "चयनित," "अक्षम," या "अनुपलब्ध" जैसी स्थितियों को संप्रेषित करते हैं। इसे हल करने के लिए, हमने दो दृष्टिकोण अपनाए: पोस्ट-रेंडर DOM हेरफेर और एक कस्टम रेंडरिंग फ़ंक्शन। आइए देखें कि ये समाधान कैसे काम करते हैं और पहुंच प्राप्त करने के लिए उपयोग किए जाने वाले प्रमुख घटक क्या हैं। 🗓️

पहला समाधान पर निर्भर करता है पोस्ट-रेंडर DOM हेरफेर रिएक्ट का उपयोग करना उपयोग रेफरी और उपयोगप्रभाव. `useRef` के साथ DayPicker घटक का संदर्भ बनाकर, हम प्रदान किए गए DOM नोड्स तक पहुंच सकते हैं। `useEffect` हुक के भीतर, हम `querySelectorAll` का उपयोग करके पूरे दिन के तत्वों (`.rdp-day`) को क्वेरी करते हैं। प्रत्येक दिन की स्थिति निर्धारित करने के लिए हम उसके वर्ग के नामों की जाँच करते हैं। यदि किसी दिन में "rdp-day_selected" वर्ग है, तो हम "चयनित तिथि: 1 जनवरी, 2024" जैसा ARIA लेबल जोड़ते हैं। यह विधि सुनिश्चित करती है कि जब भी कैलेंडर स्थिति बदलती है तो ARIA लेबल गतिशील रूप से अपडेट हो जाते हैं।

दूसरा समाधान परिभाषित करके एक स्वच्छ, अधिक प्रतिक्रिया-अनुकूल दृष्टिकोण अपनाता है कस्टम रेंडर फ़ंक्शन. डेपिकर में, हम दिन के तत्वों के प्रतिपादन को ओवरराइड करने के लिए `components` प्रोप के माध्यम से एक कस्टम घटक का उपयोग करते हैं। कस्टम फ़ंक्शन प्रत्येक दिन और उसके राज्य संशोधक को पैरामीटर के रूप में प्राप्त करता है। एक सहायक फ़ंक्शन का उपयोग करके, हम प्रत्येक दिन की स्थिति (जैसे, चयनित, अक्षम) के आधार पर गतिशील रूप से ARIA लेबल उत्पन्न करते हैं। उदाहरण के लिए, "अनुपलब्ध तिथि: 2 जनवरी, 2024" को अक्षम के रूप में चिह्नित दिनों को सौंपा गया है। यह दृष्टिकोण DOM हेरफेर से बचाता है और समाधान को अधिक रखरखाव योग्य रखता है।

दोनों तरीकों के अपने फायदे और नुकसान हैं। जबकि पोस्ट-रेंडर DOM हेरफेर हमें रेंडर किए गए आउटपुट पर नियंत्रण देता है, यह काफी हद तक क्लास नामों पर निर्भर करता है, जो लाइब्रेरी अपडेट के साथ बदल सकता है। दूसरी ओर, `components` प्रोप का उपयोग रिएक्ट के घोषणात्मक प्रतिमान के साथ बेहतर ढंग से संरेखित होता है, जिससे कोड साफ हो जाता है और डीबग करना आसान हो जाता है। अंततः, इन दृष्टिकोणों के बीच चुनाव आपकी परियोजना आवश्यकताओं और पुस्तकालय बाधाओं पर निर्भर करता है। किसी भी तरह से, अंतिम परिणाम यह सुनिश्चित करता है कि कैलेंडर स्क्रीन रीडर पर निर्भर उपयोगकर्ताओं के लिए पहुंच योग्य है, जिससे सभी के लिए प्रयोज्य में सुधार होता है। 🌟

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

रिएक्ट डेपिकर में स्क्रीन रीडर की पहुंच सुनिश्चित करना

जोड़ा जा रहा है ARIA लेबल पहुंच के लिए गतिशील रूप से महत्वपूर्ण है, लेकिन रिएक्ट डेपिकर में एक समावेशी अनुभव बनाने के लिए और भी बहुत कुछ है। एक अनदेखा पहलू सुनिश्चित करना है कीबोर्ड नेविगेशन और फोकस प्रबंधन। स्क्रीन रीडर उपयोगकर्ता कैलेंडर जैसे इंटरैक्टिव घटकों को पार करने के लिए कीबोर्ड इनपुट पर बहुत अधिक निर्भर करते हैं। डेपिकर, आउट ऑफ द बॉक्स, बुनियादी कीबोर्ड नेविगेशन का समर्थन करता है, लेकिन इसे ARIA लेबल के साथ अनुकूलित करने से यह अधिक सहज बन सकता है।

अन्वेषण हेतु एक अन्य क्षेत्र अंतर्राष्ट्रीयकरण (i18n) समर्थन है। यदि आपका प्रोजेक्ट विभिन्न क्षेत्रों के उपयोगकर्ताओं को लक्षित करता है, तो ARIA लेबल में स्थानीय दिनांक प्रारूप और भाषा प्रतिबिंबित होनी चाहिए। उदाहरण के लिए, एक फ्रांसीसी उपयोगकर्ता को "1 जनवरी 2024" के बजाय "1 जनवरी 2024" सुनना चाहिए। `react-intl` या देशी जावास्क्रिप्ट `Intl.DateTimeFormat` जैसी लाइब्रेरी विभिन्न स्थानों में स्क्रीन रीडर के लिए इन लेबलों को गतिशील रूप से प्रारूपित करने में मदद कर सकती हैं।

अंत में, आप किसी दिन के वर्तमान फोकस या स्थिति को दृश्य रूप से इंगित करके पहुंच में और सुधार कर सकते हैं। कस्टम का संयोजन सीएसएस कक्षाएं `aria-current='date'` जैसी ARIA विशेषताओं के साथ दृश्य और अर्थ संबंधी पहुंच दोनों सुनिश्चित होती है। उदाहरण के लिए, आप स्क्रीन पाठकों को संदर्भ प्रदान करते हुए आज की तारीख को दृश्य रूप से उजागर कर सकते हैं। पॉलिश का यह स्तर सुनिश्चित करता है कि आपका डेपिकर न केवल काम करता है बल्कि सभी उपयोगकर्ताओं के लिए समावेशी होने में उत्कृष्टता प्राप्त करता है। 🎯