The Today Button is not accessible via Tab key for keyboard users

[talatkuyuk]

The problem is: The keyboard users can not focus to the Today Button (actually it is a div) via Tab key.

Today button's tab index (tabIndex) actually should be set to 0. Otherwise it is not accessible from keyboard.

https://github.com/Hacker0x01/react-datepicker/blob/master/src/calendar.jsx#L734

[marwanKettleCom]

Yes having the same issue. Please fix. Thank you!

[LGLabGreg]

There is no need to add a button as there is already logic to set tabindex, but currently it is possible that no date has tabindex=0 if the datepicker loads with no selected date.

https://github.com/Hacker0x01/react-datepicker/blob/master/src/day.jsx#L282

So if not keyboardSelected/selected/preselected it should default to today or first day of the month.

[LGLabGreg]

Here's a solution

const datePickerRef = useRef(null);

useEffect(() => {
  if (datePickerRef.current) {
    datePickerRef.current.setPreSelection(new Date());
  }
}, [datePickerRef]);

<DatePicker ref={datePickerRef} />

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[github-actions]

This issue was closed because it has been stalled for 10 days with no activity.

[talatkuyuk]

My solution is inline with selectsRange prop of the date picker. Update yours accordingly.

I assume you use todayButton="Today" prop already to see Today button at the bottom of the date picker.

Firstly, use onCalendarOpen={setupTodayButton} as a prop.

const setupTodayButton = () => {
    setTimeout(() => {
      const todayButton = document.querySelector(
        ".react-datepicker__today-button",
      ) as HTMLElement | null;
      if (!todayButton) return;

      todayButton.setAttribute("tabindex", "0");
      todayButton.setAttribute("role", "button");

      const applyTodayRange = () => {
        const startDate = new Date();
        const endDate = new Date();
        endDate.setHours(23, 59, 59, 999);
        handleChange([startDate, endDate]); // replace it with your state setter
      };

      todayButton.onclick = applyTodayRange;

      todayButton.onkeydown = (e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          applyTodayRange();
        }
      };
    }, 0);
  };

If you use it as inline date picker, then you should use an useEffect, I suppose.