Have a focus prop that will bring the date in focus

[aitchkhan]

This is a feature request.
We have recently been working on making our application more accessible. This feature request has an influence of the work that we are doing to make our application WCAG 2.0 AA compliant atleast.

For our specific use-case we don't show DayPicker by default. When it opens up, we want to have a focus on the selected day. That way, it will be read out by the screen reader and it will be easier for the user to navigate via the keyboard.

Approach:
Add a focus prop which takes a date object and steal focus on that one.

I can create a PR for this.

[thecoorum]

Hey @aitchkhan, is there any progress about this feature? Or maybe you can share you thoughts on how to achieve this behavior?

[WillTaylor22]

Bump on this - would be useful :)

[rodgobbi]

Hi @WillTaylor22,
Thanks for pointing out this unanswered thread.

Having focus API is tricky because multiple focusable elements are mounted by the DayPicker, and the focus behavior can vary based on the use case.

However, the DayPicker provides ways to manually set focus to specific elements that you want.
Answering the original question as an example, the DayPicker mounts each calendar day container with data-day attribute like:

You can use the data-day attribute to query the DOM and manually focus the button in the calendar representing the day.
Here's a code snippet example to how to this when mounting the DayPicker and you want to focus the selected day:

useEffect(() => {
  const parsedSelectedDate = defaultDateLib.format(selectedDate, "yyyy-MM-dd");
  const selectedCalendarDayEl = document.querySelector(
    `[data-day="${parsedSelectedDate}"] button`
  );
  if (selectedCalendarDayEl && selectedCalendarDayEl instanceof HTMLElement) {
    selectedCalendarDayEl.focus();
  }
}, []);

return <DayPicker ... />