React-day-picker: Navigate from DayPickerInput to DayPicker with the keyboard

[mxmul]

Hi! This an issue for the accessibility of the component: in this sandbox, try to use the DayPickerInput (i.e. selecting a day without manually typing it in) without touching your mouse: https://codesandbox.io/s/XDAE3x0W8

It's not currently possible, because hitting TAB always closes the overlay. Expected behavior would be that hitting TAB while on the input would move focus to the DayPicker, and that a date could be selected by navigating with the arrow keys.

[gpbl]

Expected behavior would be that hitting TAB while on the input would move focus to the DayPicker

Do you have some links explaining it should work this way? Someone was suggesting here the key navigation should happen by pressing the DOWN key. Maybe deciding the behavior should be left to the user, in this case https://github.com/gpbl/react-day-picker/pull/761 could be useful.

My opinion is that when bound with an input component it doesn't make sense to navigate the calendar via keyboard – just type the day into it. Otherwise, if you want to keep it accessibile via keyboard, it is better to skip the input field.

[mxmul]

Tab is a mostly personal preference, and I'm not sure if there is a standard. Navigating to the DayPicker with a DOWN press is good as well.

It's true that you can just type the date into the text field, but the experience is not as good. Using the datepicker directly ensures that you are entering a date in the expected format, that you only select an enabled day, etc... Being able to navigate to and use the widget with the keyboard is important to provide a good experience to those who can't use a mouse.

These are some of the resources I've been looking at:
https://www.w3.org/WAI/PF/HTML/wiki/Datepickers
https://axesslab.com/accessible-datepickers/

[gpbl]

Thanks for those resources, they are new :) I see all the example of an accessible date picker triggering the overlay using another button, instead of displaying it when focusing the field.

Anyway, I guess the best option here would be to open the overly when pressing the DOWN key.

[Kaandriambelo]

Do you have an example on how to use the focus() method to keep the calendar open when moving from the input field to the calendar ?

[wongcode]

I've come up with a temporary solution until the #761 is merged:

handleKeyDown(e) {
    const { keyCode } = e;
    if (keyCode === DIRECTIONS.TAB || keyCode === DIRECTIONS.DOWN) {
        setTimeout(() => {
            this.inputInstance.showDayPicker();
            this.pickerInstance.dayPicker.childNodes[0].focus();
        })
    }
}

render() {
    return (
        <DayPickerInput
            ref={(ref) => { this.inputInstance = ref}}
            dayPickerProps={{
                ref: (ref) => { this.pickerInstance = ref }
            }}
    );
}

[incyphe]

I've come up with a temporary solution until the #761 is merged:

handleKeyDown(e) {
  const { keyCode } = e;
  if (keyCode === DIRECTIONS.TAB || keyCode === DIRECTIONS.DOWN) {
      setTimeout(() => {
          this.inputInstance.showDayPicker();
          this.pickerInstance.dayPicker.childNodes[0].focus();
      })
  }
}

render() {
  return (
      <DayPickerInput
          ref={(ref) => { this.inputInstance = ref}}
          dayPickerProps={{
              ref: (ref) => { this.pickerInstance = ref }
          }}
  );
}

Has anyone able to get this interim fix to work in his/her code? working codesandbox would be awesome.

[wongcode]

I've come up with a temporary solution until the #761 is merged:

handleKeyDown(e) {
    const { keyCode } = e;
    if (keyCode === DIRECTIONS.TAB || keyCode === DIRECTIONS.DOWN) {
        setTimeout(() => {
            this.inputInstance.showDayPicker();
            this.pickerInstance.dayPicker.childNodes[0].focus();
        })
    }
}

render() {
    return (
        <DayPickerInput
            ref={(ref) => { this.inputInstance = ref}}
            dayPickerProps={{
                ref: (ref) => { this.pickerInstance = ref }
            }}
    );
}

Has anyone able to get this interim fix to work in his/her code? working codesandbox would be awesome.

https://codesandbox.io/s/romantic-mendeleev-frs06?fontsize=14

Not the most reliable solution with setTimeout, but hopefully this works for you.

[airtable-JayRansijn]

I don't think it should be a tab interaction, since that should focus the next input in a form, instead down arrow is the preferred way.

[niraimathidrupal]

I don't think it should be a tab interaction, since that should focus the next input in a form, instead down arrow is the preferred way.

It should be accessible i guess, on tab from input to calender and left right arrow and should go till first day then on tab it should hide and go to next field

[gpbl]

Thanks for your input!