From 7074a932436f0f1c115416966181365a6bbf8db2 Mon Sep 17 00:00:00 2001 From: CezarSTF Date: Wed, 1 Oct 2025 13:53:40 +0300 Subject: [PATCH] FORMS-18625: Desktop, RWD Tablet, RWD Mobile - Button is missing both a role and a name @sunnym @vavarshn --- .../resources/i18n/en.json | 6 ++ .../clientlibs/site/js/datepickerwidget.js | 62 +++++++++++++++++++ 2 files changed, 68 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..cc4b63ee9b 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 @@ -4,6 +4,12 @@ "FileNameInvalid" : "Do not attach files where filename starts with (.), contains \\ / : * ? \" < > | ; % $, or is a reserved keyword like nul, prn, con, lpt, or com.", "FileMimeTypeInvalid" : "File(s) ${0} are unsupported file types", "InternalFormSubmissionError" : "Encountered an internal error while submitting the form.", + "previousMonth" : "Previous month", + "nextMonth" : "Next month", + "previousYear" : "Previous year", + "nextYear" : "Next year", + "previousSetOfYears" : "Previous set of years", + "nextSetOfYears" : "Next set of years", "FileSizeZero" : "The uploaded file(s) ${0} are empty. Make sure you're uploading file(s) with content.", "type" : "Please enter a valid value.", "required" : "Please fill in this field.", 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..0e62f66374 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 @@ -218,6 +218,7 @@ if (typeof window.DatePickerWidget === 'undefined') { } }); this.prevNavWidthBtn = this.#dp.getElementsByClassName("dp-leftnav")[0]; + this.prevNavWidthBtn.setAttribute("role", "button"); this.prevNavWidthBtn.addEventListener("click", function (evnt) { if (self.view && self.#curInstance) { @@ -225,6 +226,7 @@ if (typeof window.DatePickerWidget === 'undefined') { } }); this.nextNavWidthBtn = this.#dp.getElementsByClassName("dp-rightnav")[0]; + this.nextNavWidthBtn.setAttribute("role", "button"); this.nextNavWidthBtn.addEventListener("click", function (evnt) { if (self.view && self.#curInstance) { @@ -232,6 +234,7 @@ if (typeof window.DatePickerWidget === 'undefined') { } }); this.caption = this.#dp.getElementsByClassName("dp-caption")[0]; + this.caption.setAttribute("role", "button"); this.caption.addEventListener("click", function (evnt) { if (self.view && self.#curInstance) { @@ -660,6 +663,40 @@ if (typeof window.DatePickerWidget === 'undefined') { this.view = nextView; this.caption.classList.toggle("disabled", !this.#viewAction[this.view].caption); + let ariaLabel = ""; + if (this.view === "Month") { + ariaLabel = this.#options.locale.months[this.currentMonth] + " " + this.currentYear; + this.prevNavWidthBtn.setAttribute( + "aria-label", + this.#options.locale.previousMonth || "Previous month" + ); + this.nextNavWidthBtn.setAttribute( + "aria-label", + this.#options.locale.nextMonth || "Next month" + ); + } else if (this.view === "Year") { + ariaLabel = this.currentYear; + this.prevNavWidthBtn.setAttribute( + "aria-label", + this.#options.locale.previousYear || "Previous year" + ); + this.nextNavWidthBtn.setAttribute( + "aria-label", + this.#options.locale.nextYear || "Next year" + ); + } else if (this.view === "Yearset") { + const startYear = this.currentYear - this.#options.yearsPerView / 2; + const endYear = startYear + this.#options.yearsPerView - 1; + ariaLabel = startYear + "-" + endYear; + this.prevNavWidthBtn.setAttribute( + "aria-label", + this.#options.locale.previousSetOfYears || "Previous set of years" + ); + this.nextNavWidthBtn.setAttribute( + "aria-label", + this.#options.locale.nextSetOfYears || "Next set of years" + ); + } this['$' + this.view.toLowerCase()].style.display = "block"; this["show" + this.view](); } @@ -1156,6 +1193,31 @@ if (typeof window.DatePickerWidget === 'undefined') { if (zero) { defaultOptions.locale.zero = zero; } + // Fetch navigation labels for aria-label attributes + var previousMonth = FormView.LanguageUtils.getTranslatedString(locale, "previousMonth"); + if (previousMonth) { + defaultOptions.locale.previousMonth = previousMonth; + } + var nextMonth = FormView.LanguageUtils.getTranslatedString(locale, "nextMonth"); + if (nextMonth) { + defaultOptions.locale.nextMonth = nextMonth; + } + var previousYear = FormView.LanguageUtils.getTranslatedString(locale, "previousYear"); + if (previousYear) { + defaultOptions.locale.previousYear = previousYear; + } + var nextYear = FormView.LanguageUtils.getTranslatedString(locale, "nextYear"); + if (nextYear) { + defaultOptions.locale.nextYear = nextYear; + } + var previousSetOfYears = FormView.LanguageUtils.getTranslatedString(locale, "previousSetOfYears"); + if (previousSetOfYears) { + defaultOptions.locale.previousSetOfYears = previousSetOfYears; + } + var nextSetOfYears = FormView.LanguageUtils.getTranslatedString(locale, "nextSetOfYears"); + if (nextSetOfYears) { + defaultOptions.locale.nextSetOfYears = nextSetOfYears; + } } #isEditValueOrDisplayValue(value) {