react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

Date/time selection errors are not discoverable by screen readers

Open MeetAndyHong opened this issue 3 years ago • 3 comments

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

  1. Navigate to:
  2. Click on Request expert session button
  3. Turn on the system's screen reader utility
  4. Tab and fill out form to the first date time selector control
  5. 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

MeetAndyHong avatar Jul 21 '22 21:07 MeetAndyHong

No Adobe internal links, thank you You can submit a codesandbox to reproduce it, or code to run in our own storybook

snowystinger avatar Jul 21 '22 22:07 snowystinger

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.

devongovett avatar Jul 26 '22 23:07 devongovett

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

majornista avatar Aug 19 '22 19:08 majornista