React-datepicker: Accessibility issues

[innopal]

Some accessibility (screen reader) issues.

1. When focus moves to the x (clear button), the screen reader reads “times” (fa font name I suppose).
2. Moving around the calendar control, the screen reader reads “blank” or the date that is in the date range box, not the date in the calendar. As a user, I have no clue what date I am moving around to on the calendar. Our workaround idea for this is to ask user to type in the date (which is less than ideal) by having the screen reader read (start date, month, day, year) or something in that effect, but there is no support for aria attributes (hence #3).
3. No support for aria attributes for DatePicker control.

I'm on the latest 0.46.0 version.

react-dates and rc-calendar have very good accessibility features but I like your picker better.

I appreciate your work.

Cheers

[MatteoNY]

I downloaded the GitHub repository and it's using version 0.30.0 when I tested and it works as expected when using the keyboard to move about the calendar it speaks the day, tested using Chrome and Firefox. This works fine up until version 0.40.0 and then it moves to silence when you select. If you hover it speaks fine. I'm using the latest NVDA screen reader 2017.3. Also when I move to the newer version 0.53.0 it goes silence. I'd use 0.40.0 but it has major issue on minDate and allows it to select a date prior to today. I've just noticed you have a new 0.55.0 version I will give that a try. If you want a good model I'd checkout SouthWest Airlines home page's calendar it's exactly what the DOT (Dept. Trans) wants. Also JetBlue's calendar is also accessible. I've tried to use AirBndB's calendar and works but issues with Focus on Firefox. Two years ago I built an app using Angular 1.4/1.5 and used Angular UI Bootstrap and it works like a charm. I may have to give up on React and move to Angular for this new app. I hope you can resolve by maybe providing a props value to enable SRONLY features like speaking when you use the keyboard. I know this is difficult but version 0.40.0 would be perfect if it did not allow the selection of a minDate. Thanks in advance for your help.

[vcastrejont]

The reason v 0.30.0 works fine with a screen reader is that the input is updated when a new day is selected using the keyboard, the current version no longer do that.

I am trying to do archive the change date on arrow key pressed behavior using custom input, any help is welcome

Expected behavior:

[richardkazuomiller]

A good start would be to simply pass some of the aria-* props down to the input element.

[venkata82]

I have added year drop down. what's the shortcut to change year?

[ntanguay]

In datepicker props, if you pass in adjustDateOnChange: true, it seems to mimic the behavior in the gif above. The date updates with keyboard navigation, and the screenreader is able to read that value on a key change. Tested with Mac VoiceOver

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.