Resolve "Time selector for reminder editor #861m400j0"
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)
-
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
↩