## Managing the Focus


Initial focus is on the selected time.


The time dropdown tab sequence is:  **hours** part, **minutes** part, **seconds** part, **Cancel** button, **Set** button, **Now** button (activated on Enter). The tab key is trapped in the popup.


Enhanced Mouse UX - when mouse is over a timelist - it gets the focus.

## Keyboard Shortcuts

### Actions applied to the input:

| Shortcut | Behavior |
| -------- | -------- |
| `Esc` | Closes the popup |
| `Alt/Opt(Mac) + Down` | Opens the popup |
| `Alt/Opt(Mac) + Up` | Closes the popup |
| `Up` | Increases the value of the time segment that is highlighted. |
| `Down` | Decreases the value of the time segment that is highlighted. |
| `Left` | Moves to previous time segment in the input. |
| `Right` | Moves to next time segment in the input. |
| `Backspace` | Deletes value of the time segment. |

### Actions applied to the time list:

| Shortcut | Behavior |
| -------- | -------- |
| `Esc` | Closes the popup |
| `Shift + Tab` or `Left` | Focuses previous carousel. |
| `Tab` or `Right` | Focuses next carousel. |
| `Down` | Selects next value in the carousel. |
| `Up` | Selects previous value in the carousel. |

### ActionSheet Popup


In adaptive mode, the popup element of the TimePicker has to implement the keyboard navigation specification for an ActionSheet component.

[ActionSheet  specification]({{actionsheet_kb_link}})