ਡੇਪਿਕਰ ਵਿੱਚ ਪਹੁੰਚਯੋਗ ARIA ਲੇਬਲਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਜੋੜਨ ਲਈ ਪ੍ਰਤੀਕਿਰਿਆ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ

ARIA ਲੇਬਲਾਂ ਨਾਲ ਤੁਹਾਡੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕੈਲੰਡਰ ਦੇ ਹਿੱਸੇ ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣਾ

ਪਹੁੰਚਯੋਗਤਾ ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਪਹਿਲੂ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਐਪਲੀਕੇਸ਼ਨਾਂ ਸਾਰੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਸੰਮਲਿਤ ਹਨ। ਪ੍ਰਤੀਕਿਰਿਆ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ, ਜਿਵੇਂ ਕਿ ਭਾਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਡੇਅਪਿਕਰ ਕੈਲੰਡਰ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ UIs ਵਿਲੱਖਣ ਚੁਣੌਤੀਆਂ ਪੇਸ਼ ਕਰ ਸਕਦੇ ਹਨ ਜਦੋਂ ਉਹਨਾਂ ਨੂੰ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਲਈ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।

ਹਾਲ ਹੀ ਵਿੱਚ, ਮੈਂ ਇੱਕ ਪ੍ਰੋਜੈਕਟ 'ਤੇ ਕੰਮ ਕੀਤਾ ਜਿੱਥੇ ਮੈਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਜੋੜਨ ਦੀ ਲੋੜ ਸੀ ARIA ਲੇਬਲ a ਵਿੱਚ ਵਿਅਕਤੀਗਤ ਦਿਨ ਦੇ ਤੱਤਾਂ ਨੂੰ ਡੇਅਪਿਕਰ ਕੰਪੋਨੈਂਟ। ਟੀਚਾ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਅਰਥਪੂਰਨ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਨਾ ਸੀ ਜਿਵੇਂ ਕਿ "ਚੁਣੀ ਗਈ ਮਿਤੀ: 1 ਜਨਵਰੀ, 2024" ਜਾਂ "ਅਣਉਪਲਬਧ ਮਿਤੀ: 2 ਜਨਵਰੀ, 2024" ਹਰ ਦਿਨ ਦੀ ਸਥਿਤੀ ਦੇ ਆਧਾਰ 'ਤੇ।

ਪਹਿਲਾਂ, ਮੈਂ ਸਟੈਂਡਰਡ ਹੱਲਾਂ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਜਿਵੇਂ ਕਿ ariaLabelFormatter ਜਾਂ ਰੈਂਡਰਡੇ, ਪਰ ਛੇਤੀ ਹੀ ਅਹਿਸਾਸ ਹੋਇਆ ਕਿ ਪ੍ਰਤੀਕਿਰਿਆ-ਦਿਨ-ਚੋਣਕਾਰ ਲਾਇਬ੍ਰੇਰੀ ਵਿੱਚ ਅਜਿਹੇ ਪ੍ਰੋਪਸ ਲਈ ਬਿਲਟ-ਇਨ ਸਮਰਥਨ ਦੀ ਘਾਟ ਹੈ। ਮੇਰੀ ਅਗਲੀ ਪ੍ਰਵਿਰਤੀ DOM ਪੋਸਟ-ਰੈਂਡਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਰਾਫੇਰੀ ਕਰਨਾ ਸੀ ਵਰਤੋਂ ਰੈਫ ਅਤੇ ਪ੍ਰਭਾਵ ਦੀ ਵਰਤੋਂ ਕਰੋ. ਕਾਰਜਸ਼ੀਲ ਹੋਣ ਦੇ ਦੌਰਾਨ, ਇਹ ਪਹੁੰਚ ਕਮਜ਼ੋਰ ਮਹਿਸੂਸ ਕਰਦੀ ਹੈ ਅਤੇ ਕਲਾਸ ਦੇ ਨਾਮਾਂ 'ਤੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਨਿਰਭਰ ਕਰਦੀ ਹੈ। 😕

