Date is announced twice in the NVDA screen reader
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
Possible Fix
Maybe we should use just buttons with role=gridCell instead of having buttons wrapped inside td.
Source: gpbl/react-day-picker