[Accessibility] NVDA announces all selected dates in random order when calendar mounts inside a popover
Describe the bug
When using react-datepicker in date range mode with the inline prop inside a popover, NVDA screen reader announces all selected date cells in a non-sequential, unpredictable order as soon as the popover opens — even if focus lands elsewhere in the popover (e.g. a tabs widget).
The root cause is that NVDA enters browse mode when a dialog opens and sweeps the entire dialog with its virtual cursor. Because the calendar renders all selected date cells with aria-selected="true" on mount, NVDA reads them all out immediately. The library currently provides no focus management API (e.g. autoFocus targeting a day cell, or an onCalendarOpen callback with a stable DOM reference) to suppress or control this behavior.
To Reproduce
- Open the CodeSandbox: https://codesandbox.io/p/sandbox/whmgvn
- Enable NVDA
- Open the popover
- Listen to the NVDA announcement on open
Observed behavior NVDA reads all selected dates immediately upon calendar mount, in random order:
Choose Friday, June 6th, 2025 selected row 2 Friday column 6
Choose Saturday, June 7th, 2025 selected row 2 Saturday column 7
Choose Monday, June 9th, 2025 selected row 3 Monday column 2
Choose Sunday, June 8th, 2025 selected Sunday column 1
Choose Tuesday, June 3rd, 2025 selected row 2 Friday column 3
...Expected behavior When the calendar mounts, no automatic announcements should be triggered. Selected state should be communicated only when the user individually focuses a date cell (e.g. "June 6th, 2025, selected").
Screen recording
https://github.com/user-attachments/assets/fa6bb261-0d7e-4f46-8466-d85ee5db4487
CodeSandbox https://codesandbox.io/p/sandbox/whmgvn
Desktop:
- OS: Windows 11
- Browser: Chrome (148.0.7778.217)
- Screen reader: NVDA (2026.1 (2026.1.0.55743)) "react": "18.2.0", "react-dom": "18.2.0", "react-datepicker": "^9.1.0"
Additional context A possible fix would be for the library to explicitly move focus to a specific day cell (e.g. the range start date or today) when the calendar mounts, following the ARIA authoring practices for date picker dialogs. This would prevent NVDA from sweeping the grid in browse mode.
Source: Hacker0x01/react-datepicker