diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx
index 4a1f01602864..d980ad66368e 100644
--- a/packages/main/cypress/specs/DatePicker.cy.tsx
+++ b/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();
+
+ 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();
+
+ 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");
+ });
});
diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts
index b3281a78c4d8..d638487f6dd5 100644
--- a/packages/main/src/DatePicker.ts
+++ b/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,
@@ -920,6 +921,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);
}
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index f5779d84beb6..ab1ece8c615c 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/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