Versions Compared

Version Old Version 46 New Version 47
Changes made by

Asaf Ben-Oved

Hasitha Jayarathne

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The time picker may have an initial value, which the user can edit at any time.

States

State

Visual

 

Regular

Image Modified

 

Hover

Image Modified

 

Active

Image Removed
Image AddedImage Modified
Image Removed
Image Added
Image Removed
Image Added

Disabled

Image Modified

 

Read-Only

Time Picker.pngImage Added

Error

Image Modified

 

Warning

Image Modified

 

Focused

Image ModifiedImage Modified

Image Modified

Image Modified

Focused, Hover

Image Modified

 

Focused, Active

Image Modified

 

Focused, Disabled

Image Modified

 

Interaction

The time can be set either via direct input or by using the controls in the time picker menu. Additional keyboard interactions can be found under the Focus management section below.

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Keyboard

Time picker field

Time picker menu

Image ModifiedImage Modified

Tab

  • Navigates to the next input section.

  • When on the last input section, navigates to the next component.

Navigates between the different sections in a cyclical order:

  • Hours.

  • Minutes.

  • AM/PM.

Shift + Tab

  • Navigates to the previous input section.

  • When on the first input section, navigates to the previous component.

Reverses the order of navigation described for Tab.

Space

Opens the time picker menu.

  • Hours - N/A

  • Minutes - N/A

  • AM/PM - toggles between the values.

Enter

Applies the time.

  • Applies the time.

  • Closes the menu.

Esc

N/A

Closes the menu and returns the focus to the field, without applying any changes.

Arrows

  • Up - Increases the highlighted value.

  • Down - Decreases the highlighted value.

  • Holding down the up/down keys will scroll continuously.

  • Right/Left - Moves the input highlight accordingly.

  • Up - Increases the highlighted value for the focused section.

  • Down - Decreases the highlighted value for the focused section.

  • Holding down the up/down keys will scroll continuously.

  • Right/Left - Moves the focused section accordingly.

  • Up/Down changes between AM/PM

Mouse

Time picker field

Time picker menu

Right Click

Set Focus state on field

Set Regular state on component

Design

Zeplin Link

Thumbnail

https://zpl.io/adOXdRV

Image Modified

Code

...