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
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