From 2babd07061f740deac2cb438e361aaeac711d433 Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Wed, 12 Nov 2025 18:24:23 +0200 Subject: [PATCH 1/2] fix(ui5-date-picker): add correct tooltip when picker is opened --- packages/main/cypress/specs/DatePicker.cy.tsx | 100 ++++++++++++++++++ packages/main/src/DatePicker.ts | 5 + .../main/src/i18n/messagebundle.properties | 3 + 3 files changed, 108 insertions(+) diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx index 4a1f01602864..120221ec1ad4 100644 --- a/packages/main/cypress/specs/DatePicker.cy.tsx +++ b/packages/main/cypress/specs/DatePicker.cy.tsx @@ -1668,6 +1668,106 @@ describe("Date Picker Tests", () => { .ui5DatePickerGetInnerInput() .should("have.value", "0202-12-01"); }); + + it("DatePicker icon shows correct tooltip when closed", () => { + cy.mount(); + + cy.get("[ui5-date-picker]") + .as("datePicker") + .should("not.have.attr", "open"); + + cy.get("@datePicker") + .shadow() + .find("ui5-icon") + .should("have.attr", "accessible-name", "Open Picker"); + }); + + it("DatePicker icon shows correct tooltip when opened", () => { + cy.mount(); + + cy.get("[ui5-date-picker]") + .as("datePicker") + .ui5DatePickerValueHelpIconPress(); + + cy.get("@datePicker") + .should("have.attr", "open"); + + cy.get("@datePicker") + .shadow() + .find("ui5-icon") + .should("have.attr", "accessible-name", "Close Picker"); + }); + + 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 4ec85cc590c2..cd5634b60681 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -178,6 +178,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 From 38cc8fdd41d99b77c6db50d2d4b084c6b9340a89 Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Tue, 18 Nov 2025 16:56:36 +0200 Subject: [PATCH 2/2] fix(ui5-time-picker): remove test cases --- packages/main/cypress/specs/DatePicker.cy.tsx | 29 ------------------- 1 file changed, 29 deletions(-) diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx index 120221ec1ad4..d980ad66368e 100644 --- a/packages/main/cypress/specs/DatePicker.cy.tsx +++ b/packages/main/cypress/specs/DatePicker.cy.tsx @@ -1669,35 +1669,6 @@ describe("Date Picker Tests", () => { .should("have.value", "0202-12-01"); }); - it("DatePicker icon shows correct tooltip when closed", () => { - cy.mount(); - - cy.get("[ui5-date-picker]") - .as("datePicker") - .should("not.have.attr", "open"); - - cy.get("@datePicker") - .shadow() - .find("ui5-icon") - .should("have.attr", "accessible-name", "Open Picker"); - }); - - it("DatePicker icon shows correct tooltip when opened", () => { - cy.mount(); - - cy.get("[ui5-date-picker]") - .as("datePicker") - .ui5DatePickerValueHelpIconPress(); - - cy.get("@datePicker") - .should("have.attr", "open"); - - cy.get("@datePicker") - .shadow() - .find("ui5-icon") - .should("have.attr", "accessible-name", "Close Picker"); - }); - it("DatePicker icon tooltip changes when toggling picker", () => { cy.mount();