[a11y] DateRangeInput has limited keyboard operability

[ruthom-nz]

Description

DateTime's DateRangeInput currently only provides keyboard operability for selection of calendar dates, via the arrow keys. All other widgets displayed in its Popover cannot be operated via keyboard, violating WCAG SC 2.1.1 (Level A).

Expected behavior

The Popover is keyboard focusable as expected with a standard Combobox, allowing all widgets within the Popover to be focused and interacted with via keyboard.

From the WAI-ARIA Combobox Pattern:

When focus is in the combobox:

Down Arrow: If the popup is available, moves focus into the popup:
If the autocomplete behavior automatically selected a suggestion before Down Arrow was pressed, focus is placed on the suggestion following the automatically selected suggestion.
Otherwise, places focus on the first focusable element in the popup.

The WAI-ARIA Date Picker Combobox Example provides a more specific foundation for the keyboard behavior.

NB: this use of the Down Arrow key collides with the current DateRangeInput behavior ,where it selects a date in the next week without keyboard focus going to the Popover.

Current behavior

While one of the two input fields is focused, Down Arrow moves the selected calendar date in the Popover to the same day in the next week, the other 3 arrow keys behave similarly to move the selected date to an adjacent week or day.

Steps to reproduce

1. Create a vanilla date range input, <DateRangeInput/>.
2. Focus one of the input fields
3. Try pressing Down Arrow to move keyboard focus to the popup
   • Expected: focus moves inside the popup
   • Actual: focus remains on the input, the selected date in the popup moves to the same day in the next week. The popup header's calendar buttons to select year/month remain inaccessible
4. Add additional widgets to the date range input's popup by providing props:

<DateRangeInput
  shortcuts
  timePrecision='minute'
/>

5. Focus one of the input fields
6. Try any keyboard combination
7. Observe that the shortcuts menu and time picker within the popup remain inaccessible via keyboard

Proposed solution

The current arrow key behavior does provide good convenience of use, although it is non-standard for comboboxes. If the current behavior is kept alongside the addition of keyboard operability for the entire popup, then the popup should be focused using Alt+Down Arrow to avoid collision of the keyboard controls. In this case, the nonstandard keyboard controls should be documented for keyboard users, such as using a tooltip (e.g. "Arrow keys to select date, Alt+Down to select popup") and aria-describedby.

Otherwise, another option is entirely replacing the current keyboard behavior.

To provide complete keyboard operability and align with WAI-ARIA suggested behavior, allow the date range input's popup to be focused.

• Down Arrow or Alt+Down Arrow to focus the popup
• Tab and Shift+Tab to navigate between widgets within the popup
• Space and Enter to interact with widgets within the popup
• Esc to close the popup and return to the previously focused input field

[ruthom-nz]

Adjacent to issue #7699