[FORMS-27260] Removing datepicker v2 and updating a11y fixes in v1

bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/form/FormConstants.java

@@ -56,9 +56,6 @@ private FormConstants() {
     /** The resource type for date picker v1 */
     public static final String RT_FD_FORM_DATE_PICKER_V1 = RT_FD_FORM_PREFIX + "datepicker/v1/datepicker";
 
-    /** The resource type for date picker v2 */
-    public static final String RT_FD_FORM_DATE_PICKER_V2 = RT_FD_FORM_PREFIX + "datepicker/v2/datepicker";
-
     /** The resource type for number input v1 */
     public static final String RT_FD_FORM_NUMBER_INPUT_V1 = RT_FD_FORM_PREFIX + "numberinput/v1/numberinput";
 

bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/DatePickerImpl.java

@@ -44,10 +44,7 @@
     adaptables = { SlingHttpServletRequest.class, Resource.class },
     adapters = { DatePicker.class,
         ComponentExporter.class },
-    resourceType = {
-        FormConstants.RT_FD_FORM_DATE_PICKER_V1,
-        FormConstants.RT_FD_FORM_DATE_PICKER_V2
-    })
+    resourceType = { FormConstants.RT_FD_FORM_DATE_PICKER_V1 })
 @Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)
 public class DatePickerImpl extends AbstractFieldImpl implements DatePicker {
 

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/clientlibs/custom-forms-components-runtime-all/.content.xml

@@ -5,4 +5,4 @@
     cssProcessor="[default:none,min:none]"
     jsProcessor="[default:none,min:none]"
     categories="[core.forms.components.it.runtime.all]"
-    embed="[core.forms.components.runtime.base,core.forms.components.it.container.v1.runtime,core.forms.components.datePicker.v1.runtime,core.forms.components.datePicker.v2.runtime,core.forms.components.textinput.v1.runtime,core.forms.components.numberinput.v1.runtime,core.forms.components.panelcontainer.v1.runtime,core.forms.components.radiobutton.v1.runtime,core.forms.components.text.v1.runtime,core.forms.components.checkboxgroup.v1.runtime,core.forms.components.button.v1.runtime,core.forms.components.image.v1.runtime,core.forms.components.dropdown.v1.runtime,core.forms.components.fileinput.v2.runtime,core.forms.components.accordion.v1.runtime,core.forms.components.tabs.v1.runtime,core.forms.components.wizard.v1.runtime,core.forms.components.verticaltabs.v1.runtime,core.forms.components.recaptcha.v1.runtime,core.forms.components.checkbox.v1.runtime,core.forms.components.fragment.v1.runtime,core.forms.components.switch.v1.runtime,core.forms.components.termsandconditions.v1.runtime, core.forms.components.it.textinput.v1.runtime, core.forms.components.hcaptcha.v1.runtime,  core.forms.components.turnstile.v1.runtime]"/>
+    embed="[core.forms.components.runtime.base,core.forms.components.it.container.v1.runtime,core.forms.components.datePicker.v1.runtime,core.forms.components.textinput.v1.runtime,core.forms.components.numberinput.v1.runtime,core.forms.components.panelcontainer.v1.runtime,core.forms.components.radiobutton.v1.runtime,core.forms.components.text.v1.runtime,core.forms.components.checkboxgroup.v1.runtime,core.forms.components.button.v1.runtime,core.forms.components.image.v1.runtime,core.forms.components.dropdown.v1.runtime,core.forms.components.fileinput.v2.runtime,core.forms.components.accordion.v1.runtime,core.forms.components.tabs.v1.runtime,core.forms.components.wizard.v1.runtime,core.forms.components.verticaltabs.v1.runtime,core.forms.components.recaptcha.v1.runtime,core.forms.components.checkbox.v1.runtime,core.forms.components.fragment.v1.runtime,core.forms.components.switch.v1.runtime,core.forms.components.termsandconditions.v1.runtime, core.forms.components.it.textinput.v1.runtime, core.forms.components.hcaptcha.v1.runtime,  core.forms.components.turnstile.v1.runtime]"/>

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",
@@ -218,20 +219,23 @@ 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) {
               self.#adjustDate(-1, self.view, false)
             }
           });
       this.nextNavWidthBtn = this.#dp.getElementsByClassName("dp-rightnav")[0];
+      this.nextNavWidthBtn.setAttribute("role", "button");
       this.nextNavWidthBtn.addEventListener("click",
           function (evnt) {
             if (self.view && self.#curInstance) {
               self.#adjustDate(1, self.view, false)
             }
           });
       this.caption = this.#dp.getElementsByClassName("dp-caption")[0];
+      this.caption.setAttribute("role", "button");
       this.caption.id = "dp-caption";
       this.caption.addEventListener("click",
           function (evnt) {
@@ -318,6 +322,9 @@ if (typeof window.DatePickerWidget === 'undefined') {
         if (this.#keyboardAccessibility) {
           calendarIcon.setAttribute("tabindex", 0);
         }
+        // Accessibility attributes for calendar icon button
+        calendarIcon.setAttribute("role", "button");
+        calendarIcon.setAttribute("aria-label", this.#options?.locale?.openCalendarText || "Open calendar");
         calendarIcon.addEventListener(this.#getEvent(), function (evnt) {
           self._iconClicked = true;
           widget.click();
@@ -560,7 +567,6 @@ if (typeof window.DatePickerWidget === 'undefined') {
         this.#focusedOnLi = false;
         DatePickerWidget.#visible = true;
         this.#position();
-
         // Add document touch listener for mobile to close datepicker when tapping outside
         if (this.#touchSupported && !this.#documentTouchListener) {
           this.#documentTouchListener = (evt) => {
@@ -570,7 +576,6 @@ if (typeof window.DatePickerWidget === 'undefined') {
           };
           document.addEventListener("touchstart", this.#documentTouchListener, false);
         }
-
         if (this.#options.showCalendarIcon) {
           this.#curInstance.$field.setAttribute('readonly', true);    // when the datepicker is active, deactivate the field
         }
@@ -659,8 +664,44 @@ if (typeof window.DatePickerWidget === 'undefined') {
           this['$' + this.view.toLowerCase()].style.display = "none";
         }
         this.view = nextView;
-        this.caption.classList.toggle("disabled",
-            !this.#viewAction[this.view].caption);
+        let captionDisabled = !this.#viewAction[this.view].caption;
+        this.caption.classList.toggle("disabled", captionDisabled);
+        this.caption.setAttribute("aria-disabled", captionDisabled.toString());
+        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.caption.setAttribute("aria-label", ariaLabel.toString());
         this['$' + this.view.toLowerCase()].style.display = "block";
         this["show" + this.view]();
       }
@@ -1155,10 +1196,38 @@ 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;
         }
+        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) {