React-dates: Keyboard navigation issues

[majapw]

cc: @backwardok for clarification on these issues

1. Down arrow to activate the calendar interferes with JAWS standard keyboard shortcuts
2. When opening the keyboard shortcuts panel, it does not take focus. This makes it somewhat difficult to exit when using some screen readers.

[backwardok]

o.O @majapw I just noticed this because I'm terrible at checking github on my personal account.

The 1st point may not be too bad since I think the field should trigger focus/forms mode, which will accept keyboard shortcuts.

The 2nd point is actually worse than described - because it doesn't take focus, it doesn't get read. This means screen reader users will have no idea what the shortcuts are, and it's not particularly easy to figure out how to get there since the months auto advance when trying to navigate out. Additionally, for sighted keyboard users, it's a bit confusing that you can't tab to the close button. You can close the keyboard shortcut menu by hitting the esc key, but then you've lost your previous spot and would need to go back to wherever you were again.

[erin-doyle]

I'll take a shot at working on this. :crossed_fingers:

[erin-doyle]

Ok PR submitted: https://github.com/airbnb/react-dates/pull/825.

[yaroslav-perec]

Auto focus for keyboard shortcuts panel doesn't work, "react-dates": "^15.4.0"
OC: ubuntu 16.04;
Browser: Google Chrome Version 61.0.3163.100;

[erin-doyle]

@yaroslav-perec can you describe this a little more? What is not working about it? What is it doing instead?

[yaroslav-perec]

@erin-doyle Sure, I use SingleDatePicker, it looks like this:

It seems close button has focus, but when I press Enter key shortcuts panel popup window doesn't close, I know if i click ESC it will close, but if you use SingleDatePicker inside modal window (that often have the same logic for ESC key), you will close modal window too, I think we should have possibility to close the pop-up by pressing the Enter key when focus on Close button.

[erin-doyle]

Right now it is coded to close when you hit the spacebar. It is my understanding (which could be incorrect) that spacebar is what keyboard only users expect to use when they are making selections or actions on elements. This is in main part because some browsers will automatically submit a form when the enter key is pressed anywhere on a page that has a form. So again the expected keys for navigation used by keyboard only and screen reader users is to only use Enter to submit a form and spacebar for all selections/actions.

[yaroslav-perec]

@erin-doyle I understood, thanks!

[backwardok]

It would probably be good to support enter as well, since native buttons activate on both enter and space.

[erin-doyle]

Ok I can work on making that change then.

[erin-doyle]

Pull Request #916 added with this change.