DateRangePicker calendar cannot be opened by keyboard

[bennydtown]

🐛 Bug Report

The calendar button in the DateRangePicker has tabindex="-1", so you cannot navigate to it using the keyboard and there is no way to open the calendar control.

🤔 Expected Behavior

Tabbing past the date field inputs should focus the calendar button. The user could then activate the button to open the calendar. Once open, the calendar itself seems to work correctly with the keyboard.

😯 Current Behavior

Pressing tab from the last date input field bypasses the button and focuses on the next navigable item on the page.

💁 Possible Solution

Removing the tabindex property from the button should be all that is required.

🔦 Context

Without this feature, keyboard users must type in start and end dates longhand.

This is particularly burdensome if the component has minValue and/or maxValue defined, because those limits are only displayed inside the calendar. If the value violates those limits, the entire date range is marked as invalid. There is no indication which limit is violated or what the valid range is.

🧢 Your Company/Team

Adobe/Admin Console

[bennydtown]

I've been informed that there is an alternate key binding to open the calendar. On a mac, that's option + down arrow, which is non-standard.

[devongovett]

Alt + ArrowDown opens the calendar. This behavior matches the native <input type="date"> in Chrome: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

[bennydtown]

Ah, I didn't know that. So there is some precedent for that key binding. That said, <input type="date"> does generally still leave the calendar button tab-navigable. So it would be consistent to make the change I've requested.

[devongovett]

Hmm, how did you manage to tab to that? The calendar button is skipped in my version of chrome (v101)

[bennydtown]

Odd. I'm also on v101 (on the Mac), and the tab works for all the examples on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

[snowystinger]

Chiming in, I'm also unable to tab to the calendar button. Also on v101. I do not see any chrome flags for this.

[mischnic]

The icon is focusable for me just as shown in the GIF (also Mac and v101)

[majornista]

I agree that this is a problem. We should make the Calendar or Time button able to receive Tab focus the same as for the segments.

Another issue I can reproduce on macOS, Option+ArrowDown and Option+ArrowUp within the browser seem to PageDown and PageUp the web page the same as using fn+ArrowDown or fn+ArrowUp, and we seem to have a case where sometimes Option+ArrowDown on a DateField segment does not immediately stopPropagation and the Option+ArrowDown scrolls the browser instead.

This can be reproduced on https://react-spectrum.adobe.com/react-spectrum/DatePicker.html.

1. Open https://react-spectrum.adobe.com/react-spectrum/DatePicker.html#example
2. Tab to move focus to the first segment within the first DatePicker example.
3. Press Option+ArrowDown to expand the Calendar Popover.
4. Notice that the browser scrolls to the bottom of the page. This seems to happen on the first time the user tries to expand the Calendar.