Hacker0x01
Unable To Select Date With Arrow Keys
Describe the bug Date receiving a pseudo focus (actual focus stays on the selected date) while navigating with arrow keys doesn't get selected.
To Reproduce
Date selection doesn't change with arrow keys:
https://github.com/user-attachments/assets/9df2a492-40fc-46ff-b18b-924e48d7b9e8
Fixing the above issue would also fix the below issue where keyboard selection styles are absent for selected date:
https://github.com/user-attachments/assets/97a51e23-af87-4b0e-b224-b1d0bdd2a767
Expected behavior
A new prop should be introduced which should select date with arrow keys similar to native date input:
https://github.com/user-attachments/assets/77d1f204-5545-425c-a91e-c179ef7f072f
Desktop (please complete the following information):
- OS: macOS Sonoma
- Browser: Chrome
- Version: 129.0.6668.59
👍 Although you can navigate with the arrow keys, for assistive technologies (i.e. screen readers) there is no announcement of the dates as you move within the calendar. For accessibility, the user doesn't know what is changing or what they are selecting.
We have a similar issue with Firefox and NVDA- While navigating with arrow keys no date is announced as the Focus on the Date Element is not triggered properly, there is only avisual indicator. The tabindex is adjusted, but only that.
@ahaws-govcio @polent The regression you reference started in v7.0.0 and is called out in #5428.
