Skip to content

Resolve "Time selector for reminder editor #861m400j0"

James Jenkinson requested to merge 279-time-selector-for-reminder-editor into main

A11y

The component uses the spinbutton pattern, see here for the accessibility requirements.

Keyboard behavior

The user can focus on the individual time elements, and select via the up, down, home, and end keys

Mouse behavior

  • The user can scroll over the individual time elements to change the value1
  • The user can click on the greyed out values to fine-select

Touch behavior

The user can drag the individual time elements to change the value

Closes #279 (closed)

  1. This behavior is somewhat non-ideal, as the scroll distance makes the user scroll between ~3 values at a time, however changing this would involve altering the default scroll behavior, which I think is not a good idea. In the future we may want to re-think the behavior on desktop, especially as the greyed out values have (imo) low affordance that they are clickable. However this component was already complicated enough, so I left it as is

Merge request reports

Loading