Merge pull request #1663 from adobe/ens83070/FORMS-20980

FORMS-20980: [SLA3] Keyboard Accessibility Broken on Date Picker with Custom Display Format (AEM Forms 6.5 SP21 – Core Components 1.1.62) @sunnym @vavarshn

Author: CezarSTF

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js

@@ -306,6 +306,9 @@ if (typeof window.DatePickerWidget === 'undefined') {
       widget.onblur = deactivateField;
 
       if (options.showCalendarIcon) {
+        let existingCalendarIcons = widget.parentNode.querySelectorAll('.cmp-adaptiveform-datepicker__calendar-icon');
+        existingCalendarIcons.forEach(icon => icon.remove());
+
         let calendarIcon = document.createElement("div");
         calendarIcon.classList.add("cmp-adaptiveform-datepicker__calendar-icon");
 
@@ -320,6 +323,9 @@ if (typeof window.DatePickerWidget === 'undefined') {
         });
         calendarIcon.addEventListener("keydown", function (event) {
           if (event.keyCode === 32 || event.keyCode === 13) {
+            event.preventDefault();
+            event.stopPropagation();
+            self._iconClicked = true;
             widget.click();
           }
         });
@@ -418,9 +424,11 @@ if (typeof window.DatePickerWidget === 'undefined') {
           if (evnt.target.classList.contains("cmp-adaptiveform-datepicker__calendar-icon")) {
             if (!DatePickerWidget.#visible) {
               this.#show();
-              return;
+              handled = true;
+            } else {
+              this.$focusedDate.classList.add("dp-focus");
+              handled = true;
             }
-            this.$focusedDate.classList.add("dp-focus");
           }
           break;
         case 40: //down arrow key

ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js

@@ -384,6 +384,65 @@ describe("Form Runtime with Date Picker", () => {
         });
     })
 
+    it("should have only one calendar icon per datepicker component", () => {
+        const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[6];
+
+        cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("have.length", 1);
+        cy.get(`#${datePicker7}`).find("input").focus().blur().focus().blur();
+        cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("have.length", 1);
+    });
+
+    it("should open datepicker calendar when Enter key is pressed on calendar icon", () => {
+        const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[6];
+        
+        cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").focus().type("{enter}");
+        cy.get(".datetimepicker").should("be.visible");
+        cy.get("body").click(10, 10);
+        cy.get(".datetimepicker").should("not.be.visible");
+    });
+
+    it("should open datepicker calendar when Space key is pressed on calendar icon", () => {
+        const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[6];
+        
+        cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").focus().type(" ");
+        cy.get(".datetimepicker").should("be.visible");
+        cy.get("body").type("{esc}");
+        cy.get(".datetimepicker").should("not.be.visible");
+    });
+
+    it("should handle keyboard accessibility with custom display formats", () => {
+        const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[6];
+
+        cy.get(`#${datePicker7}`).find("input").should("have.attr", "type", "text"); // Custom format uses text input
+        cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("have.attr", "tabindex", "0");
+        cy.get(`#${datePicker7}`).find("input").focus().tab();
+        cy.focused().should("have.class", "cmp-adaptiveform-datepicker__calendar-icon");
+        cy.focused().type("{enter}");
+        cy.get(".datetimepicker").should("be.visible");
+        cy.get("body").type("{esc}");
+        cy.get(".datetimepicker").should("not.be.visible");
+    });
+
+    it("should prevent calendar icon duplication during component re-initialization", () => {
+        const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[6];
+        
+        cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("have.length", 1);
+        
+        const testDate = "15/08/2023";
+        
+        cy.get(`#${datePicker7}`).find("input").clear().type(testDate);
+        cy.get(`#${datePicker7}`).find("input").focus().blur().focus().blur();
+        cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").click();
+        cy.get(".datetimepicker").should("be.visible");
+        cy.get("body").click(10, 10);
+        cy.get(".datetimepicker").should("not.be.visible");
+        cy.get(`#${datePicker7}`).find("input").clear();
+        cy.get(`#${datePicker7}`).find("input").focus().blur();
+        cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("have.length", 1);
+        cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").focus().type("{enter}");
+        cy.get(".datetimepicker").should("be.visible");
+        cy.get("body").type("{esc}");
+
     // Mobile Touch Functionality Tests
     describe("Mobile Touch Functionality", () => {
         beforeEach(() => {