Open iseatz-zgoodwin opened 2 days ago
gpbl
commented
2 days ago Interesting, thanks for the detailed report. This issue may be introduced by https://github.com/gpbl/react-day-picker/pull/2475 in v9.1.2, where we removed unnecessarily role attributes.
gpbl
commented
1 day ago I understand that there might be some issues with VoiceOver and keyboard navigation. This is likely because VoiceOver gets confused by the cell attributes (aria-selected, etc.) and the button it contains.
In your video, it appears that when navigating with the VoiceOver Rotor, the cells and the grid are navigable using the keyboard, but for some reason, the button inside the cell is ignored, so no selection can be made.
One possible solution to fix this issue could be to remove the button from the grid cells. This means using <div role="gridcell"> as the “button".
However, there are a couple of potential issues with this approach:
role property, so it’s important to verify that the changes comply with these rules.The goal is to get VoiceOver to work with the current HTML layout. I’ve tried playing with the onFocus event over the cell, but I haven’t been able to make significant progress. I also noticed that laying out the grid using role="gridcell" directly on the button makes the VoiceOver navigation work smoother.
Additionally, it seems that the ArrowUp and ArrowDown keys are not working as expected. They navigate to the previous and next days instead of the week.
@iseatz-zgoodwin, are you available to help me test the possible fixes here?
Steps to reproduce
Steps:
Current behavior
We noticed that on our proprietary apps date pickers no longer properly work with VoiceOver but only on Sonoma and Seqouia MacOS (works fine on Ventura OS). On all browsers ENTER/SPACE doesn't select the correct date - selection is always on what TAB landed on. However, now only Control + Option + SPACE/ENTER selects, while in the past only ENTER/SPACE was enough. And also issues with regular arrow buttons.
With VoiceOver if using regular arrows, only arrow left/right works, but not arrow up/down, however, Ctrl + Option + Arrow up/down/left/right works fine for moving the cells. Technically, both options should work.
Similarly, on iPhone + VoiceOver, only swiping right/left makes cells move left right, but swiping up/down doesn't make cells move up/down. The good news tapping twice to select - works, so no major concerns with VoiceOver on phones.
I additionally tested this date picker with NVDA/JAWS 2024/JAWS 2025 on Windows 10 on Edge/Chrome/Firefox and there were no issues with those combinations. JAWS performed the best: no issues using arrows or ENTER. On NVDA odd discrepancy that arrow up/down moves left/right and arrow left/right reads letters one by one (but doesn't move the cells), however, since it's a table, using Ctrl + Alt + arrow up/down/left/right was no issue.
Video: https://drive.google.com/file/d/10dS8cwHG_U0gmXer4JGXyy4dzkjZAUBs/view?usp=sharing
Expected behavior
VoiceOver users are used to use regular arrows and ENTER/SPACE without Control + Option as it works in earlier versions (for example, Ventura OS) so usability should not change.
Context
It is hard to say if it's Apple issue or library issue, but it's a 50/50 possibility. However, this could raise issues with violating WCAG 2.0/2.1/2.2 Level A SC 4.1.2 (Compatibility) due to usability inconsistency.
Your environment
Computer: MacBook Pro, Apple M1 Max, 15.1 (24B83)
Phone: iPhone 14 Pro, iOS 18.1
Browsers: Safari Version 18.1 (20619.2.8.11.10) Chrome Version 130.0.6723.117 (Official Build) (arm64) Edge Version 130.0.2849.80 (Official build) (arm64) Firefox Version 132.0.2 (aarch64)