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; 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..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]; @@ -513,6 +527,7 @@ describe("Form Runtime with Date Picker", () => { }) }); }); + it("Test dd/MM/yyyy format - verify July is highlighted for 03/07/2025", () => { // Test the datepicker component configured with dd/MM/yyyy format