diff --git a/packages/main/cypress/specs/TimePicker.cy.tsx b/packages/main/cypress/specs/TimePicker.cy.tsx
index 6849a81efbaf..c042fd10c60b 100644
--- a/packages/main/cypress/specs/TimePicker.cy.tsx
+++ b/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();
+
+ cy.get("[ui5-time-picker]")
+ .as("timePicker");
+
+ cy.get("@timePicker")
+ .should("not.have.attr", "open");
+
+ cy.get("@timePicker")
+ .shadow()
+ .find("ui5-icon")
+ .as("icon")
+ .should("have.attr", "accessible-name", "Open Picker");
+
+ cy.get("@timePicker")
+ .ui5TimePickerValueHelpIconPress();
+
+ cy.get("@timePicker")
+ .should("have.attr", "open");
+
+ cy.get("@icon")
+ .should("have.attr", "accessible-name", "Close Picker");
+
+ cy.get("@timePicker")
+ .ui5TimePickerValueHelpIconPress();
+
+ cy.get("@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();
+
+ cy.get("[ui5-time-picker]")
+ .as("timePicker")
+ .ui5TimePickerGetInnerInput()
+ .as("input")
+ .realClick()
+ .should("be.focused");
+
+ cy.get("@timePicker")
+ .shadow()
+ .find("ui5-icon")
+ .as("icon")
+ .should("have.attr", "accessible-name", "Open Picker");
+
+ cy.get("@input")
+ .realPress("F4");
+
+ cy.get("@timePicker")
+ .should("have.attr", "open");
+
+ cy.get("@icon")
+ .should("have.attr", "accessible-name", "Close Picker");
+
+ cy.get("@input")
+ .realPress(["Alt", "ArrowUp"]);
+
+ cy.get("@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();
diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts
index 4b48bf3e5940..a51b3463ad90 100644
--- a/packages/main/src/TimePicker.ts
+++ b/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) {
diff --git a/packages/main/src/TimePickerTemplate.tsx b/packages/main/src/TimePickerTemplate.tsx
index d48123e7ffdd..7232cbda8e4d 100644
--- a/packages/main/src/TimePickerTemplate.tsx
+++ b/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={{
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index ab1ece8c615c..a604970dcb00 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/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}.