react-spectrum
react-spectrum copied to clipboard
Date/time selection errors are not discoverable by screen readers
Expected Behaviour
There should be some kind of feedback mechanism when a date is not considered valid.
Actual Behaviour
The selector indicates there's a problem with the date selected, but there's no tip as to what the error is-the time seems valid to the user. The error prevents the request's submission. Visually impaired users receive no indication there is an error. The modal appears to require a 3 day lead for scheduling sessions without stating so. Screenshot attached.
Reproduce Scenario (including but not limited to)
Steps to Reproduce
- Navigate to:
- Click on Request expert session button
- Turn on the system's screen reader utility
- Tab and fill out form to the first date time selector control
- Set the first date time selector to 1 day in advance
Platform and Version
Sample Code that illustrates the problem
Logs taken while reproducing problem
No Adobe internal links, thank you You can submit a codesandbox to reproduce it, or code to run in our own storybook
We appear to be adding aria-invalid properly, but some screen reader/browsers do not announce when it changes.
- VO on maOS – not announced
- NVDA/JAWS with Chrome – not announced
- NVDA/JAWS with Firefox – works
Note that it is announced in all screen readers when you first focus an invalid segment, just not when it first becomes invalid.
I think ideally we would compensate for the lack of announcement of the invalid state change using LiveAnnouncer, and clarify why the range is invalid. Something like “end date comes before start date” or “selected date is outside available range”.