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}.