DayPicker-ലേക്ക് ആക്‌സസ് ചെയ്യാവുന്ന ARIA ലേബലുകൾ എളുപ്പത്തിൽ ചേർക്കാൻ React എങ്ങനെ ഉപയോഗിക്കാം

ARIA ലേബലുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ റിയാക്റ്റ് കലണ്ടർ ഘടകം ആക്സസ് ചെയ്യാവുന്നതാക്കുന്നു

എല്ലാ ഉപയോക്താക്കൾക്കും ആപ്ലിക്കേഷനുകൾ ഉൾപ്പെടുന്നതാണെന്ന് ഉറപ്പാക്കുന്ന ആധുനിക വെബ് വികസനത്തിൻ്റെ ഒരു നിർണായക വശമാണ് പ്രവേശനക്ഷമത. റിയാക്റ്റ് പ്രോജക്റ്റുകളിൽ, പോലുള്ള ഘടകങ്ങൾ ഉപയോഗിക്കുന്നു ഡേപിക്കർ സ്‌ക്രീൻ റീഡറുകൾക്ക് ആക്‌സസ് ചെയ്യാൻ ശ്രമിക്കുമ്പോൾ കലണ്ടർ UI-കൾ പ്രദർശിപ്പിക്കുന്നതിന് സവിശേഷമായ വെല്ലുവിളികൾ അവതരിപ്പിക്കാനാകും.

അടുത്തിടെ, ചലനാത്മകമായി ചേർക്കേണ്ട ഒരു പ്രോജക്റ്റിൽ ഞാൻ പ്രവർത്തിച്ചു ARIA ലേബലുകൾ a ലെ വ്യക്തിഗത ദിന ഘടകങ്ങളിലേക്ക് ഡേപിക്കർ ഘടകം. ഓരോ ദിവസത്തെയും സംസ്ഥാനത്തെ അടിസ്ഥാനമാക്കി "തിരഞ്ഞെടുത്ത തീയതി: ജനുവരി 1, 2024" അല്ലെങ്കിൽ "ലഭ്യമല്ലാത്ത തീയതി: ജനുവരി 2, 2024" പോലുള്ള അർത്ഥവത്തായ വിവരങ്ങൾ ഉപയോക്താക്കൾക്ക് നൽകുകയായിരുന്നു ലക്ഷ്യം.

ആദ്യം, ഞാൻ പോലുള്ള സാധാരണ പരിഹാരങ്ങൾ പരീക്ഷിച്ചു ariaLabelFormatter അല്ലെങ്കിൽ റെൻഡർഡേ, എന്നാൽ പെട്ടെന്ന് മനസ്സിലായി പ്രതികരണ-ദിവസം-പിക്കർ ലൈബ്രറിയിൽ അത്തരം പ്രോപ്പുകൾക്ക് ബിൽറ്റ്-ഇൻ പിന്തുണ ഇല്ലായിരുന്നു. DOM പോസ്റ്റ്-റെൻഡർ ഉപയോഗിച്ച് കൈകാര്യം ചെയ്യുക എന്നതായിരുന്നു എൻ്റെ അടുത്ത പ്രേരണ useRef ഒപ്പം ഉപയോഗം പ്രഭാവം. പ്രവർത്തനക്ഷമമാണെങ്കിലും, ഈ സമീപനം ദുർബലവും ക്ലാസ് നാമങ്ങളെ വളരെയധികം ആശ്രയിക്കുന്നതുമായി തോന്നി. 😕

നിങ്ങളിലേക്ക് ARIA ലേബലുകൾ ചലനാത്മകമായി ചേർക്കുന്നതിനുള്ള കൂടുതൽ ശക്തമായ ഒരു പരിഹാരത്തിലൂടെ ഈ ലേഖനം നിങ്ങളെ നയിക്കും ഡേപിക്കർ ദിവസങ്ങൾ. തിരഞ്ഞെടുത്തതോ അപ്രാപ്തമാക്കിയതോ ലഭ്യമല്ലാത്തതോ ആയ സംസ്ഥാനങ്ങളുമായി നിങ്ങൾ ഇടപഴകുകയാണെങ്കിൽ, നിങ്ങളുടെ കലണ്ടർ ആക്‌സസ് ചെയ്യാവുന്നതും സ്‌ക്രീൻ റീഡർ-ഫ്രണ്ട്‌ലിയും ആണെന്ന് ഞങ്ങൾ ഉറപ്പാക്കും. നമുക്ക് മുങ്ങാം! 🚀

DayPicker-നുള്ള ഡൈനാമിക് ARIA ലേബലുകൾ: ഒരു ആഴത്തിലുള്ള ഗൈഡ്

പണിയുമ്പോൾ എ കലണ്ടർ ഘടകം DayPicker ലൈബ്രറി ഉപയോഗിച്ച് പ്രതികരിക്കുന്നതിൽ, സ്‌ക്രീൻ റീഡറുകൾക്കുള്ള പ്രവേശനക്ഷമത ഉറപ്പാക്കുന്നത് ബുദ്ധിമുട്ടുള്ള കാര്യമാണ്. ചലനാത്മകമായി കൂട്ടിച്ചേർക്കുന്നതിലാണ് പ്രധാന വെല്ലുവിളി ARIA ലേബലുകൾ ഇന്നത്തെ ഘടകങ്ങൾ, അതിനാൽ അവർ "തിരഞ്ഞെടുത്തത്", "അപ്രാപ്‌തമാക്കി" അല്ലെങ്കിൽ "ലഭ്യമല്ല" തുടങ്ങിയ അവസ്ഥകൾ ആശയവിനിമയം നടത്തുന്നു. ഇത് പരിഹരിക്കാൻ, ഞങ്ങൾ രണ്ട് സമീപനങ്ങൾ ഉപയോഗിച്ചു: പോസ്റ്റ്-റെൻഡർ DOM കൃത്രിമത്വവും ഒരു കസ്റ്റം റെൻഡറിംഗ് ഫംഗ്ഷനും. ഈ സൊല്യൂഷനുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്നും പ്രവേശനക്ഷമത കൈവരിക്കാൻ ഉപയോഗിക്കുന്ന പ്രധാന ഘടകങ്ങളെ കുറിച്ചും നോക്കാം. 🗓️

