Keyboards arrows not working when I set role=dialog and use NVDA screen reader to read contents.

[venket469]

I am currently exploring to use react-day-picker in a popup/modal like UI below a input field. When I set role=dialog and aria-label for the react-day-picker, NVDA screen reader does not reads the selected element properly and also keyboard arrow functions are not working at all in UI. But when I set react-day-picker role=application its working perfectly fine. But since I am using modal like UI, I thought of using role=dialog. Let me know if I am something or if this is a bug.

[gpbl]

Hi @venket469, best practice is:

• keep DayPicker’s own roles intact (don’t override them)
• wrap it in a dialog container and manage focus on open/close
• use autoFocus so the grid gets focus when the popover opens

Example:

<div role="dialog" aria-modal="true" aria-label="Choose a date">
  <DayPicker mode="single" autoFocus />
</div>

A more complex example is here: https://github.com/gpbl/react-day-picker/blob/main/examples/Dialog.tsx

If you’re still seeing issues after wrapping + focusing, share a minimal repro and we can check for a bug.

[venket469]

@gpbl If you see this example https://daypicker.dev/guides/input-fields given here for the dialog which is the same code as https://github.com/gpbl/react-day-picker/blob/main/examples/Dialog.tsx. Arrow buttons are not working with NVDA screen reader. I am able to focus to the current day using tab button but not able to move to the other days using Arrow buttons.

The example has autofocus and wrapped around the dialog role = 'Dialog' aria-modal='true'. I feel this is a bug.

Note: I tried to override the role with value 'application' because I also tried the same approach you suggested above and it did not work.

[gpbl]

@venket469 what do you mean with "Arrow buttons are not working"?

[venket469]

@gpbl I mean I am able to focus to current date, not able to navigate to other dates using arrow up/ arrow down/ arrow right/ arrow left when the NVDA screen reader is on.

[gpbl]

@venket469 thanks for clarifying.

It could be that NVDA is using these keys for browsing instead of focusing on the buttons in the calendar.

What happens if you keep the dialog role in the container AND add the application role (with aria-label) to DayPicker?

I am currently unable to test NVDA, so I cannot try it myself...

[venket469]

1. Navigation works fine if I do the things which you mentioned.
2. But I have to set aria-labels to the container as well as the DayPicker Element.
3. If I do not set the aria-label to the DayPicker lets say since we have set the aria-label to the Dialog role container. It just reads application without any context in between since DayPicker has role application.
4. I had to do the below so that it reads the Calendar Container dialog then starts reading the date in focus along with year and month. Its kind of workaround I had to do because I did not want two aria-labels for the container as well as the DayPicker. That's why I raised this thread.

<div
  role="dialog"
  aria-modal="true"
  aria-label={"Calendar Container"}
>
  <DayPicker
    autoFocus
    role='application'
    aria-label={'-'}/>
</div>

[gpbl]

Thanks for the update @venket469! I will update the docs accordingly.

I think this is the correct way to make it work. There's nothing wrong with having an aria-label for the dialog and one for the calendar. I suggest using the dialog's header as the dialog label, and something like "Calendar, December 2025" for the DayPicker.