fix(ui5-date-picker): add correct tooltip when picker is opened (#12669)

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

fixes: #12616

Author: tsanislavgatev

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

@@ -1668,6 +1668,77 @@ describe("Date Picker Tests", () => {
 			.ui5DatePickerGetInnerInput()
 			.should("have.value", "0202-12-01");
 	});
+
+	it("DatePicker icon tooltip changes when toggling picker", () => {
+		cy.mount(<DatePicker />);
+
+		cy.get("[ui5-date-picker]")
+			.as("datePicker");
+
+		cy.get("@datePicker")
+			.should("not.have.attr", "open");
+
+		cy.get("@datePicker")
+			.shadow()
+			.find("ui5-icon")
+			.as("icon")
+			.should("have.attr", "accessible-name", "Open Picker");
+
+		cy.get("@datePicker")
+			.ui5DatePickerValueHelpIconPress();
+
+		cy.get("@datePicker")
+			.should("have.attr", "open");
+
+		cy.get("@icon")
+			.should("have.attr", "accessible-name", "Close Picker");
+
+		cy.get("@datePicker")
+			.ui5DatePickerValueHelpIconPress();
+
+		cy.get("@datePicker")
+			.should("not.have.attr", "open");
+
+		cy.get("@icon")
+			.should("have.attr", "accessible-name", "Open Picker");
+	});
+
+	it("DatePicker icon tooltip changes when using keyboard shortcuts", () => {
+		cy.mount(<DatePicker />);
+
+		cy.get("[ui5-date-picker]")
+			.as("datePicker")
+			.ui5DatePickerGetInnerInput()
+			.as("input")
+			.realClick()
+			.should("be.focused");
+
+		cy.get("@datePicker")
+			.shadow()
+			.find("ui5-icon")
+			.as("icon")
+			.should("have.attr", "accessible-name", "Open Picker");
+
+		cy.get("@input")
+			.realPress("F4");
+
+		cy.get("@datePicker")
+			.should("have.attr", "open");
+
+		cy.get("@icon")
+			.should("have.attr", "accessible-name", "Close Picker");
+
+		cy.get("@datePicker")
+			.shadow()
+			.find("ui5-calendar")
+			.realPress("Escape");
+
+		cy.get("@datePicker")
+			.should("not.have.attr", "open");
+
+		cy.get("@icon")
+			.should("have.attr", "accessible-name", "Open Picker");
+	});
 });
 
 

packages/main/src/DatePicker.ts

@@ -44,6 +44,7 @@ import "@ui5/webcomponents-icons/dist/appointment-2.js";
 
 import {
 	DATEPICKER_OPEN_ICON_TITLE,
+	DATEPICKER_OPEN_ICON_TITLE_OPENED,
 	DATEPICKER_DATE_DESCRIPTION,
 	DATETIME_COMPONENTS_PLACEHOLDER_PREFIX,
 	INPUT_SUGGESTIONS_TITLE,
@@ -921,6 +922,10 @@ class DatePicker extends DateComponentBase implements IFormInputElement {
 	}
 
 	get openIconTitle() {
+		if (this.open) {
+			return DatePicker.i18nBundle.getText(DATEPICKER_OPEN_ICON_TITLE_OPENED);
+		}
+
 		return DatePicker.i18nBundle.getText(DATEPICKER_OPEN_ICON_TITLE);
 	}
 

packages/main/src/i18n/messagebundle.properties

@@ -184,6 +184,9 @@ COLORPICKER_ALPHA=Alpha
 #XACT: DatePicker 'Open Picker' icon title
 DATEPICKER_OPEN_ICON_TITLE=Open Picker
 
+#XACT: DatePicker 'Open Picker' icon title when the picker is opened
+DATEPICKER_OPEN_ICON_TITLE_OPENED=Close Picker
+
 #XACT: Aria information for the Date Picker
 DATEPICKER_DATE_DESCRIPTION=Date Input