ആദ്യ പരിഹാരം ഇതിനെ ആശ്രയിച്ചിരിക്കുന്നു പോസ്റ്റ്-റെൻഡർ DOM കൃത്രിമത്വം പ്രതികരണങ്ങൾ ഉപയോഗിക്കുന്നു useRef ഒപ്പം ഉപയോഗം പ്രഭാവം. `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 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();
  });
});

React DayPicker-ൽ സ്‌ക്രീൻ റീഡർ പ്രവേശനക്ഷമത ഉറപ്പാക്കുന്നു

ചേർക്കുന്നു ARIA ലേബലുകൾ പ്രവേശനക്ഷമതയ്‌ക്ക് ചലനാത്മകമായി നിർണായകമാണ്, എന്നാൽ ഒരു റിയാക്റ്റ് ഡേപിക്കറിൽ ഉൾക്കൊള്ളുന്ന അനുഭവം സൃഷ്‌ടിക്കുന്നതിന് കൂടുതൽ കാര്യങ്ങളുണ്ട്. അവഗണിക്കപ്പെട്ട ഒരു വശം ഉറപ്പാക്കുന്നു കീബോർഡ് നാവിഗേഷൻ ഒപ്പം ഫോക്കസ് മാനേജ്മെൻ്റും. കലണ്ടറുകൾ പോലുള്ള സംവേദനാത്മക ഘടകങ്ങളിൽ സഞ്ചരിക്കുന്നതിന് സ്‌ക്രീൻ റീഡർ ഉപയോക്താക്കൾ കീബോർഡ് ഇൻപുട്ടുകളെ വളരെയധികം ആശ്രയിക്കുന്നു. DayPicker, അടിസ്ഥാന കീബോർഡ് നാവിഗേഷനെ പിന്തുണയ്ക്കുന്നു, എന്നാൽ ARIA ലേബലുകൾക്കൊപ്പം ഇത് ഇഷ്‌ടാനുസൃതമാക്കുന്നത് അതിനെ കൂടുതൽ അവബോധജന്യമാക്കും.

പര്യവേക്ഷണം ചെയ്യേണ്ട മറ്റൊരു മേഖല അന്താരാഷ്ട്രവൽക്കരണ (i18n) പിന്തുണയാണ്. വ്യത്യസ്ത പ്രദേശങ്ങളിൽ നിന്നുള്ള ഉപയോക്താക്കളെയാണ് നിങ്ങളുടെ പ്രോജക്റ്റ് ലക്ഷ്യമിടുന്നതെങ്കിൽ, പ്രാദേശികവൽക്കരിച്ച തീയതി ഫോർമാറ്റുകളും ഭാഷയും ARIA ലേബലുകൾ പ്രതിഫലിപ്പിക്കണം. ഉദാഹരണത്തിന്, "ജനുവരി 1, 2024" എന്നതിനുപകരം, ഒരു ഫ്രഞ്ച് ഉപയോക്താവ് "1 ജാൻവിയർ 2024" എന്ന് കേൾക്കണം. `react-intl` അല്ലെങ്കിൽ നേറ്റീവ് JavaScript `Intl.DateTimeFormat` പോലുള്ള ലൈബ്രറികൾക്ക് വ്യത്യസ്ത ലൊക്കേലുകളിലെ സ്‌ക്രീൻ റീഡറുകൾക്കായി ഈ ലേബലുകൾ ഡൈനാമിക്കായി ഫോർമാറ്റ് ചെയ്യാൻ സഹായിക്കും.

അവസാനമായി, ഒരു ദിവസത്തെ നിലവിലെ ഫോക്കസ് അല്ലെങ്കിൽ അവസ്ഥ ദൃശ്യപരമായി സൂചിപ്പിച്ചുകൊണ്ട് നിങ്ങൾക്ക് പ്രവേശനക്ഷമത കൂടുതൽ മെച്ചപ്പെടുത്താനാകും. ആചാരം സംയോജിപ്പിക്കുന്നു CSS ക്ലാസുകൾ `aria-current="date"` പോലുള്ള ARIA ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് ദൃശ്യപരവും അർത്ഥപരവുമായ പ്രവേശനക്ഷമത ഉറപ്പാക്കുന്നു. ഉദാഹരണത്തിന്, സ്‌ക്രീൻ റീഡറുകൾക്ക് സന്ദർഭം നൽകിക്കൊണ്ട് നിങ്ങൾക്ക് ഇന്നത്തെ തീയതി ദൃശ്യപരമായി ഹൈലൈറ്റ് ചെയ്യാം. ഈ ലെവൽ പോളിഷ് നിങ്ങളുടെ DayPicker പ്രവർത്തിക്കുന്നുവെന്ന് മാത്രമല്ല, എല്ലാ ഉപയോക്താക്കളെയും ഉൾക്കൊള്ളുന്നതിൽ മികച്ചതാണെന്നും ഉറപ്പാക്കുന്നു. 🎯