ਇਹ ਲੇਖ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਵਿੱਚ ARIA ਲੇਬਲਾਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਜੋੜਨ ਲਈ ਇੱਕ ਹੋਰ ਮਜ਼ਬੂਤ ​​ਹੱਲ ਵੱਲ ਲੈ ਜਾਵੇਗਾ ਡੇਅਪਿਕਰ ਦਿਨ ਭਾਵੇਂ ਤੁਸੀਂ ਚੁਣੀਆਂ, ਅਯੋਗ, ਜਾਂ ਅਣਉਪਲਬਧ ਸਥਿਤੀਆਂ ਨਾਲ ਕੰਮ ਕਰ ਰਹੇ ਹੋ, ਅਸੀਂ ਯਕੀਨੀ ਬਣਾਵਾਂਗੇ ਕਿ ਤੁਹਾਡਾ ਕੈਲੰਡਰ ਪਹੁੰਚਯੋਗ ਅਤੇ ਸਕ੍ਰੀਨ-ਰੀਡਰ-ਅਨੁਕੂਲ ਰਹੇ। ਆਓ ਅੰਦਰ ਡੁਬਕੀ ਕਰੀਏ! 🚀

ਡੇਪਿਕਰ ਲਈ ਡਾਇਨਾਮਿਕ ARIA ਲੇਬਲ: ਇੱਕ ਡੂੰਘਾਈ ਨਾਲ ਗਾਈਡ

ਬਣਾਉਣ ਵੇਲੇ ਏ ਕੈਲੰਡਰ ਭਾਗ DayPicker ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਪ੍ਰਤੀਕਿਰਿਆ ਵਿੱਚ, ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਲਈ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣਾ ਮੁਸ਼ਕਲ ਹੋ ਸਕਦਾ ਹੈ। ਮੁੱਖ ਚੁਣੌਤੀ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਜੋੜਨ ਵਿੱਚ ਹੈ ARIA ਲੇਬਲ ਦਿਨ ਦੇ ਤੱਤ, ਇਸ ਲਈ ਉਹ "ਚੁਣੇ ਗਏ," "ਅਯੋਗ" ਜਾਂ "ਉਪਲਬਧ" ਵਰਗੀਆਂ ਸਥਿਤੀਆਂ ਦਾ ਸੰਚਾਰ ਕਰਦੇ ਹਨ। ਇਸ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ, ਅਸੀਂ ਦੋ ਪਹੁੰਚਾਂ ਨੂੰ ਨਿਯੁਕਤ ਕੀਤਾ: ਪੋਸਟ-ਰੈਂਡਰ DOM ਹੇਰਾਫੇਰੀ ਅਤੇ ਇੱਕ ਕਸਟਮ ਰੈਂਡਰਿੰਗ ਫੰਕਸ਼ਨ। ਆਉ ਇਸ ਨੂੰ ਤੋੜੀਏ ਕਿ ਇਹ ਹੱਲ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਮੁੱਖ ਭਾਗ। 🗓️

