WCAG. Announce a position of an element instead of a date in Windows 11

[Ruslan-I7]

Describe the bug
When we use a calendar and a screenreader in Chrome, going through the calendar dates, it announces a position of an element but not a day

To Reproduce
Steps to reproduce the behavior:

1. Go to https://reactdatepicker.com
2. Launch the Windows screenreader narrator
3. Via up-down arrows go through the dates
4. Listen to the voice acting

Expected behavior
The aria-label should be announced. Example: Choose Saturday, May 24th, 2025

Desktop (please complete the following information):

• OS: Windows 11
• Browser chrome
• Version 136.0.7103.114

[ashishsingh2601]

Hey @Ruslan-I7, from what I tested and found, this issue seems to be related to how Narrator interprets the calendar's grid structure and ARIA labels compared to other screen readers like NVDA and VoiceOver. The problem is that Narrator may be focusing on the positional information (like column headers or grid coordinates) rather than the meaningful date content. Perhaps, this is a known issue for narrator.

Some workarounds you can try:

• Navigation method:
  • Try using different navigation keys when in the calendar - arrow keys, Tab, or Narrator's table navigation commands (Narrator + Ctrl + Arrow keys)
• Verbosity settings:
  • Setting verbosity to "4 - Essential text details" instead of "5 - All text details"
  • Adjusting the "Context level for buttons and controls" setting

Alternative approaches:

• Use Narrator's "Read from here" command (Narrator + Ctrl + R) when focused on a calendar date
• Try Narrator + F2 to get additional information about the focused element.

I checked in Mac's VoiceOver and Windows NVDA, output is coming as expected for these two assistive technology tools as can be seen in below screenshots.

NVDA:

VoiceOver:

DOM showing aria-label (which is getting announced as can be seen in above screenshots):

[martijnrusschen]

Looks like there's no issues, closing.