डेपिकरमध्ये प्रवेशयोग्य ARIA लेबले सहज जोडण्यासाठी प्रतिक्रिया कशी वापरायची

ARIA लेबल्ससह तुमचा प्रतिक्रिया कॅलेंडर घटक प्रवेशयोग्य बनवणे

ऍक्सेसिबिलिटी ही आधुनिक वेब डेव्हलपमेंटची एक महत्त्वाची बाब आहे, हे सुनिश्चित करते की सर्व वापरकर्त्यांसाठी ऍप्लिकेशन्स सर्वसमावेशक आहेत. प्रतिक्रिया प्रकल्पांमध्ये, सारखे घटक वापरून डे पिकर कॅलेंडर UI प्रदर्शित करण्यासाठी ते स्क्रीन रीडरसाठी प्रवेशयोग्य बनवण्याचा प्रयत्न करताना अनन्य आव्हाने सादर करू शकतात.

अलीकडे, मी एका प्रकल्पावर काम केले जेथे मला गतिशीलपणे जोडणे आवश्यक होते ARIA लेबल a मधील वैयक्तिक दिवस घटकांना डे पिकर घटक प्रत्येक दिवसाच्या स्थितीवर आधारित "निवडलेली तारीख: जानेवारी 1, 2024" किंवा "अनुपलब्ध तारीख: 2 जानेवारी 2024" यासारखी अर्थपूर्ण माहिती वापरकर्त्यांना प्रदान करणे हे ध्येय होते.

प्रथम, मी मानक उपाय जसे की प्रयत्न केला ariaLabelFormatter किंवा प्रस्तुत दिवस, पण पटकन लक्षात आले की प्रतिक्रिया-दिवस-पिकर अशा प्रॉप्ससाठी लायब्ररीमध्ये अंगभूत समर्थनाची कमतरता होती. माझी पुढील प्रवृत्ती DOM पोस्ट-रेंडर वापरून हाताळणे होती रेफ वापरा आणि प्रभाव वापरा. कार्यशील असताना, हा दृष्टिकोन नाजूक वाटला आणि वर्गाच्या नावांवर खूप अवलंबून होता. 😕

हा लेख तुम्हाला तुमच्यामध्ये ARIA लेबले डायनॅमिकपणे जोडण्यासाठी अधिक मजबूत उपाय शोधून काढेल डे पिकर दिवस तुम्ही निवडलेल्या, अक्षम केलेल्या किंवा अनुपलब्ध स्थितींशी व्यवहार करत असलात तरीही, आम्ही तुमचे कॅलेंडर प्रवेशयोग्य आणि स्क्रीन-रीडर-फ्रेंडली राहील याची खात्री करू. चला आत जाऊया! 🚀

DayPicker साठी डायनॅमिक ARIA लेबल्स: एक सखोल मार्गदर्शक

बांधताना ए कॅलेंडर घटक DayPicker लायब्ररी वापरून प्रतिक्रिया मध्ये, स्क्रीन वाचकांसाठी प्रवेशयोग्यता सुनिश्चित करणे अवघड असू शकते. मुख्य आव्हान डायनॅमिकली जोडण्यामध्ये आहे ARIA लेबल दैनंदिन घटक, त्यामुळे ते "निवडलेले," "अक्षम" किंवा "अनुपलब्ध" सारख्या स्थितीशी संवाद साधतात. याचे निराकरण करण्यासाठी, आम्ही दोन पध्दती वापरल्या: पोस्ट-रेंडर DOM मॅनिपुलेशन आणि कस्टम रेंडरिंग फंक्शन. हे सोल्यूशन्स कसे कार्य करतात आणि प्रवेशयोग्यता प्राप्त करण्यासाठी वापरलेले प्रमुख घटक पाहू या. 🗓️

पहिला उपाय यावर अवलंबून असतो पोस्ट-रेंडर DOM हाताळणी प्रतिक्रिया वापरून रेफ वापरा आणि प्रभाव वापरा. `useRef` सह DayPicker घटकाचा संदर्भ तयार करून, आम्ही प्रस्तुत केलेल्या DOM नोड्समध्ये प्रवेश करू शकतो. `useEffect` हुकमध्ये, आम्ही `querySelectorAll` वापरून दिवसभराच्या घटकांची (`.rdp-day`) क्वेरी करतो. प्रत्येक दिवसासाठी, त्याची स्थिती निश्चित करण्यासाठी आम्ही त्याची वर्ग नावे तपासतो. एखाद्या दिवसात “rdp-day_selected” वर्ग असल्यास, आम्ही “निवडलेली तारीख: 1 जानेवारी 2024” सारखे ARIA लेबल जोडतो. ही पद्धत सुनिश्चित करते की जेव्हाही कॅलेंडर स्थिती बदलते तेव्हा ARIA लेबले डायनॅमिकरित्या अपडेट केली जातात.