ਪਹਿਲਾ ਹੱਲ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਪੋਸਟ-ਰੈਂਡਰ DOM ਹੇਰਾਫੇਰੀ ਪ੍ਰਤੀਕਰਮ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਵਰਤੋਂ ਰੈਫ ਅਤੇ ਪ੍ਰਭਾਵ ਦੀ ਵਰਤੋਂ ਕਰੋ. `useRef` ਦੇ ਨਾਲ ਡੇਅਪਿਕਰ ਕੰਪੋਨੈਂਟ ਦਾ ਹਵਾਲਾ ਬਣਾ ਕੇ, ਅਸੀਂ ਰੈਂਡਰ ਕੀਤੇ DOM ਨੋਡਾਂ ਤੱਕ ਪਹੁੰਚ ਕਰ ਸਕਦੇ ਹਾਂ। ਇੱਕ `useEffect` ਹੁੱਕ ਦੇ ਅੰਦਰ, ਅਸੀਂ `querySelectorAll` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਾਰੇ ਦਿਨ ਦੇ ਤੱਤਾਂ (`rdp-day`) ਦੀ ਪੁੱਛਗਿੱਛ ਕਰਦੇ ਹਾਂ। ਹਰ ਦਿਨ ਲਈ, ਅਸੀਂ ਇਸਦੀ ਸਥਿਤੀ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਇਸਦੇ ਕਲਾਸ ਦੇ ਨਾਮਾਂ ਦੀ ਜਾਂਚ ਕਰਦੇ ਹਾਂ। ਜੇਕਰ ਕਿਸੇ ਦਿਨ ਵਿੱਚ “rdp-day_selected” ਕਲਾਸ ਹੈ, ਤਾਂ ਅਸੀਂ ਇੱਕ ARIA ਲੇਬਲ ਜੋੜਦੇ ਹਾਂ ਜਿਵੇਂ “ਚੁਣੀ ਮਿਤੀ: 1 ਜਨਵਰੀ, 2024।” ਇਹ ਵਿਧੀ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਜਦੋਂ ਵੀ ਕੈਲੰਡਰ ਸਥਿਤੀ ਬਦਲਦੀ ਹੈ ਤਾਂ ARIA ਲੇਬਲ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਅੱਪਡੇਟ ਹੁੰਦੇ ਹਨ।

ਦੂਜਾ ਹੱਲ a ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਕੇ ਇੱਕ ਸਾਫ਼, ਵਧੇਰੇ ਪ੍ਰਤੀਕਿਰਿਆ-ਅਨੁਕੂਲ ਪਹੁੰਚ ਲੈਂਦਾ ਹੈ ਕਸਟਮ ਰੈਂਡਰ ਫੰਕਸ਼ਨ. ਡੇਅਪਿਕਰ ਵਿੱਚ, ਅਸੀਂ ਦਿਨ ਦੇ ਤੱਤਾਂ ਦੀ ਰੈਂਡਰਿੰਗ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ 'ਕੰਪੋਨੈਂਟਸ' ਪ੍ਰੋਪ ਦੁਆਰਾ ਇੱਕ ਕਸਟਮ ਕੰਪੋਨੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਕਸਟਮ ਫੰਕਸ਼ਨ ਹਰ ਦਿਨ ਅਤੇ ਇਸਦੇ ਸਟੇਟ ਮੋਡੀਫਾਇਰ ਨੂੰ ਪੈਰਾਮੀਟਰਾਂ ਵਜੋਂ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਇੱਕ ਸਹਾਇਕ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਅਸੀਂ ਹਰ ਦਿਨ ਦੀ ਸਥਿਤੀ (ਉਦਾਹਰਨ ਲਈ, ਚੁਣਿਆ, ਅਯੋਗ) ਦੇ ਆਧਾਰ 'ਤੇ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ 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 ਲੇਬਲ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਮਹੱਤਵਪੂਰਨ ਹੈ, ਪਰ ਇੱਕ React DayPicker ਵਿੱਚ ਇੱਕ ਸੰਮਲਿਤ ਅਨੁਭਵ ਬਣਾਉਣ ਲਈ ਹੋਰ ਵੀ ਬਹੁਤ ਕੁਝ ਹੈ। ਇੱਕ ਨਜ਼ਰਅੰਦਾਜ਼ ਪਹਿਲੂ ਯਕੀਨੀ ਬਣਾ ਰਿਹਾ ਹੈ ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਅਤੇ ਫੋਕਸ ਪ੍ਰਬੰਧਨ. ਸਕ੍ਰੀਨ ਰੀਡਰ ਉਪਭੋਗਤਾ ਕੈਲੰਡਰਾਂ ਵਰਗੇ ਇੰਟਰਐਕਟਿਵ ਭਾਗਾਂ ਨੂੰ ਪਾਰ ਕਰਨ ਲਈ ਕੀਬੋਰਡ ਇਨਪੁਟਸ 'ਤੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਭਰੋਸਾ ਕਰਦੇ ਹਨ। ਡੇਅਪਿਕਰ, ਬਾਕਸ ਤੋਂ ਬਾਹਰ, ਬੁਨਿਆਦੀ ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ, ਪਰ ਇਸਨੂੰ ARIA ਲੇਬਲਾਂ ਦੇ ਨਾਲ ਅਨੁਕੂਲਿਤ ਕਰਨਾ ਇਸਨੂੰ ਹੋਰ ਅਨੁਭਵੀ ਬਣਾ ਸਕਦਾ ਹੈ।

