Skip to content

Add keyboard navigation (ArrowUp/ArrowDown/Enter) support for time-only pickers #6035

@asajjad2

Description

@asajjad2

Is your feature request related to a problem? Please describe.
Time-only pickers (showTimeSelectOnly={true}) are not keyboard accessible. ArrowUp/ArrowDown do nothing, and Enter doesn't commit the typed time. Users must use the mouse to adjust the time slider, which blocks keyboard-only and screen reader users.

For more context https://github.com/mitodl/hq/issues/9097

Describe the solution you'd like

  • ArrowUp/ArrowDown: When the time input is focused, these keys should increment/decrement the selected time by the configured timeIntervals (default 30 minutes), update the input value, and scroll the highlighted option into view in the dropdown.

  • Enter: When the time input is focused, Enter should commit the current typed value (if valid) or the currently highlighted option, close the dropdown, and trigger onChange with the selected time.

Describe alternatives you've considered
I've tried to intercept onKeyDown in the consuming app to parse the input, adjust the time, and call onChange manually. This duplicates logic, doesn't seem to work for the Enter key and requires DOM manipulation for scrolling.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions