டேபிக்கரில் அணுகக்கூடிய ARIA லேபிள்களை எளிதாகச் சேர்க்க ரியாக்டை எவ்வாறு பயன்படுத்துவது

ARIA லேபிள்களுடன் உங்கள் ரியாக்ட் கேலெண்டர் கூறுகளை அணுகக்கூடியதாக மாற்றுதல்

அணுகல்தன்மை என்பது நவீன இணைய மேம்பாட்டின் முக்கியமான அம்சமாகும், பயன்பாடுகள் அனைத்து பயனர்களையும் உள்ளடக்கியதாக இருப்பதை உறுதி செய்கிறது. எதிர்வினை திட்டங்களில், போன்ற கூறுகளைப் பயன்படுத்துதல் டேபிக்கர் ஸ்கிரீன் ரீடர்களுக்கு அவற்றை அணுகக்கூடியதாக மாற்ற முயற்சிக்கும் போது, ​​காலண்டர் UIகள் தனித்துவமான சவால்களை முன்வைக்கலாம்.

சமீபத்தில், நான் மாறும் வகையில் சேர்க்க வேண்டிய ஒரு திட்டத்தில் பணிபுரிந்தேன் ARIA லேபிள்கள் a இல் உள்ள தனிப்பட்ட நாள் கூறுகளுக்கு டேபிக்கர் கூறு. ஒவ்வொரு நாளின் நிலையின் அடிப்படையில் "தேர்ந்தெடுக்கப்பட்ட தேதி: ஜனவரி 1, 2024" அல்லது "கிடைக்காத தேதி: ஜனவரி 2, 2024" போன்ற அர்த்தமுள்ள தகவலை பயனர்களுக்கு வழங்குவதே இலக்காக இருந்தது.

முதலில், நான் போன்ற நிலையான தீர்வுகளை முயற்சித்தேன் ariaLabelFormatter அல்லது ரெண்டர்டே, ஆனால் விரைவில் உணர்ந்தேன் எதிர்வினை-நாள்-தேர்தல் அத்தகைய முட்டுக்கட்டைகளுக்கு நூலகத்தில் உள்ளமைக்கப்பட்ட ஆதரவு இல்லை. எனது அடுத்த உள்ளுணர்வு DOM பிந்தைய ரெண்டரைப் பயன்படுத்தி கையாளுவதாகும் useRef மற்றும் பயன்பாட்டு விளைவு. செயல்படும் போது, ​​இந்த அணுகுமுறை உடையக்கூடியதாகவும், வர்க்கப் பெயர்களை பெரிதும் நம்பியதாகவும் உணர்ந்தது. 😕

உங்களின் ARIA லேபிள்களை மாறும் வகையில் சேர்க்க இந்த கட்டுரை மிகவும் வலுவான தீர்வு மூலம் உங்களை அழைத்துச் செல்லும் டேபிக்கர் நாட்கள். தேர்ந்தெடுக்கப்பட்ட, முடக்கப்பட்ட அல்லது கிடைக்காத நிலைகளை நீங்கள் கையாள்வது எதுவாக இருந்தாலும், உங்கள் காலெண்டரை அணுகக்கூடியதாகவும், திரை வாசிப்பவர்களுக்கு ஏற்றதாகவும் இருப்பதை உறுதி செய்வோம். உள்ளே நுழைவோம்! 🚀

DayPicker க்கான டைனமிக் ARIA லேபிள்கள்: ஒரு ஆழமான வழிகாட்டி

கட்டும் போது ஒரு காலண்டர் கூறு டேபிக்கர் லைப்ரரியைப் பயன்படுத்தி ரியாக்ட் செய்வதில், ஸ்கிரீன் ரீடர்களுக்கான அணுகலை உறுதி செய்வது தந்திரமானதாக இருக்கும். முக்கிய சவால் மாறும் வகையில் சேர்ப்பதில் உள்ளது ARIA லேபிள்கள் நாளுக்கு நாள் கூறுகள், எனவே அவை "தேர்ந்தெடுக்கப்பட்டவை", "முடக்கப்பட்டவை" அல்லது "கிடைக்கவில்லை" போன்ற நிலைகளைத் தொடர்பு கொள்கின்றன. இதைத் தீர்க்க, நாங்கள் இரண்டு அணுகுமுறைகளைப் பயன்படுத்தினோம்: பிந்தைய ரெண்டர் DOM கையாளுதல் மற்றும் தனிப்பயன் ரெண்டரிங் செயல்பாடு. இந்தத் தீர்வுகள் எவ்வாறு செயல்படுகின்றன மற்றும் அணுகல்தன்மையை அடையப் பயன்படுத்தப்படும் முக்கிய கூறுகளைப் பற்றிப் பார்ப்போம். 🗓️

