set unique IDs for checkbox group and radio button for tracking in OPTEL

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

@@ -109,6 +109,7 @@
                 });
             });
             this.#updateModelValue();
+            this.#syncWidgetIds();
         }
 
         #updateModelValue() {
@@ -222,6 +223,14 @@
             super.syncMarkupWithModel();
             this.updateEnum(this._model.enum);
             this.updateEnumNames(this._model.enumNames);
+            this.#syncWidgetIds();
+        }
+
+        #syncWidgetIds() {
+            const widgetId = `${this.id}-widget`;
+            this.widget.forEach((widget, index) => {
+                widget.id = `${widgetId}_${index + 1}`;
+            });
         }
     }
 

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

@@ -21,6 +21,7 @@
           <label class="cmp-adaptiveform-checkboxgroup__option-label"
                  title="${checkboxgroup.tooltipVisible ? '' : checkboxgroup.tooltipText}">
             <input class="cmp-adaptiveform-checkboxgroup__option__widget" type="checkbox"
+                   id="${widgetId}_${itemList.count}"
                    name="${checkboxgroup.name}"
                    value="${checkboxgroup.enums[itemList.index].toString}"
                    checked="${checkboxgroup.enums[itemList.index] in checkboxgroup.default }"

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

@@ -94,6 +94,7 @@
             this.widget.forEach(optionWidget => {
                 this.#addWidgetListeners(optionWidget);
             });
+            this.#syncWidgetIds();
         }
 
         updateEnabled(enabled, state) {
@@ -189,6 +190,7 @@
         syncMarkupWithModel() {
             super.syncMarkupWithModel();
             this.#syncWidgetName();
+            this.#syncWidgetIds();
         }
 
         #syncWidgetName() {
@@ -197,6 +199,13 @@
                 widget.setAttribute("name", `${this.id}_${name}`);
             });
         }
+
+        #syncWidgetIds() {
+            const widgetId = `${this.id}-widget`;
+            this.widget.forEach((widget, index) => {
+                widget.id = `${widgetId}_${index + 1}`;
+            });
+        }
     }
 
     FormView.Utils.setupField(({element, formContainer}) => {

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

@@ -20,6 +20,7 @@
         <label class="cmp-adaptiveform-radiobutton__option-label"
                title="${radiobutton.tooltipVisible ? '' : radiobutton.tooltipText}">
           <input class="cmp-adaptiveform-radiobutton__option__widget" type="radio"
+                 id="${widgetId}_${itemList.count}"
                  name="${radiobutton.name}"
                  value="${item.toString}"
                  checked="${radiobutton.enums[itemList.index] == radiobutton.default[0]}"

ui.tests/test-module/specs/checkboxgroup/checkboxgroupv2.runtime.cy.js

@@ -250,6 +250,14 @@ describe("Form Runtime with CheckBoxGroup Input", () => {
         });
     })
 
+    it("each checkbox input should have a unique id attribute", () => {
+        const [id, fieldView] = Object.entries(formContainer._fields)[0];
+        const widgetId = `${id}-widget`;
+        cy.get(`#${id}`).find(".cmp-adaptiveform-checkboxgroup__option__widget").each(($checkbox, index) => {
+            cy.wrap($checkbox).should('have.attr', 'id', `${widgetId}_${index + 1}`);
+        });
+    })
+
     it("checkbox group MUST be wrapped in a <fieldset> and have a legend", () => {
         const [checkBox1] = Object.entries(formContainer._fields)[0];
         cy.get(`#${checkBox1}`).then($el => {

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

@@ -259,6 +259,14 @@ describe("Form with Radio Button Input", () => {
         })
     })
 
+    it("each radio button input should have a unique id attribute", () => {
+        const [id, fieldView] = Object.entries(formContainer._fields)[0];
+        const widgetId = `${id}-widget`;
+        cy.get(`#${id}`).find(".cmp-adaptiveform-radiobutton__option__widget").each(($radio, index) => {
+            cy.wrap($radio).should('have.attr', 'id', `${widgetId}_${index + 1}`);
+        });
+    })
+
     it("radio button group MUST be wrapped in a <fieldset> and have a legend", () => {
         const [radioButton1] = Object.entries(formContainer._fields)[0];
         cy.get(`#${radioButton1}`).then($el => {