From 1c21a5d12a33334ab1229a39813ab87af9bef609 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Fri, 31 Jan 2025 17:03:28 +0200 Subject: [PATCH 1/6] fix(ui5-calendar): autofocus on render --- packages/main/src/Calendar.ts | 15 --------------- packages/main/src/DayPicker.ts | 8 -------- packages/main/test/specs/DatePicker.spec.js | 8 ++++---- 3 files changed, 4 insertions(+), 27 deletions(-) diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index a362831dd106..d0859cfe66ec 100644 --- a/packages/main/src/Calendar.ts +++ b/packages/main/src/Calendar.ts @@ -434,7 +434,6 @@ class Calendar extends CalendarPart { if (defaultTypes.includes(this._selectedItemType)) { this._selectedItemType = "None"; // In order to avoid filtering of default types } - this._currentPickerDOM._autoFocus = false; } /** @@ -500,7 +499,6 @@ class Calendar extends CalendarPart { } showMonth() { - this._currentPickerDOM._autoFocus = false; this._currentPicker = "month"; } @@ -513,7 +511,6 @@ class Calendar extends CalendarPart { } showYear() { - this._currentPickerDOM._autoFocus = false; this._currentPicker = "year"; } @@ -527,10 +524,6 @@ class Calendar extends CalendarPart { */ onHeaderPreviousPress() { this._currentPickerDOM._showPreviousPage(); - - if (this.calendarLegend) { - this._currentPickerDOM._autoFocus = true; - } } /** @@ -538,10 +531,6 @@ class Calendar extends CalendarPart { */ onHeaderNextPress() { this._currentPickerDOM._showNextPage(); - - if (this.calendarLegend) { - this._currentPickerDOM._autoFocus = true; - } } _setSecondaryCalendarTypeButtonText() { @@ -634,8 +623,6 @@ class Calendar extends CalendarPart { } else { this._fireEventAndUpdateSelectedDates(e.detail.dates); } - - this._currentPickerDOM._autoFocus = true; } onSelectedYearChange(e: CustomEvent) { @@ -648,8 +635,6 @@ class Calendar extends CalendarPart { } else { this._fireEventAndUpdateSelectedDates(e.detail.dates); } - - this._currentPickerDOM._autoFocus = true; } onNavigate(e: CustomEvent) { diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index ac3f4bca945d..5bd7b9406878 100644 --- a/packages/main/src/DayPicker.ts +++ b/packages/main/src/DayPicker.ts @@ -404,14 +404,6 @@ class DayPicker extends CalendarPart implements ICalendarPicker { } } - _onfocusin() { - this._autoFocus = true; - } - - _onfocusout() { - this._autoFocus = false; - } - /** * Tells if the day is selected (dark blue). * @param timestamp diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js index 23e2a2894bb5..10be66837eea 100644 --- a/packages/main/test/specs/DatePicker.spec.js +++ b/packages/main/test/specs/DatePicker.spec.js @@ -1284,9 +1284,9 @@ describe("Date Picker Tests", () => { assert.ok(await monthPicker.getAttribute("hidden")); assert.notOk(await yearPicker.getAttribute("hidden")); - const timestamp_2014 = 1388534400; - const calendarDate_2014 = await datepicker.getPickerYear(timestamp_2014); - await calendarDate_2014.click(); + const timestamp_2015 = 1420070400; + const calendarDate_2015 = await datepicker.getPickerYear(timestamp_2015); + await calendarDate_2015.click(); assert.isFalse(await datepicker.isPickerOpen(), "picker is closed after year selection"); }); @@ -1414,7 +1414,7 @@ describe("Date Picker Tests", () => { }); describe("Legacy date customization", () => { - it.only("Customization of legacy dates in Islamic calendar", async () => { + it("Customization of legacy dates in Islamic calendar", async () => { // According to the Islamic calendar, Rab. I 9, 1446 AH should be displayed on Thursday, // but it needs to be configured using the legacyDateCalendarCustomizing setting. datepicker.page = "test/pages/DatePicker_legacy_test_page.html"; From 46c00ccd90a7436d498c0db2903d0c6a17b1e41b Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Fri, 31 Jan 2025 18:51:20 +0200 Subject: [PATCH 2/6] chore: add missing files --- packages/main/src/DayPickerTemplate.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/main/src/DayPickerTemplate.tsx b/packages/main/src/DayPickerTemplate.tsx index ade2d29cee59..a49b22901b8a 100644 --- a/packages/main/src/DayPickerTemplate.tsx +++ b/packages/main/src/DayPickerTemplate.tsx @@ -15,8 +15,6 @@ export default function DayPickerTemplate(this: DayPicker) { onKeyUp={this._onkeyup} onClick={this._onclick} onMouseOver={this._onmouseover} - onFocusIn={this._onfocusin} - onFocusOut={this._onfocusout} >
From eada9290ff7bbb72dd1bd3a5a22fdb8f772ae53e Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Fri, 31 Jan 2025 18:52:02 +0200 Subject: [PATCH 3/6] chore: clean --- packages/main/src/Calendar.ts | 1 - packages/main/src/DayPicker.ts | 6 ------ 2 files changed, 7 deletions(-) diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index d0859cfe66ec..159603a36025 100644 --- a/packages/main/src/Calendar.ts +++ b/packages/main/src/Calendar.ts @@ -52,7 +52,6 @@ interface ICalendarPicker { _showNextPage: () => void, _hasPreviousPage: () => boolean, _hasNextPage: () => boolean, - _autoFocus?: boolean, _firstYear?: number, _lastYear?: number, } diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index 5bd7b9406878..e8036acaa2a1 100644 --- a/packages/main/src/DayPicker.ts +++ b/packages/main/src/DayPicker.ts @@ -190,8 +190,6 @@ class DayPicker extends CalendarPart implements ICalendarPicker { @property({ type: Array }) specialCalendarDates: Array = []; - _autoFocus?: boolean; - @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; @@ -393,10 +391,6 @@ class DayPicker extends CalendarPart implements ICalendarPicker { } onAfterRendering() { - if (this._autoFocus && !this._hidden) { - this.focus(); - } - const focusedDay = this.shadowRoot!.querySelector("[data-sap-focus-ref]"); if (focusedDay && document.activeElement !== focusedDay && this._specialCalendarDates.length === 0) { From c35fcd800f81a4dfd092b346b1e1193f9bc98d28 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Mon, 3 Feb 2025 09:59:23 +0200 Subject: [PATCH 4/6] chore: fix test --- packages/main/test/specs/DatePicker.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js index 10be66837eea..c7698bcc01ed 100644 --- a/packages/main/test/specs/DatePicker.spec.js +++ b/packages/main/test/specs/DatePicker.spec.js @@ -955,9 +955,9 @@ describe("Date Picker Tests", () => { it("DayPiker day number attribute", async () => { await browser.url(`test/pages/DatePicker_test_page.html?sap-ui-language=en`); + datepicker.id = "#dp13"; const root = await datepicker.getRoot(); await root.setAttribute("primary-calendar-type", "Gregorian"); - datepicker.id = "#dp13"; await datepicker.openPicker(); await root.keys("May 3, 2100"); await root.keys("Enter"); @@ -979,9 +979,9 @@ describe("Date Picker Tests", () => { it("DatePicker dates and week number", async () => { await browser.url(`test/pages/DatePicker_test_page.html?sap-ui-language=en`); + datepicker.id = "#dp13"; const root = await datepicker.getRoot(); await root.setAttribute("primary-calendar-type", "Gregorian"); - datepicker.id = "#dp13"; const input = await datepicker.getInput(); await input.click(); From 10e1fa684c7b3030f48c775854a5397aca1dd8e5 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Mon, 3 Feb 2025 10:58:33 +0200 Subject: [PATCH 5/6] chore: migrate failing test to cypress --- packages/main/cypress/specs/DatePicker.cy.tsx | 68 +++++++++++++++++++ packages/main/test/specs/DatePicker.spec.js | 22 ------ 2 files changed, 68 insertions(+), 22 deletions(-) create mode 100644 packages/main/cypress/specs/DatePicker.cy.tsx diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx new file mode 100644 index 000000000000..b7ea945cd7de --- /dev/null +++ b/packages/main/cypress/specs/DatePicker.cy.tsx @@ -0,0 +1,68 @@ +import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js"; +import DatePicker from "../../src/DatePicker.js"; +import { resetConfiguration } from "@ui5/webcomponents-base/dist/config/ConfigurationReset.js"; + +describe("Date Picker Tests", () => { + after(() => { + resetConfiguration(); + }); + + it("DatePicker dates and week number", () => { + cy.wrap({ setLanguage }) + .invoke("setLanguage", "en"); + + cy.mount(); + + cy.get("[ui5-date-picker]") + .realClick(); + + cy.get("[ui5-date-picker]") + .should("be.focused"); + + cy.realType("May 3, 2100"); + + cy.realPress("Enter"); + + cy.get("[ui5-date-picker]") + .should("have.value", "May 3, 2100"); + + cy.get("[ui5-date-picker]") + .invoke("prop", "open", true); + + cy.get("[ui5-date-picker]") + .shadow() + .find("[ui5-responsive-popover]") + .should($rp => { + expect($rp.is(":popover-open")).to.be.true; + expect($rp.width()).to.not.equal(0); + expect($rp.height()).to.not.equal(0); + }); + + cy.get("[ui5-date-picker]") + .shadow() + .find("[ui5-calendar]") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find(".ui5-dp-root .ui5-dp-content > div") + .eq(2) + .find("div") + .as("rowItems"); + + cy.get("@rowItems") + .eq(0) + .should("have.attr", "aria-label", "Calendar Week 19"); + + cy.get("@rowItems") + .eq(1) + .should("have.attr", "aria-label", "Non-Working Day May 2, 2100"); + + cy.get("@rowItems") + .eq(2) + .should("have.attr", "aria-label", "May 3, 2100"); + + cy.get("@rowItems") + .eq(3) + .should("have.attr", "aria-label", "May 4, 2100"); + }); +}); diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js index c7698bcc01ed..214d6f404ec6 100644 --- a/packages/main/test/specs/DatePicker.spec.js +++ b/packages/main/test/specs/DatePicker.spec.js @@ -977,28 +977,6 @@ describe("Date Picker Tests", () => { await datepicker.closePicker(); }); - it("DatePicker dates and week number", async () => { - await browser.url(`test/pages/DatePicker_test_page.html?sap-ui-language=en`); - datepicker.id = "#dp13"; - const root = await datepicker.getRoot(); - await root.setAttribute("primary-calendar-type", "Gregorian"); - - const input = await datepicker.getInput(); - await input.click(); - await browser.keys("May 3, 2100"); - await browser.keys("Enter"); - // open picker after accepting the date - await datepicker.openPicker(); - - const data = Array.from(await datepicker.getDayPickerDatesRow(2)); - assert.strictEqual(await data[0].getAttribute("aria-label"), "Calendar Week 19", "First columnheader have Week number aria-label"); - assert.strictEqual(await data[1].getAttribute("aria-label"), "Non-Working Day May 2, 2100", "Each date have the full date's info in Month Date, Year in aria-label"); - assert.strictEqual(await data[2].getAttribute("aria-label"), "May 3, 2100", "Each date have the full date's info in Month Date, Year in aria-label"); - assert.strictEqual(await data[3].getAttribute("aria-label"), "May 4, 2100", "Each date have the full date's info in Month Date, Year in aria-label"); - - await datepicker.closePicker(); - }); - it("Tests aria-label", async () => { const EXPECTED_ARIA_LABEL = "Hello World"; From 6117a1e034a65f3e7f92b9b386b4aad6655db221 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Mon, 3 Feb 2025 14:05:17 +0200 Subject: [PATCH 6/6] chore: fix tests --- packages/main/cypress/specs/DatePicker.cy.tsx | 68 ------------------- packages/main/test/specs/DatePicker.spec.js | 22 ++++++ 2 files changed, 22 insertions(+), 68 deletions(-) delete mode 100644 packages/main/cypress/specs/DatePicker.cy.tsx diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx deleted file mode 100644 index b7ea945cd7de..000000000000 --- a/packages/main/cypress/specs/DatePicker.cy.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js"; -import DatePicker from "../../src/DatePicker.js"; -import { resetConfiguration } from "@ui5/webcomponents-base/dist/config/ConfigurationReset.js"; - -describe("Date Picker Tests", () => { - after(() => { - resetConfiguration(); - }); - - it("DatePicker dates and week number", () => { - cy.wrap({ setLanguage }) - .invoke("setLanguage", "en"); - - cy.mount(); - - cy.get("[ui5-date-picker]") - .realClick(); - - cy.get("[ui5-date-picker]") - .should("be.focused"); - - cy.realType("May 3, 2100"); - - cy.realPress("Enter"); - - cy.get("[ui5-date-picker]") - .should("have.value", "May 3, 2100"); - - cy.get("[ui5-date-picker]") - .invoke("prop", "open", true); - - cy.get("[ui5-date-picker]") - .shadow() - .find("[ui5-responsive-popover]") - .should($rp => { - expect($rp.is(":popover-open")).to.be.true; - expect($rp.width()).to.not.equal(0); - expect($rp.height()).to.not.equal(0); - }); - - cy.get("[ui5-date-picker]") - .shadow() - .find("[ui5-calendar]") - .shadow() - .find("[ui5-daypicker]") - .shadow() - .find(".ui5-dp-root .ui5-dp-content > div") - .eq(2) - .find("div") - .as("rowItems"); - - cy.get("@rowItems") - .eq(0) - .should("have.attr", "aria-label", "Calendar Week 19"); - - cy.get("@rowItems") - .eq(1) - .should("have.attr", "aria-label", "Non-Working Day May 2, 2100"); - - cy.get("@rowItems") - .eq(2) - .should("have.attr", "aria-label", "May 3, 2100"); - - cy.get("@rowItems") - .eq(3) - .should("have.attr", "aria-label", "May 4, 2100"); - }); -}); diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js index 214d6f404ec6..86777824f452 100644 --- a/packages/main/test/specs/DatePicker.spec.js +++ b/packages/main/test/specs/DatePicker.spec.js @@ -977,6 +977,28 @@ describe("Date Picker Tests", () => { await datepicker.closePicker(); }); + it("DatePicker dates and week number", async () => { + await browser.url(`test/pages/DatePicker_test_page.html?sap-ui-language=en`); + const root = await datepicker.getRoot(); + await root.setAttribute("primary-calendar-type", "Gregorian"); + datepicker.id = "#dp13"; + + const input = await datepicker.getInput(); + await input.click(); + await browser.keys("May 3, 2100"); + await browser.keys("Enter"); + // open picker after accepting the date + await datepicker.openPicker(); + + const data = Array.from(await datepicker.getDayPickerDatesRow(2)); + assert.strictEqual(await data[0].getAttribute("aria-label"), "Calendar Week 19", "First columnheader have Week number aria-label"); + assert.strictEqual(await data[1].getAttribute("aria-label"), "May 2, 2100 Non-Working Day ", "Each date have the full date's info in Month Date, Year in aria-label"); + assert.strictEqual(await data[2].getAttribute("aria-label"), "May 3, 2100 ", "Each date have the full date's info in Month Date, Year in aria-label"); + assert.strictEqual(await data[3].getAttribute("aria-label"), "May 4, 2100 ", "Each date have the full date's info in Month Date, Year in aria-label"); + + await datepicker.closePicker(); + }); + it("Tests aria-label", async () => { const EXPECTED_ARIA_LABEL = "Hello World";