fix(ui5-time-picker): add tooltip to icon in input (#12671)

Adding tooltip to Icon button in the input. Using "Open Picker" when closed and "Close Picker" when opened.

related to: #12616

Author: tsanislavgatev

packages/main/cypress/specs/TimePicker.cy.tsx

@@ -545,6 +545,77 @@ describe("Validation inside a form", () => {
 	});
 });
 
+describe("Icon Tooltip Tests", () => {
+	it("TimePicker icon tooltip changes when toggling picker", () => {
+		cy.mount(<TimePicker />);
+
+		cy.get<TimePicker>("[ui5-time-picker]")
+			.as("timePicker");
+
+		cy.get<TimePicker>("@timePicker")
+			.should("not.have.attr", "open");
+
+		cy.get<TimePicker>("@timePicker")
+			.shadow()
+			.find("ui5-icon")
+			.as("icon")
+			.should("have.attr", "accessible-name", "Open Picker");
+
+		cy.get<TimePicker>("@timePicker")
+			.ui5TimePickerValueHelpIconPress();
+
+		cy.get<TimePicker>("@timePicker")
+			.should("have.attr", "open");
+
+		cy.get("@icon")
+			.should("have.attr", "accessible-name", "Close Picker");
+
+		cy.get<TimePicker>("@timePicker")
+			.ui5TimePickerValueHelpIconPress();
+
+		cy.get<TimePicker>("@timePicker")
+			.should("not.have.attr", "open");
+
+		cy.get("@icon")
+			.should("have.attr", "accessible-name", "Open Picker");
+	});
+
+	it("TimePicker icon tooltip changes when using keyboard shortcuts", () => {
+		cy.mount(<TimePicker />);
+
+		cy.get<TimePicker>("[ui5-time-picker]")
+			.as("timePicker")
+			.ui5TimePickerGetInnerInput()
+			.as("input")
+			.realClick()
+			.should("be.focused");
+
+		cy.get<TimePicker>("@timePicker")
+			.shadow()
+			.find("ui5-icon")
+			.as("icon")
+			.should("have.attr", "accessible-name", "Open Picker");
+
+		cy.get("@input")
+			.realPress("F4");
+
+		cy.get<TimePicker>("@timePicker")
+			.should("have.attr", "open");
+
+		cy.get("@icon")
+			.should("have.attr", "accessible-name", "Close Picker");
+
+		cy.get("@input")
+			.realPress(["Alt", "ArrowUp"]);
+
+		cy.get<TimePicker>("@timePicker")
+			.should("not.have.attr", "open");
+
+		cy.get("@icon")
+			.should("have.attr", "accessible-name", "Open Picker");
+	});
+});
+
 describe("CSS Parts", () => {
 	it("TimePicker exposes input CSS part through DateTimeInput", () => {
 		cy.mount(<TimePicker />);

packages/main/src/TimePicker.ts

@@ -59,6 +59,8 @@ import {
 	VALUE_STATE_WARNING,
 	TIMEPICKER_VALUE_MISSING,
 	TIMEPICKER_PATTERN_MISSMATCH,
+	TIMEPICKER_OPEN_ICON_TITLE_OPENED,
+	TIMEPICKER_OPEN_ICON_TITLE,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -487,6 +489,14 @@ class TimePicker extends UI5Element implements IFormInputElement {
 		this.tempValue = e.detail.value; // every time the user changes the time selection -> update tempValue
 	}
 
+	get openIconTitle() {
+		if (this.open) {
+			return TimePicker.i18nBundle.getText(TIMEPICKER_OPEN_ICON_TITLE_OPENED);
+		}
+
+		return TimePicker.i18nBundle.getText(TIMEPICKER_OPEN_ICON_TITLE);
+	}
+
 	_togglePicker() {
 		this.open = !this.open;
 		if (this._isMobileDevice) {

packages/main/src/TimePickerTemplate.tsx

@@ -40,6 +40,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 							name={timeEntryRequest}
 							tabindex={-1}
 							showTooltip={true}
+							accessibleName={this.openIconTitle}
 							mode={this._iconMode}
 							onClick={this._togglePicker}
 							class={{

packages/main/src/i18n/messagebundle.properties

@@ -549,6 +549,12 @@ TIMEPICKER_INPUTS_ENTER_MINUTES=Please enter minutes
 #XACT: Time Picker Inputs tooltip/aria-label for Seconds input
 TIMEPICKER_INPUTS_ENTER_SECONDS=Please enter seconds
 
+#XACT: Time Picker 'Open Picker' icon title
+TIMEPICKER_OPEN_ICON_TITLE=Open Picker
+
+#XACT: Time Picker 'Open Picker' icon title when the picker is opened
+TIMEPICKER_OPEN_ICON_TITLE_OPENED=Close Picker
+
 TIMEPICKER_VALUE_MISSING=Fill in the time value in the format: {0}.
 
 TIMEPICKER_PATTERN_MISSMATCH=This format is not supported. Fill in the time value in the format: {0}.