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