ਖੋਜ ਕਰਨ ਲਈ ਇੱਕ ਹੋਰ ਖੇਤਰ ਅੰਤਰਰਾਸ਼ਟਰੀਕਰਨ (i18n) ਸਹਾਇਤਾ ਹੈ। ਜੇਕਰ ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਵਿਭਿੰਨ ਖੇਤਰਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦਾ ਹੈ, ਤਾਂ ARIA ਲੇਬਲਾਂ ਨੂੰ ਸਥਾਨਕ ਮਿਤੀ ਫਾਰਮੈਟ ਅਤੇ ਭਾਸ਼ਾ ਨੂੰ ਦਰਸਾਉਣਾ ਚਾਹੀਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, “1 ਜਨਵਰੀ, 2024” ਦੀ ਬਜਾਏ, ਇੱਕ ਫ੍ਰੈਂਚ ਉਪਭੋਗਤਾ ਨੂੰ “1 Janvier 2024” ਸੁਣਨਾ ਚਾਹੀਦਾ ਹੈ। ਲਾਇਬ੍ਰੇਰੀਆਂ ਜਿਵੇਂ `react-intl` ਜਾਂ ਮੂਲ JavaScript `Intl.DateTimeFormat` ਵੱਖ-ਵੱਖ ਲੋਕੇਲਾਂ ਵਿੱਚ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਲਈ ਇਹਨਾਂ ਲੇਬਲਾਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਫਾਰਮੈਟ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੀਆਂ ਹਨ।

ਅੰਤ ਵਿੱਚ, ਤੁਸੀਂ ਮੌਜੂਦਾ ਫੋਕਸ ਜਾਂ ਇੱਕ ਦਿਨ ਦੀ ਸਥਿਤੀ ਨੂੰ ਦ੍ਰਿਸ਼ਟੀਗਤ ਰੂਪ ਵਿੱਚ ਦਰਸਾ ਕੇ ਪਹੁੰਚਯੋਗਤਾ ਵਿੱਚ ਹੋਰ ਸੁਧਾਰ ਕਰ ਸਕਦੇ ਹੋ। ਕਸਟਮ ਨੂੰ ਜੋੜਨਾ CSS ਕਲਾਸਾਂ ARIA ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਿਵੇਂ `aria-current="date"` ਨਾਲ ਵਿਜ਼ੂਅਲ ਅਤੇ ਅਰਥ-ਵਿਵਸਥਾ ਦੋਵਾਂ ਦੀ ਪਹੁੰਚ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਨੂੰ ਸੰਦਰਭ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ ਅੱਜ ਦੀ ਤਾਰੀਖ ਨੂੰ ਦ੍ਰਿਸ਼ਟੀਗਤ ਰੂਪ ਵਿੱਚ ਉਜਾਗਰ ਕਰ ਸਕਦੇ ਹੋ। ਪੋਲਿਸ਼ ਦਾ ਇਹ ਪੱਧਰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਡੇਪਿਕਰ ਨਾ ਸਿਰਫ਼ ਕੰਮ ਕਰਦਾ ਹੈ ਬਲਕਿ ਸਾਰੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਸੰਮਲਿਤ ਹੋਣ 'ਤੇ ਵੀ ਉੱਤਮ ਹੈ। 🎯