முதல் தீர்வு சார்ந்துள்ளது பிந்தைய ரெண்டர் DOM கையாளுதல் எதிர்வினைகளைப் பயன்படுத்துதல் useRef மற்றும் பயன்பாட்டு விளைவு. `useRef` உடன் DayPicker கூறுக்கான குறிப்பை உருவாக்குவதன் மூலம், நாம் ரெண்டர் செய்யப்பட்ட DOM நோட்களை அணுகலாம். `useEffect` ஹூக்கிற்குள், `querySelectorAll` ஐப் பயன்படுத்தி அனைத்து நாள் உறுப்புகளையும் (`.rdp-day`) வினவுகிறோம். ஒவ்வொரு நாளும், அதன் நிலையைத் தீர்மானிக்க அதன் வகுப்புப் பெயர்களைச் சரிபார்க்கிறோம். ஒரு நாளில் “rdp-day_selected” வகுப்பு இருந்தால், “தேர்ந்தெடுத்த தேதி: ஜனவரி 1, 2024” போன்ற ARIA லேபிளைச் சேர்ப்போம். காலண்டர் நிலை மாறும்போதெல்லாம் ARIA லேபிள்கள் மாறும் வகையில் புதுப்பிக்கப்படுவதை இந்த முறை உறுதி செய்கிறது.

இரண்டாவது தீர்வு, a வரையறுப்பதன் மூலம் தூய்மையான, அதிக எதிர்வினைக்கு உகந்த அணுகுமுறையை எடுக்கிறது விருப்ப ரெண்டர் செயல்பாடு. 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 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 லேபிள்கள் அணுகல்தன்மைக்கு மாறும் வகையில் முக்கியமானது, ஆனால் ரியாக்ட் டேபிக்கரில் உள்ளடக்கிய அனுபவத்தை உருவாக்குவதற்கு இன்னும் நிறைய இருக்கிறது. கவனிக்கப்படாத ஒரு அம்சம் உறுதியானது விசைப்பலகை வழிசெலுத்தல் மற்றும் கவனம் மேலாண்மை. ஸ்கிரீன் ரீடர் பயனர்கள் காலெண்டர்கள் போன்ற ஊடாடும் கூறுகளைக் கடப்பதற்கு விசைப்பலகை உள்ளீடுகளை பெரிதும் நம்பியுள்ளனர். DayPicker, அடிப்படை விசைப்பலகை வழிசெலுத்தலை ஆதரிக்கிறது, ஆனால் ARIA லேபிள்களுடன் தனிப்பயனாக்குவது அதை மேலும் உள்ளுணர்வுடன் மாற்றும்.

ஆராய வேண்டிய மற்றொரு பகுதி சர்வதேசமயமாக்கல் (i18n) ஆதரவு. உங்கள் திட்டம் பல்வேறு பகுதிகளைச் சேர்ந்த பயனர்களைக் குறிவைத்தால், ARIA லேபிள்கள் உள்ளூர்மயமாக்கப்பட்ட தேதி வடிவங்களையும் மொழியையும் பிரதிபலிக்க வேண்டும். எடுத்துக்காட்டாக, “ஜனவரி 1, 2024” என்பதற்குப் பதிலாக, பிரெஞ்சுப் பயனர் “1 ஜான்வியர் 2024” என்று கேட்க வேண்டும். `react-intl` அல்லது நேட்டிவ் ஜாவாஸ்கிரிப்ட் `Intl.DateTimeFormat` போன்ற நூலகங்கள் இந்த லேபிள்களை வெவ்வேறு இடங்களில் உள்ள ஸ்கிரீன் ரீடர்களுக்காக மாறும் வகையில் வடிவமைக்க உதவும்.

கடைசியாக, ஒரு நாளின் தற்போதைய கவனம் அல்லது நிலையைக் காண்பிப்பதன் மூலம் அணுகலை மேலும் மேம்படுத்தலாம். வழக்கத்தை இணைத்தல் CSS வகுப்புகள் `aria-current="date"` போன்ற ARIA பண்புக்கூறுகளுடன் காட்சி மற்றும் சொற்பொருள் அணுகலை உறுதி செய்கிறது. உதாரணமாக, ஸ்க்ரீன் ரீடர்களுக்கு சூழலை வழங்கும் அதே வேளையில் இன்றைய தேதியை நீங்கள் காட்சிப்படுத்தலாம். இந்த அளவிலான மெருகூட்டல் உங்கள் DayPicker வேலை செய்வதோடு மட்டுமல்லாமல் அனைத்துப் பயனர்களையும் உள்ளடக்கியதாக சிறந்து விளங்குவதை உறுதி செய்கிறது. 🎯