From 5585e85a36405ffe05f1a8b0f603c1e2a78b65f4 Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Wed, 12 Nov 2025 22:35:00 +0200 Subject: [PATCH 1/3] fix(ui5-time-picker): add tooltip to icon in input --- packages/main/cypress/specs/TimePicker.cy.tsx | 100 ++++++++++++++++++ packages/main/src/TimePicker.ts | 10 ++ packages/main/src/TimePickerTemplate.tsx | 1 + .../main/src/i18n/messagebundle.properties | 6 ++ 4 files changed, 117 insertions(+) diff --git a/packages/main/cypress/specs/TimePicker.cy.tsx b/packages/main/cypress/specs/TimePicker.cy.tsx index b2d96e1f399e..1ba5d70f7e69 100644 --- a/packages/main/cypress/specs/TimePicker.cy.tsx +++ b/packages/main/cypress/specs/TimePicker.cy.tsx @@ -543,4 +543,104 @@ describe("Validation inside a form", () => { cy.get("#timePicker:invalid") .should("not.exist", "Timepicker with correct formatted value should not have :invalid CSS class"); }); +}); + +describe("Icon Tooltip Tests", () => { + it("TimePicker icon shows correct tooltip when closed", () => { + cy.mount(); + + cy.get("[ui5-time-picker]") + .as("timePicker") + .should("not.have.attr", "open"); + + cy.get("@timePicker") + .shadow() + .find("ui5-icon") + .should("have.attr", "accessible-name", "Open Picker"); + }); + + it("TimePicker icon shows correct tooltip when opened", () => { + cy.mount(); + + cy.get("[ui5-time-picker]") + .as("timePicker") + .ui5TimePickerValueHelpIconPress(); + + cy.get("@timePicker") + .should("have.attr", "open"); + + cy.get("@timePicker") + .shadow() + .find("ui5-icon") + .should("have.attr", "accessible-name", "Close Picker"); + }); + + 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"); + }); }); \ No newline at end of file diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts index 723b42ea7299..cd68e71657e8 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 @@ -486,6 +488,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 8f0fc39e2dd9..fd4e26102858 100644 --- a/packages/main/src/TimePickerTemplate.tsx +++ b/packages/main/src/TimePickerTemplate.tsx @@ -39,6 +39,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 4ec85cc590c2..4059c0bc71d3 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -540,6 +540,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}. From b3411658b8ea0d218e32715061d77ec8da4dda31 Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Tue, 18 Nov 2025 16:52:37 +0200 Subject: [PATCH 2/3] fix(ui5-time-picker): remove test cases --- packages/main/cypress/specs/TimePicker.cy.tsx | 29 ------------------- 1 file changed, 29 deletions(-) diff --git a/packages/main/cypress/specs/TimePicker.cy.tsx b/packages/main/cypress/specs/TimePicker.cy.tsx index 1ba5d70f7e69..7ccbd480aa96 100644 --- a/packages/main/cypress/specs/TimePicker.cy.tsx +++ b/packages/main/cypress/specs/TimePicker.cy.tsx @@ -546,35 +546,6 @@ describe("Validation inside a form", () => { }); describe("Icon Tooltip Tests", () => { - it("TimePicker icon shows correct tooltip when closed", () => { - cy.mount(); - - cy.get("[ui5-time-picker]") - .as("timePicker") - .should("not.have.attr", "open"); - - cy.get("@timePicker") - .shadow() - .find("ui5-icon") - .should("have.attr", "accessible-name", "Open Picker"); - }); - - it("TimePicker icon shows correct tooltip when opened", () => { - cy.mount(); - - cy.get("[ui5-time-picker]") - .as("timePicker") - .ui5TimePickerValueHelpIconPress(); - - cy.get("@timePicker") - .should("have.attr", "open"); - - cy.get("@timePicker") - .shadow() - .find("ui5-icon") - .should("have.attr", "accessible-name", "Close Picker"); - }); - it("TimePicker icon tooltip changes when toggling picker", () => { cy.mount(); From c0919c3cce4fb822592bb41294b4008c9c9f8d27 Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Thu, 20 Nov 2025 17:36:18 +0200 Subject: [PATCH 3/3] fix(ui5-timepicker): fix test --- packages/main/cypress/specs/TimePicker.cy.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/main/cypress/specs/TimePicker.cy.tsx b/packages/main/cypress/specs/TimePicker.cy.tsx index 4e09117375d0..c042fd10c60b 100644 --- a/packages/main/cypress/specs/TimePicker.cy.tsx +++ b/packages/main/cypress/specs/TimePicker.cy.tsx @@ -613,6 +613,8 @@ describe("Icon Tooltip Tests", () => { cy.get("@icon") .should("have.attr", "accessible-name", "Open Picker"); + }); +}); describe("CSS Parts", () => { it("TimePicker exposes input CSS part through DateTimeInput", () => {