React-dates: Accessibility issues

[Daniel15]

After going to http://airbnb.io/react-dates/?selectedKind=DateRangePicker&selectedStory=default&full=0&down=1&left=1&panelRight=0 and opening the date picker, I can't figure out how to scroll through the months / select a date using the keyboard. It seems like it requires the mouse to be used, meaning it can't easily be used by screen readers.

Additionally, the layer that pops up should have the correct ARIA attributes (role="dialog", aria-expanded).

[majapw]

You're totally right! We need to fix this, and we've been thinking about the best way to go about this.

The accessibility of our current version of the datepicker has been focused on making sure that despite the custom focus state and presentation of the inputs that you can still type in dates and that they will still be validated appropriately. Currently, if you type in a date into the input, if it is iso format or moment's 'L' format in whatever locale you're in, it will accept the date as soon as it strictly matches that format, move focus forward, and close the datepicker as necessary.

Here are some things we need to do to get full accessibility working on the datepicker though and that are on our roadmap (of course we want more suggestions and best practices too!):
1) Currently we use placeholders as labels which is not a very good practice! We want to have labels as separate entities above the input (Check In) and placeholders dictating how the input should look (YYYY-MM-DD). Given our current state of affair, we would probably make this optional and allow for inline placeholder labels... for now.
2) We need to have better error messaging for when you are typing a date! ie if you type 10 characters that we cannot parse as a date, we need to refocus and inform the user somehow that they need to try again instead of just silently failing.
3) A la https://github.com/airbnb/react-dates/issues/18, we need to be able to close the datepicker on escape --- this probably means have a state where you can be focused on the input and that is separate from the datepicker visibility. We would also need to be able to reopen the datepicker, maybe on arrow-down?
4) Once the above is settled we need to figure out what exactly the best practices are for how to navigate the calendar. How do you navigate between months? how do you enter focus onto the calendar itself? Does the input maintain focus?

The tl;dr is that we have focused primarily on making sure the input itself is accessible and still have not determined the best way to approach the calendar for this. @backwardok and I have been talking a lot about this in the past weeks!

[alfonsogrondo]

I guess this is why you have changed the tagline of this library from:

"An accessible, easily internationalizable, mobile-friendly datepicker library for the web."

to

An easily internationalizable, mobile-friendly datepicker library for the web.

@majapw Curious..do you have a timeframe for addressing the accessibility issues? I notice the same issues are a feature of the date picker on airbnb.com which surprised me (assumming its essentially the same code).

Thanks

[majapw]

Huzzah! Use your keyboard for great profit in v10.0.0 which features keyboard accessibility!

I'm sure we'll be slowly improving things throughout as well.