Accessibility issue in calendar picker in the latest version 8.10.0

[paras2411]

Description

Our team is using react-day-picker in our project and built a wrapper on it. We were testing few things and found few a11y issue.
Voiceover screen reader in chrome is reading the calendar grid cells as text element even though its a button. Date present is being read more than one time. Also the date selected is not the one announced.

Observed this issue in the latest version. When changed the version to 8.2.1, the issue doesn't exist. Can someone pls verify and look into this issue.

Expected Behavior

Screen reader should read the grid cell as button instead of text and date should be announced only once. And also the date announced should be the one selected.

Actual Behavior

Voiceover screen reader in chrome is reading the calendar grid cells as text element even though its a button. Date present is being read more than one time. Also the date selected is not the one announced.

Steps to Reproduce

Navigate the calendar with voiceover screen reader on the 8.10.0 version of react-day-picker.

Possible Solution

The difference I am seeing is that in the latest version the grid cell is being assigned role "presentation" which generally remove an element's implicit ARIA semantics from being exposed to the accessibility tree. reference. Don't see that in the 8.2.1 version.

Screenshots

Can't add the screenshot. But you can reproduce/verify the issue with 8.10.0 version.

Your Environment

• React version: >=17.0.0
• Your Timezone: Kolkata/India
• Browser [e.g. chrome, safari]: chrome
• Version [e.g. 22]: 121.0.6167.139 (Official Build) (arm64)
• Operating System [e.g. iOS, Windows]: iOS
• Other relevant information: Voiceover screen reader

[gpbl]

@paras2411 thanks for the detailed report!

We are aware of this issue (see #1688) and we are working on a fix.

If this is an issue for you, I suggest to stay on v8.2.1 until the next release, when this will be fixed. Follow #1688 to stay updated.

[morozovamv]

I have similar issue, I went from 8.3.5 to 8.10.0 because 8.3.5 was incompatible with date-fns@3. After upgrading we lost aria-labels on the Day/DayContent elements which we used to for testing because it was easy to get a button of a particular day.

UPD: I found some MRs where it was changed and the draft MR with a potential fix which seems to planned for v9. Is there a possibility to add access to the Day/DayContent elements, so devs can provide their own props/data-attributes to get access to the day element in tests?
So far I could only do this:

<DatePicker
  ...
  components={{
    DayContent: props => {
      return (
        <div data-testId={format(props.date, 'do MMMM (EEEE)')}>
          <DayContent {...props} />
        </div>
      )
    },
  }}
/>

but it doesn't look right.