Date is announced twice in the NVDA screen reader

Author: venket469Created Sep 22, 2026Updated Sep 22, 2026

Summary

Screen readers like NVDA reads the date twice one for the Grid Cell Context and One for the focused button while navigation through the calendar grid if the Calendar Grid itself is in a Dialog. It is recommended to use role=application for the DayPicker component (https://daypicker.dev/guides/input-fields#:~:text=If%20a%20screen%20reader%20keeps%20the%20arrow%20keys%20for%20browse%20mode%20(for%20example%2C%20NVDA)%2C%20set%20role%3D%22application%22) if it is inside the dialog.

Where as when I check in the w3 aria org datepicker dialog examples https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/, it reads the date only once.

Only difference I see is w3 aria org datepicker example has only td and no button inside it. For some reason it does not looks to be a issue in version 8 example https://daypicker.dev/v8/advanced-guides/input-fields. There are lot of changes after that so not able to completely pin point what might be issue. One thing I noticed is td has role='presentation' and button has role='gridcell'

To reproduce

The issue is reproducible in the https://daypicker.dev/guides/input-fields for the example where dialog is used.

<dialog
        role="dialog"
        ref={dialogRef}
        id={dialogId}
        aria-modal
        aria-labelledby={headerId}
        onClose={() => setIsDialogOpen(false)}
      >
        <h2 id={headerId}>Choose a date</h2>
        <DayPicker
          month={month}
          onMonthChange={setMonth}
          autoFocus
          role="application"
          aria-label={calendarLabel}
          mode="single"
          selected={selectedDate}
          onSelect={handleDayPickerSelect}
          footer={
            selectedDate !== undefined &&
            `Selected: ${selectedDate.toDateString()}`
          }
        />
      </dialog>

Actual Behavior

Screen readers are reading the dates inside dialog twice when we are navigating through the DayPicker Calendar.

Expected Behavior

Screen readers should read the dates once for every date user is navigating through the DayPicker Calendar. https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/

Screenshots

image

Possible Fix

Maybe we should use just buttons with role=gridCell instead of having buttons wrapped inside td.