Timepicker

Implementation Notes and Requirements

A timepicker is used to select a single time. The component is using the combobox HTML structure and has the following markup requirements:

Desktop

• Add .slds-is-open to the element with .slds-dropdown-trigger to invoke the dropdown that contains the list of time options.
• The .slds-has-focus modifier class is required on the .slds-listbox__option element that has focus.
• The .slds-is-selected modifier class is required on the .slds-listbox__option element that has been selected.

Mobile

• When on mobile, we want to leverage the native timepicker by changing the input type from text to time
• When switching input type="text" to input type="time" for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.
  • On the element with the class slds-combobox, please remove role="combobox", aria-expanded, and aria-haspopup.
  • On the input that we just added type="time" too, please remove aria-controls, aria-autocomplete, and role="textbox".

Accessibility

Please follow the implementation guildelines found under Combobox