दुसरा उपाय एक परिभाषित करून स्वच्छ, अधिक प्रतिक्रिया-अनुकूल दृष्टीकोन घेतो सानुकूल प्रस्तुत कार्य. DayPicker मध्ये, दिवसाच्या घटकांचे प्रस्तुतीकरण ओव्हरराइड करण्यासाठी आम्ही `घटक` प्रॉपद्वारे सानुकूल घटक वापरतो. कस्टम फंक्शनला प्रत्येक दिवस आणि त्याचे स्टेट मॉडिफायर्स पॅरामीटर्स म्हणून प्राप्त होतात. हेल्पर फंक्शन वापरून, आम्ही प्रत्येक दिवसाच्या स्थितीवर आधारित ARIA लेबल्स डायनॅमिकपणे व्युत्पन्न करतो (उदा. निवडलेले, अक्षम केलेले). उदाहरणार्थ, “अनुपलब्ध तारीख: 2 जानेवारी 2024” ही अक्षम म्हणून चिन्हांकित केलेल्या दिवसांसाठी नियुक्त केली आहे. हा दृष्टीकोन DOM हाताळणी टाळतो आणि समाधान अधिक देखरेख ठेवतो.

दोन्ही पद्धतींचे त्यांचे साधक आणि बाधक आहेत. पोस्ट-रेंडर DOM मॅनिप्युलेशनमुळे आम्हाला रेंडर केलेल्या आउटपुटवर नियंत्रण मिळते, ते वर्गाच्या नावांवर बरेच अवलंबून असते, जे लायब्ररी अपडेट्ससह बदलू शकते. दुसरीकडे, 'घटक' प्रॉप वापरणे प्रतिक्रियाच्या घोषणात्मक प्रतिमानाशी अधिक चांगले संरेखित करते, कोड क्लिनर आणि डीबग करणे सोपे करते. शेवटी, या पध्दतींमधील निवड तुमच्या प्रकल्पाच्या आवश्यकता आणि लायब्ररीच्या मर्यादांवर अवलंबून असते. कोणत्याही प्रकारे, अंतिम परिणाम हे सुनिश्चित करतो की स्क्रीन रीडरवर अवलंबून असलेल्या वापरकर्त्यांसाठी कॅलेंडर प्रवेशयोग्य आहे, सर्वांसाठी उपयोगिता सुधारते. 🌟

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

React DayPicker मध्ये स्क्रीन रीडरची सुलभता सुनिश्चित करणे

जोडत आहे ARIA लेबल प्रवेशयोग्यतेसाठी डायनॅमिकली महत्त्वपूर्ण आहे, परंतु React DayPicker मध्ये सर्वसमावेशक अनुभव तयार करण्यासाठी आणखी बरेच काही आहे. एक दुर्लक्षित पैलू सुनिश्चित करत आहे कीबोर्ड नेव्हिगेशन आणि फोकस व्यवस्थापन. स्क्रीन रीडर वापरकर्ते कॅलेंडर सारख्या परस्परसंवादी घटकांवर जाण्यासाठी कीबोर्ड इनपुटवर मोठ्या प्रमाणावर अवलंबून असतात. डे पिकर, बॉक्सच्या बाहेर, मूलभूत कीबोर्ड नेव्हिगेशनला समर्थन देते, परंतु ARIA लेबल्सच्या बाजूने सानुकूलित केल्याने ते अधिक अंतर्ज्ञानी बनू शकते.

एक्सप्लोर करण्यासाठी आणखी एक क्षेत्र म्हणजे आंतरराष्ट्रीयीकरण (i18n) समर्थन. तुमचा प्रकल्प विविध क्षेत्रांतील वापरकर्त्यांना लक्ष्य करत असल्यास, ARIA लेबलांनी स्थानिकीकृत तारीख स्वरूप आणि भाषा प्रतिबिंबित करणे आवश्यक आहे. उदाहरणार्थ, “1 जानेवारी 2024” ऐवजी, फ्रेंच वापरकर्त्याने “1 Janvier 2024” ऐकले पाहिजे. `react-intl` किंवा मूळ JavaScript `Intl.DateTimeFormat` सारख्या लायब्ररी वेगवेगळ्या लोकॅलमध्ये स्क्रीन रीडरसाठी ही लेबले डायनॅमिकपणे स्वरूपित करण्यात मदत करू शकतात.

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