Arrow-navigation in calendar does not change focus, breaking accessibility

[John-Feola]

Describe the bug
When you open the calendar and use the arrow keys to navigate to a new day, the focused element does not change.

This has 2 important consequences that I'm aware of:

1. Screen-reader accessibility for the calendar is broken. When screen-reader user uses arrow-key to navigate to a new day, there will be 0 announcements.

2. :focus and :focus-visible pseudo-selectors will not apply to a day that has been selected via arrow keys.

To Reproduce
Steps to reproduce the behavior:

1. run the following script:
   function printFocusedElement() { console.log(document.activeElement); setTimeout(printFocusedElement, 2000); } printFocusedElement();

2. Use an arrow-key to navigate to a new day in react-datepicker calendar

3. Note that the focused element being logged has not changed

Expected behavior
When you use arrow-key to navigate to a day, that day should be focused.

Screenshots
In this screenshot, I have navigated from February 19th --> February 17th via arrow-keys, but February 19th is still the focused element.

Desktop (please complete the following information):

• OS: [Windows]
• Browser [Chrome]
• Version [132.0.6834.197]

Additional context

This behavior first appears in react-datepicker v7.0.0

This only applies when using arrow keys to navigate between days in the same month. The focus is still applied correctly when you navigate from a day in month X to a day in Month Y using arrow-keys.

Additionally, if you tab from the next-month button to the day, it will be focused correctly.
(ex:
navigate to a from May 20 to May 19 via arrows. May 19 will not be focused.
hit TAB. You are now on the 'previous-month' button.
hit TAB again. You are now on 'next-month' button.
hit TAB again. You are now on May 19, and now it it focused.
)

[mellis481]

@martijnrusschen It looks like a regression occurred, causing the calendar in the last two major versions to be essentially completely inaccessible.

[yuki0410-dev]

@mellis481 @John-Feola
Perhaps adding containerRef={this.containerRef} to the following link and adjusting the type will make it work correctly.
However, I am not sure because it has been a while since I ran it, and I am unable to debug it properly in my local environment.

react-datepicker/src/calendar.tsx

Line 994 in cd1789c

ariaLabelPrefix={this.props.monthAriaLabelPrefix}

[mellis481]

However, I am not sure because it has been a while since I ran it, and I am unable to debug it properly in my local environment.

@yuki0410-dev Can you clarify why you're saying you can't investigate the issue? To be clear, the issue in your PR has effectively made the calendar completely inaccessible. It would be great to get your involvement in this since you are most familiar with your own code.

[yuki0410-dev]

@mellis481

I have built a new environment according to CONTRIBUTING.md and tried debugging with console.log in my local docs-site, but the console.log results do not show up in the browser console.
Any advice on this? (When I was a previous contributor, RCA was installed, not vite, and it worked fine.)

Just to let you know, I am only one of about 400 contributors to this repository, so I can't always keep up with the latest developments in this repository.

[yuki0410-dev]

The above response was not sufficient.
The following PR may have involved the splitting of the Calendar.tsx div ref into a separate component.
Unlike state, containerRef does not trigger re-rendering, so there are cases where child component props are not updated even if they are updated on a delay.

#4979

[mellis481]

@yuki0410-dev I want to make sure I'm interpreting your comment correct. Are you asserting that the issue is caused by #4979 and not #4766?

[yuki0410-dev]

@mellis481

First, containerRef is no longer passed from Calendar to Month in #4766.
At this point, we believe we could have fixed the problem by just fixing the passing of containerRef from Calendar to Month.
(I believe this was both an inadvertent error on my part and the reviewer's, and also a test case coverage issue.)

Secondly, I believe that the problem in this issue is complicated by the fact that in #4979, the containerRef is set from a div in the calendar component to a ClickOutsideWrapper, which changes the timing of when current is updated. The issue is complicated by the fact that the current is updated at different times.

We have implemented a fix to the first issue and created a PR for #5456.
(We have not yet been able to confirm the test).
However, we have not been able to resolve the issue in this issue, and further testing is required.

[yuki0410-dev]

In addition to #5456, one of the following fixes would resolve the events in this issue, but we feel that none of them are a good approach.

Method 1
Place a div inside the ClickOutsideWrapper of the Calendar component.
Keep the ref of that div in the Calendar component and pass it to the Month component instead of the containerRef.

Method 2
Make the key of the part of the Week component that calls the Day component always be changed.
Example: key={day.valueOf() + new Date().valueOf()}.

Any good advice would be appreciated.

[John-Feola]

Thanks! @yuki0410-dev