fix(ui5-time-picker): Add interactive mode for the icon on mobile devices (#12500)

Author: Todor-ads

packages/main/src/TimePicker.ts

@@ -22,6 +22,7 @@ import {
 } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import IconMode from "./types/IconMode.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
 import {
 	isShow,
@@ -458,6 +459,14 @@ class TimePicker extends UI5Element implements IFormInputElement {
 		return this.hasValueStateText && !this._inputsPopover?.open;
 	}
 
+	/**
+	 * Defines whether the value help icon is hidden
+	 * @private
+	 */
+	get _iconMode() {
+		return isDesktop() ? IconMode.Decorative : IconMode.Interactive;
+	}
+
 	onTimeSelectionChange(e: CustomEvent<TimeSelectionChangeEventDetail>) {
 		this.tempValue = e.detail.value; // every time the user changes the time selection -> update tempValue
 	}

packages/main/src/TimePickerTemplate.tsx

@@ -39,6 +39,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 							name={timeEntryRequest}
 							tabindex={-1}
 							showTooltip={true}
+							mode={this._iconMode}
 							onClick={this._togglePicker}
 							class={{
 								"ui5-time-picker-input-icon-button": true,