Issue with long description text and introduce data-name attribute in radiobutton (#1522)

Co-authored-by: Pavitra Khatri <pavitrakhatri@pavitras-mbp.corp.adobe.com>

Author: pavi41

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

@@ -177,8 +177,9 @@
         }
 
         #syncWidgetName() {
+            const name = this.getModel()?.name;
             this.widget.forEach(widget => {
-                widget.setAttribute("name", this.id + "_name");
+                widget.setAttribute("name", `${this.id}_${name}`);
             });
         }
     }

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

@@ -29,6 +29,7 @@
      data-cmp-enabled="${radioButton.enabled ? 'true' : 'false'}"
      data-cmp-required="${radioButton.required ? 'true': 'false'}"
      data-cmp-readonly="${radioButton.readOnly ? 'true' : 'false'}"
+     data-name="${radioButton.name}"
      id="${radiobutton.id}"
      data-cmp-data-layer="${radioButton.data.json}"
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"

ui.frontend/src/view/FormFieldBase.js

@@ -636,17 +636,18 @@ class FormFieldBase extends FormField {
                }
 
                 // Find the existing <p> element
-                let pElement = descriptionElement.querySelector('p');
+                let pElements = descriptionElement.querySelectorAll('p');
 
-                if (!pElement)  {
+                if (!pElements)  {
                     // If no <p> tag exists, create one and set it as the content
-                    pElement = document.createElement('p');
+                    pElements = document.createElement('p');
                     descriptionElement.innerHTML = ''; // Clear existing content
                     descriptionElement.appendChild(pElement);
                 }
 
                 // Update the <p> element's content with sanitized content
-                pElement.innerHTML = sanitizedDescriptionText;
+                   pElements.length === 1 ? (pElements[0].innerHTML = sanitizedDescriptionText) : null;
+               
             } else {    
                 // If no description was set during authoring
                 this.#addDescriptionInRuntime(sanitizedDescriptionText);

ui.tests/test-module/specs/prefill/customprefill.cy.js

@@ -27,7 +27,7 @@ describe('Custom Prefill Test', function () {
     const nameTextBox = "input[name='name']",
           dobDropdown = "input[name='dob']",
           jobDropdown = "select[name='job']";
-    let genderRadioButton = "input[name='radiobutton-c8c660bac8_name']";
+    let genderRadioButton = "input[name='radiobutton-c8c660bac8_gender']";
     let formContainer = null;
 
     beforeEach(() => {

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

@@ -79,6 +79,22 @@ describe("Form with Radio Button Input", () => {
         });
     });
 
+    it("should have data-name attribute in parent div matching model name", () => {
+        const [radioButton1, radioButton1FieldView] = Object.entries(formContainer._fields)[0];
+        const modelName = radioButton1FieldView.getModel().name;
+        cy.get(`#${radioButton1}`).invoke('attr', 'data-name').should('eq', modelName);
+    });
+
+    it("should set proper name attribute for radio buttons", () => {
+        const [id, fieldView] = Object.entries(formContainer._fields)[0];
+        const model = formContainer._model.getElement(id);
+        const expectedName = `${id}_${model.name}`;
+
+        cy.get(`#${id}`).find(".cmp-adaptiveform-radiobutton__option__widget").each(($radio) => {
+            cy.wrap($radio).should('have.attr', 'name', expectedName);
+        });
+    });
+
     it("radiobutton html changes are reflected in model", () => {
         const [id, fieldView] = Object.entries(formContainer._fields)[1];
         const model = formContainer._model.getElement(id);