React-datepicker: Keyboard Support

Created on 16 Mar 2016 · 9Comments · Source: Hacker0x01/react-datepicker

Is there keyboard support for navigation in dialog?

enhancement help wanted

Source

danielone

👍1

Most helpful comment

Let's take how others are doing this:

Keyboard support
Depending on datepicker's current mode, the date may refer either to day, month or year. Accordingly, the term view refers either to a month, year or year range.

Left: Move focus to the previous date. Will move to the last date of the previous view, if the current date is the first date of a view.
Right: Move focus to the next date. Will move to the first date of the following view, if the current date is the last date of a view.
Up: Move focus to the same column of the previous row. Will wrap to the appropriate row in the previous view.
Down: Move focus to the same column of the following row. Will wrap to the appropriate row in the following view.
PgUp: Move focus to the same date of the previous view. If that date does not exist, focus is placed on the last date of the month.
PgDn: Move focus to the same date of the following view. If that date does not exist, focus is placed on the last date of the month.
Home: Move to the first date of the view.
End: Move to the last date of the view.
Enter/Space: Select date.
Ctrl+Up: Move to an upper mode.
Ctrl+Down: Move to a lower mode.
Esc: Will close popup, and move focus to the input.
Notes

If the date a user enters falls outside of the min-/max-date range, a dateDisabled validation error will show on the form.

This is a needed feature for us too, so we will investigate it.

jmfrancois on 7 Sep 2016

👍3

All 9 comments

What kind of keyboard support do you have in mind here?

rafeememon on 24 Mar 2016

Closed because of inactivity

rafeememon on 11 Apr 2016

Hey, I was searching for any issues related to keyboard navigation and noticed this was labeled as 'needs more info'. My needs require the use of only a keyboard to select a date. I'm happy to help discuss what this should be like.

To support certain levels of accessibility guidelines a user should be able to use just a keyboard and currently selecting a date isn't possible.

In my use case for the date picker being able to type in a date is not possible as the dates shown are current events which are loaded from an API and therefore the user does not know what's available.

Some suggestions:

Using tabindex='-1' on the dates to allow focus
Have 'aria-selected' true|false depending on the state on each day
When tabbing through the calendar dates the focus shouldn't leave the component until they have made a selection or quit (e.g. pressing 'ESC').
Tabbing should loop through the dates i.e. after tabbing the last date move focus to the first visible date

Let me know your thoughts.

Thanks for the great component and accessibility will be a great addition.

fitz0019 on 7 Jun 2016

Let's take how others are doing this:

Keyboard support
Depending on datepicker's current mode, the date may refer either to day, month or year. Accordingly, the term view refers either to a month, year or year range.

Left: Move focus to the previous date. Will move to the last date of the previous view, if the current date is the first date of a view.
Right: Move focus to the next date. Will move to the first date of the following view, if the current date is the last date of a view.
Up: Move focus to the same column of the previous row. Will wrap to the appropriate row in the previous view.
Down: Move focus to the same column of the following row. Will wrap to the appropriate row in the following view.
PgUp: Move focus to the same date of the previous view. If that date does not exist, focus is placed on the last date of the month.
PgDn: Move focus to the same date of the following view. If that date does not exist, focus is placed on the last date of the month.
Home: Move to the first date of the view.
End: Move to the last date of the view.
Enter/Space: Select date.
Ctrl+Up: Move to an upper mode.
Ctrl+Down: Move to a lower mode.
Esc: Will close popup, and move focus to the input.
Notes

If the date a user enters falls outside of the min-/max-date range, a dateDisabled validation error will show on the form.

This is a needed feature for us too, so we will investigate it.

jmfrancois on 7 Sep 2016

👍3

Okay, this seems to be a nice feature. If someone is able to implement this, we're happy to support it!

martijnrusschen on 7 Sep 2016

I'm OK to start a Pull Request on that.

jmfrancois on 7 Sep 2016

awesome thanks guys! accessibility support via keyboard input so valuable to an accessible web for everyone of all human capabilities.

danielone on 7 Sep 2016

This will be available in the next release! Thanks @jmfrancois!

martijnrusschen on 12 Sep 2016

Hi all i want to select date from keyboard . how can i do it anyone any idea . if i type like 12/03/2019 then that particular date should be marked as selected.