Merge pull request #898 from adobe/dev-master-28

Dev to master Sep 28

.circleci/ci/accessibility-axe.js

@@ -16,7 +16,7 @@
 
 const fs = require('fs');
 const ci = new (require('./ci.js'))();
-const AxeBuilder = require('@axe-core/webdriverjs');
+const { AxeBuilder } = require('@axe-core/webdriverjs');
 const WebDriver = require('selenium-webdriver');
 const chrome = require('selenium-webdriver/chrome');
 const { createHtmlReport } = require('axe-html-reporter');
@@ -60,53 +60,60 @@ const calculateAccessibility = async () => {
           },
         });
         fs.writeFileSync('accessibility-report.html', reportHTML);
+        // adding node index to prevent multiple github comments in PR
+        let nodeIndex = 0;
+        if (process.env.CIRCLE_NODE_INDEX !== undefined) {
+            nodeIndex = process.env.CIRCLE_NODE_INDEX;
+        }
+        console.log('node index ', nodeIndex);
+
+        if ((process.env.AEM === "addon" || process.env.AEM === "classic") && nodeIndex == 0) {
+
+            if (results.violations.length > 0) {
+                console.log(getAccessibilityViolationsTable(results.violations))
+                await ci.postCommentToGitHubFromCI(getAccessibilityViolationsTable(results.violations));
+                // impact can be 'critical', 'serious', 'moderate', 'minor', 'unknown'
+                if (
+                    results.violations.some(
+                        (violation) => ["critical", "serious", "moderate"].includes(violation.impact) &&
+                        !accessibilityConfig.accessibilityExceptionList.includes(violation.id)
+                    )
+                ) {
+                    console.log("Error: Accessibility violations found, please refer the report under artifacts to fix the same!");
+                    await ci.postCommentToGitHubFromCI("Error: Accessibility violations found, please refer the report under artifacts, inside circleCI PR, to fix the same!");
+                    process.exit(1); // fail pipeline
+                }
+
+                console.log("results.violations--->>>", results.violations);
+            }
 
-        if (results.violations.length > 0) {
-            getAccessibilityViolationsTable(results.violations)
-           // impact can be 'critical', 'serious', 'moderate', 'minor', 'unknown'
-           if (
-             results.violations.some(
-               (violation) =>
-                 ["critical", "serious", "moderate"].includes(violation.impact) &&
-                 !accessibilityConfig.accessibilityExceptionList.includes(violation.id)
-             ) &&
-             process.env.AEM === "addon"
-           ) {
-             console.log(
-               "Error: Accessibility violations found, please refer the report under artifacts to fix the same!"
-             );
-             await ci.postCommentToGitHubFromCI("Error: Accessibility violations found, please refer the report under artifacts, inside circleCI PR, to fix the same!");
-             process.exit(1); // fail pipeline
-           }
-
-           console.log("results.violations--->>>", results.violations);
         }
+
     }
     catch (e) {
         console.log("Some error occured in calculating accessibility", e)
     }
 }
 
 const getAccessibilityViolationsTable = (violations) => {
-  const printRow = (id, description, impact) => {
-    console.log(
-      `| ${id + " ".repeat(20 - id.length)}  | ${
-        description + " ".repeat(100 - description.length)
-      } | ${impact + " ".repeat(20 - impact.length)} |`
-    );
+  const printRow = (id, impact) => {
+    return `| ${id + " ".repeat(30 - id.length)} | ${
+      impact + " ".repeat(25 - impact.length)
+    } |\n`;
   };
+
   const printDashedLine = () => {
-    console.log(`| ${"-".repeat(22)}|${"-".repeat(102)}|${"-".repeat(22)}|`);
+    return `| ${"-".repeat(30)} | ${"-".repeat(25)} |\n`;
   };
 
-  console.log("\n\n### Accessibility Violations Found\n");
-  printDashedLine();
-  printRow("Id", "Description", "Impact");
-  printDashedLine();
+  let table = "";
+  table += "\n\n### Accessibility Violations Found\n";
+  table += `| Id                             | Impact                    |\n`;
+  table += printDashedLine();
   violations.forEach((violation) => {
-    printRow(violation.id, violation.description, violation.impact);
-    printDashedLine();
+    table += printRow(violation.id, violation.impact);
   });
+  return table;
 };
 
 calculateAccessibility()

.circleci/ci/accessibilityConfig.json

@@ -1,3 +1,3 @@
 {
-  "accessibilityExceptionList": []
+  "accessibilityExceptionList": ["landmark-one-main", "label-title-only", "region"]
 }

.circleci/ci/it-tests.js

@@ -64,7 +64,7 @@ try {
 
     // Set an environment variable indicating test was executed
     // this is used in case of re-run failed test scenario
-    process.env.TEST_EXECUTED = "true";
+    ci.sh("sed -i 's/false/true/' /home/circleci/build/TEST_EXECUTION_STATUS.txt")
     // Start CQ
     ci.sh(`./qp.sh -v start --id author --runmode author --port 4502 --qs-jar /home/circleci/cq/author/cq-quickstart.jar \
             --bundle org.apache.sling:org.apache.sling.junit.core:1.0.23:jar \

.circleci/config.yml

@@ -19,9 +19,9 @@ common:
           chrome-version: 116.0.5845.96 # TODO: remove when chromedriver downloads are fixed
       - run:
           command: |
-              google-chrome --version
-              chromedriver --version
-              which google-chrome
+            google-chrome --version
+            chromedriver --version
+            which google-chrome
           name: Check browser installed
       - *restore_cache
       - attach_workspace:
@@ -53,37 +53,43 @@ common:
           name: UI tests
           # Supports 'Re-run failed tests only'. See this for more info: https://circleci.com/docs/rerun-failed-tests-only/
           command: |
-            TEST_EXECUTED=false
             cd ui.tests/test-module
             TESTFILES=$(circleci tests glob "specs/**/*.spec.js")
             cd ../../
+            echo "false" >> TEST_EXECUTION_STATUS.txt
             echo $TESTFILES | circleci tests run --command="xargs node .circleci/ci/it-tests.js" --verbose --split-by=timings
       - store_test_results:
           path: ui.tests/test-module/test_results
       - run:
           name: Calculate lighthouse Scores
           command: |
-            if [ "TEST_EXECUTED" = "true" ]; then
+            test_execution_status=$(cat TEST_EXECUTION_STATUS.txt)
+            if [[ $test_execution_status == "true" ]]; then
               node .circleci/ci/lighthouse.js
             else
               echo "Skipping Lighthouse Scores calculation..."
             fi
       - run:
           name: Check Accessibility
           command: |
-            if [ "TEST_EXECUTED" = "true" ]; then
+            test_execution_status=$(cat TEST_EXECUTION_STATUS.txt)
+            if [[ $test_execution_status == "true" ]]; then
               node .circleci/ci/accessibility-axe.js
             else
               echo "Skipping Accessibility check..."
             fi
       - run:
           name: Stop CQ
           command: |
-            if [ "TEST_EXECUTED" = "true" ]; then
+            test_execution_status=$(cat TEST_EXECUTION_STATUS.txt)
+            if [[ $test_execution_status == "true" ]]; then
               node .circleci/ci/stop-cq.js
             else
               echo "Skipping stop cq ..."
             fi
+      - run:
+          name: Cleanup
+          command: rm -rf TEST_EXECUTION_STATUS.txt
       # Save test results as artifacts
       - store_artifacts:
           path: ui.tests/test-module/target

it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/dropdown/basic/.content.xml

@@ -196,6 +196,23 @@
                     type="string"
                     typeIndex="0"
                     visible="{Boolean}true"/>
+            <dropdown_8
+                    jcr:lastModified="{Date}2023-05-03T11:57:31.005+05:30"
+                    jcr:lastModifiedBy="admin"
+                    jcr:primaryType="nt:unstructured"
+                    jcr:title="Dropdown 8"
+                    sling:resourceType="forms-components-examples/components/form/dropdown"
+                    enabled="{Boolean}true"
+                    enum="[1,2,3]"
+                    enumNames="[Item 1,Item 2,Item 3]"
+                    fieldType="drop-down"
+                    hideTitle="false"
+                    name="dropdown_8"
+                    readOnly="{Boolean}false"
+                    textIsRich="[true,true]"
+                    type="string"
+                    typeIndex="0"
+                    visible="{Boolean}true"/>
         </guideContainer>
     </jcr:content>
 </jcr:root>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/button/v1/button/_cq_editConfig.xml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          jcr:primaryType="cq:EditConfig"
+          cq:actions="[edit,-,copymove,delete,-,insert,-]"
+          cq:dialogMode="floating"
+          cq:layout="editbar"
+          cq:disableTargeting="{Boolean}true">
+    <cq:actionConfigs jcr:primaryType="nt:unstructured">
+        <editexpression
+                jcr:primaryType="nt:unstructured"
+                handler="CQ.FormsCoreComponents.editorhooks.openRuleEditor"
+                order="after CONFIGURE"
+                icon="bidRule"
+                text="Edit Rules"/>
+        <replace
+                jcr:primaryType="nt:unstructured"
+                condition="CQ.FormsCoreComponents.editorhooks.isReplaceable"
+                handler="CQ.FormsCoreComponents.editorhooks.replace"
+                icon="shuffle"
+                text="Replace"/>
+    </cq:actionConfigs>
+    <cq:inplaceEditing
+            jcr:primaryType="cq:InplaceEditingConfig"
+            active="{Boolean}true"
+            configPath="inplaceEditingConfig"
+            editorType="plaintext">
+        <inplaceEditingConfig
+                jcr:primaryType="nt:unstructured"
+                editElementQuery="span:first"
+                textPropertyName="jcr:title"/>
+    </cq:inplaceEditing>
+</jcr:root>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkbox/v1/checkbox/checkbox.html

@@ -29,6 +29,7 @@
      data-cmp-visible="${checkbox.visible ? 'true' : 'false'}"
      data-cmp-enabled="${checkbox.enabled ? 'true' : 'false'}"
      data-cmp-required="${checkbox.required ? 'true': 'false'}"
+     data-cmp-readonly="${checkbox.readOnly ? 'true' : 'false'}"
      data-cmp-data-layer="${checkbox.data.json}"
      data-sly-test.widgetId="${'{0}-{1}' @ format=[component.id, '_widget']}"
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">

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

@@ -94,6 +94,7 @@
                 this.widget.setAttribute(FormView.Constants.ARIA_CHECKED, false);
             }
             this.widget.value = modelValue;
+            super.updateEmptyStatus();
         }
     }
     FormView.Utils.setupField(({element, formContainer}) => {

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v1/checkboxgroup/checkboxgroup.html

@@ -29,6 +29,7 @@
      data-cmp-visible="${checkboxgroup.visible ? 'true' : 'false'}"
      data-cmp-enabled="${checkboxgroup.enabled ? 'true' : 'false'}"
      data-cmp-required="${checkboxgroup.required ? 'true': 'false'}"
+     data-cmp-readonly="${checkboxgroup.readOnly ? 'true' : 'false'}"
      data-cmp-data-layer="${checkboxgroup.data.json}"
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"
      data-sly-test.widgetId="${'{0}-{1}' @ format=[checkboxgroup.id, 'widget']}">

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

@@ -135,6 +135,7 @@
 
         updateReadOnly(readonly) {
             let widgets = this.widget;
+            this.element.setAttribute(FormView.Constants.DATA_ATTRIBUTE_READONLY, readonly);
             widgets.forEach(widget => {
                 if (readonly === true) {
                     widget.setAttribute(FormView.Constants.HTML_ATTRS.DISABLED, "disabled");

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/README.md

@@ -66,3 +66,5 @@ BLOCK cmp-adaptiveform-container
 ## JavaScript Data Attribute Bindings
 
 Apply a `data-cmp-is="adaptiveFormContainer"` attribute to the `cmp-adaptiveform-container` block to enable initialization of the JavaScript component.
+
+Applying `data-cmp-adaptiveform-container-loader` attribute to the div specifically for applying the loader class on it, it is to ensure that the loading icon should not appear over components.

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/site/js/formcontainerview.js

@@ -63,14 +63,20 @@
         const startTime = new Date().getTime();
         let elements = document.querySelectorAll(FormContainerV2.selectors.self);
         for (let i = 0; i < elements.length; i++) {
-            elements[i].classList.add(FormContainerV2.loadingClass);
+            let loaderToAdd = document.querySelector("[data-cmp-adaptiveform-container-loader='"+ elements[i].id + "']");
+            if(loaderToAdd){
+                loaderToAdd.classList.add(FormContainerV2.loadingClass);
+            }
             console.debug("Form loading started", elements[i].id);
         }
         function onInit(e) {
             let formContainer =  e.detail;
             let formEl = formContainer.getFormElement();
             setTimeout(() => {
-                formEl.classList.remove(FormContainerV2.loadingClass);
+                let loaderToRemove = document.querySelector("[data-cmp-adaptiveform-container-loader='"+ formEl.id + "']");
+                if(loaderToRemove){
+                    loaderToRemove.classList.remove(FormContainerV2.loadingClass);
+                }
                 const timeTaken = new Date().getTime() - startTime;
                 console.debug("Form loading complete", formEl.id, timeTaken);
                 }, 10);

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/container.html

@@ -42,4 +42,4 @@
         <sly data-sly-use="${'removeattribute.js' @ referencedPage }"/>
     </div>
 </form>
-
+<div data-cmp-adaptiveform-container-loader="${container.id}"></div>

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

@@ -152,7 +152,7 @@
     border: 1px dashed black;
 }
 
-.datepicker-calendar-icon {
+.cmp-adaptiveform-datepicker__calendar-icon {
     position: absolute;
     top: 45px;
     right: 30px;
@@ -163,6 +163,6 @@
     height: 24px;
 }
 
-.datefieldwidget.widgetreadonly .datepicker-calendar-icon {
+.datefieldwidget.widgetreadonly .cmp-adaptiveform-datepicker__calendar-icon {
     display: none;
 }

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

@@ -306,7 +306,7 @@ if (typeof window.DatePickerWidget === 'undefined') {
 
       if (options.showCalendarIcon) {
         let calendarIcon = document.createElement("div");
-        calendarIcon.classList.add("datepicker-calendar-icon");
+        calendarIcon.classList.add("cmp-adaptiveform-datepicker__calendar-icon");
 
         widget.parentNode.insertBefore(calendarIcon, widget.nextSibling);
 
@@ -402,7 +402,7 @@ if (typeof window.DatePickerWidget === 'undefined') {
           break;
         case 32: //space
         case 13: // enter
-          if (evnt.target.classList.contains("datepicker-calendar-icon")) {
+          if (evnt.target.classList.contains("cmp-adaptiveform-datepicker__calendar-icon")) {
             if (!DatePickerWidget.#visible) {
               this.#show();
               return;
@@ -994,9 +994,8 @@ if (typeof window.DatePickerWidget === 'undefined') {
     }
 
     #clearDate(view) {
-      this.setValue("");
-      let existingSelectedItem = this['$'
-      + view.toLowerCase()].getElementsByClassName("dp-selected")[0];
+      this.#model.value = "";
+      let existingSelectedItem = this['$' + view.toLowerCase()].getElementsByClassName("dp-selected")[0];
       if (existingSelectedItem) {
         existingSelectedItem.classList.remove("dp-selected");
       }
@@ -1011,8 +1010,11 @@ if (typeof window.DatePickerWidget === 'undefined') {
     }
 
     toString() {
-      return this.selectedYear + "-" + this.#pad2(this.selectedMonth + 1) + "-"
-          + this.#pad2(this.selectedDay);
+      if(this.selectedYear === -1 || this.selectedMonth === -1 || this.selectedDay === -1){
+        return "";
+      }
+      const formattedDate = `${this.selectedYear}-${this.#pad2(this.selectedMonth + 1)}-${this.#pad2(this.selectedDay)}`;
+      return formattedDate;
     }
 
     #selectDate(evnt) {

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/datepicker.html

@@ -26,6 +26,8 @@
      data-cmp-is="adaptiveFormDatePicker"
      data-cmp-visible="${datePicker.visible ? 'true' : 'false'}"
      data-cmp-enabled="${datePicker.enabled ? 'true' : 'false'}"
+     data-cmp-required="${datePicker.required ? 'true': 'false'}"
+     data-cmp-readonly="${datePicker.readOnly ? 'true' : 'false'}"
      id="${datePicker.id}"
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"
      data-sly-test.widgetId="${'{0}-{1}' @ format=[datePicker.id, 'widget']}">