From 8bfeff8e3a15c1a5d9b821f4a0c91594b0a80278 Mon Sep 17 00:00:00 2001 From: CezarSTF Date: Tue, 21 Oct 2025 11:14:31 +0300 Subject: [PATCH 1/4] FORMS-18686: Button: Button is missing both a role and a name @sunnym @vavarshn --- .../resources/i18n/en.json | 1 + .../v1/datepicker/clientlibs/site/js/datepickerwidget.js | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/resources/i18n/en.json b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/resources/i18n/en.json index 5587d80b82..e5a1a03831 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/resources/i18n/en.json +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/resources/i18n/en.json @@ -22,6 +22,7 @@ "accept" : "The specified file type not supported.", "defaultError" : "There is an error in the field", "clearText" : "Clear", + "openCalendarText" : "Open calendar", "calendarSymbols" : { "monthNames" : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], "abbrmonthNames" : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js index 0300afe7dd..c3997ee1bd 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js @@ -66,6 +66,7 @@ if (typeof window.DatePickerWidget === 'undefined') { months: ["January","February","March","April","May","June","July","August","September","October","November","December"], zero: "0", clearText: "Clear", + openCalendarText: "Open calendar", name: "en_US" }, format: "YYYY-MM-DD", @@ -311,6 +312,8 @@ if (typeof window.DatePickerWidget === 'undefined') { let calendarIcon = document.createElement("div"); calendarIcon.classList.add("cmp-adaptiveform-datepicker__calendar-icon"); + calendarIcon.setAttribute("role", "button"); + calendarIcon.setAttribute("aria-label", this.#options.locale.openCalendarText); widget.parentNode.insertBefore(calendarIcon, widget.nextSibling); @@ -1152,6 +1155,10 @@ if (typeof window.DatePickerWidget === 'undefined') { if (clearText) { defaultOptions.locale.clearText = clearText; } + var openCalendarText = FormView.LanguageUtils.getTranslatedString(locale, "openCalendarText"); + if (openCalendarText) { + defaultOptions.locale.openCalendarText = openCalendarText; + } var zero = FormView.LanguageUtils.getTranslatedString(locale, "0"); if (zero) { defaultOptions.locale.zero = zero; From 69d2f74c21979b1d51a80af5ecfd93040e77fc16 Mon Sep 17 00:00:00 2001 From: CezarSTF Date: Wed, 5 Nov 2025 12:48:09 +0200 Subject: [PATCH 2/4] FORMS-18686: added test cases --- .../specs/datepicker/datepicker.runtime.cy.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js b/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js index c740558007..0c196fa194 100644 --- a/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js +++ b/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js @@ -513,6 +513,20 @@ describe("Form Runtime with Date Picker", () => { }) }); }); + + it("calendar icon should have role='button' for accessibility", () => { + const [datePicker1, datePicker1FieldView] = Object.entries(formContainer._fields)[0]; + cy.get(`#${datePicker1}`).find(".cmp-adaptiveform-datepicker__calendar-icon") + .should("have.attr", "role", "button"); + }); + + it("calendar icon should have aria-label for screen readers", () => { + const [datePicker1, datePicker1FieldView] = Object.entries(formContainer._fields)[0]; + cy.get(`#${datePicker1}`).find(".cmp-adaptiveform-datepicker__calendar-icon") + .should("have.attr", "aria-label") + .and("not.be.empty"); + }); + it("Test dd/MM/yyyy format - verify July is highlighted for 03/07/2025", () => { // Test the datepicker component configured with dd/MM/yyyy format From b90e9cb524425776af22d1890da5011382e16d8a Mon Sep 17 00:00:00 2001 From: CezarSTF Date: Thu, 6 Nov 2025 13:44:57 +0200 Subject: [PATCH 3/4] FORMS-18686: refactoring test cases --- .../test-module/specs/datepicker/datepicker.runtime.cy.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js b/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js index 0c196fa194..8181401091 100644 --- a/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js +++ b/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js @@ -515,14 +515,14 @@ describe("Form Runtime with Date Picker", () => { }); it("calendar icon should have role='button' for accessibility", () => { - const [datePicker1, datePicker1FieldView] = Object.entries(formContainer._fields)[0]; - cy.get(`#${datePicker1}`).find(".cmp-adaptiveform-datepicker__calendar-icon") + const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[0]; + cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon") .should("have.attr", "role", "button"); }); it("calendar icon should have aria-label for screen readers", () => { - const [datePicker1, datePicker1FieldView] = Object.entries(formContainer._fields)[0]; - cy.get(`#${datePicker1}`).find(".cmp-adaptiveform-datepicker__calendar-icon") + const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[0]; + cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon") .should("have.attr", "aria-label") .and("not.be.empty"); }); From 72d27f066f876480722e3aa4e8099550a40c3a06 Mon Sep 17 00:00:00 2001 From: CezarSTF Date: Fri, 7 Nov 2025 13:04:27 +0200 Subject: [PATCH 4/4] tests refactoring --- .../specs/datepicker/datepicker.runtime.cy.js | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js b/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js index 8181401091..db02b109e9 100644 --- a/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js +++ b/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js @@ -410,6 +410,20 @@ describe("Form Runtime with Date Picker", () => { cy.get(".datetimepicker").should("not.be.visible"); }); + it("calendar icon should have role=button", () => { + const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[6]; + cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon") + .should("have.attr", "role", "button"); + }); + + it("calendar icon should have a non-empty aria-label", () => { + const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[6]; + cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon") + .invoke("attr", "aria-label") + .should("be.a", "string") + .and("not.be.empty"); + }); + it("should handle keyboard accessibility with custom display formats", () => { const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[6]; @@ -514,19 +528,6 @@ describe("Form Runtime with Date Picker", () => { }); }); - it("calendar icon should have role='button' for accessibility", () => { - const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[0]; - cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon") - .should("have.attr", "role", "button"); - }); - - it("calendar icon should have aria-label for screen readers", () => { - const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[0]; - cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon") - .should("have.attr", "aria-label") - .and("not.be.empty"); - }); - it("Test dd/MM/yyyy format - verify July is highlighted for 03/07/2025", () => { // Test the datepicker component configured with dd/MM/yyyy format