From c4755fc3b95bf5a22557a94b16d71d2f920de570 Mon Sep 17 00:00:00 2001
From: Stefan Dragomir <stefand@ENSRO0422.local>
Date: Wed, 4 Jun 2025 14:10:46 +0300
Subject: [PATCH 1/3] FORMS-18671: Visible label missing @sunnym @vavarshn

---
 .../v1/checkboxgroup/widget.html              |  2 +-
 .../fileinput/v1/fileinput/fileinput.html     | 30 ++++++++--------
 .../termsandconditions.html                   | 36 ++++++++++---------
 ui.frontend/src/view/FormFieldBase.js         | 16 +++++++--
 4 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v1/checkboxgroup/widget.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v1/checkboxgroup/widget.html
index 926b29aa0f..76fb5ef24f 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v1/checkboxgroup/widget.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v1/checkboxgroup/widget.html
@@ -14,7 +14,7 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <template data-sly-template.widget="${ @ checkboxgroup }">
-  <div class="cmp-adaptiveform-checkboxgroup__widget ${checkboxgroup.orientation}" id="${widgetId}">
+  <div class="cmp-adaptiveform-checkboxgroup__widget ${checkboxgroup.orientation}" id="${widgetId}" role="group">
     <div data-sly-list="${checkboxgroup.enums}" data-sly-unwrap>
       <div class="cmp-adaptiveform-checkboxgroup-item ${checkboxgroup.name}">
         <label class="cmp-adaptiveform-checkboxgroup__option-label"
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/fileinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/fileinput.html
index c170dea080..6f35eff671 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/fileinput.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/fileinput.html
@@ -35,20 +35,22 @@
       <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
     </div>
     </br>
-    <label data-sly-test="${file.buttonText}" for="${file.id}_widget" tabindex="0" role="button" class="cmp-adaptiveform-fileinput__widgetlabel">${file.buttonText}</label>
-    <input class="cmp-adaptiveform-fileinput__widget"
-           data-sly-attribute.multiple="${file.isMultiple ? 'multiple' : ''}"
-           style="${file.buttonText ? 'display:none' : '' @ context='styleString'}"
-           title="${file.tooltipVisible ? '' : file.tooltipText}"
-           name="${file.name}"
-           disabled="${!file.enabled}"
-           required="${file.required}"
-           accept="${file.accept}"
-           id="${file.id}_widget"
-           type="file"
-           aria-describedby="${file.id}__errormessage ${file.id}__longdescription ${file.id}__shortdescription"
-           data-cmp-data-layer="${file.data.json}"
-    />
+    <div class="cmp-adaptiveform-fileinput__widget-container">
+      <label data-sly-test="${file.buttonText}" for="${file.id}_widget" tabindex="0" role="button" class="cmp-adaptiveform-fileinput__widgetlabel">${file.buttonText}</label>
+      <input class="cmp-adaptiveform-fileinput__widget"
+            data-sly-attribute.multiple="${file.isMultiple ? 'multiple' : ''}"
+            style="${file.buttonText ? 'display:none' : '' @ context='styleString'}"
+            title="${file.tooltipVisible ? '' : file.tooltipText}"
+            name="${file.name}"
+            disabled="${!file.enabled}"
+            required="${file.required}"
+            accept="${file.accept}"
+            id="${file.id}_widget"
+            type="file"
+            aria-describedby="${file.id}__errormessage ${file.id}__longdescription ${file.id}__shortdescription"
+            data-cmp-data-layer="${file.data.json}"
+      />
+    </div>
     <ul class="cmp-adaptiveform-fileinput__filelist"></ul>
     <div data-sly-call="${shortDescription.shortDescription @componentId=file.id, shortDescriptionVisible=file.tooltipVisible, shortDescription=file.tooltip, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap>
     </div>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/termsandconditions/v1/termsandconditions/termsandconditions.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/termsandconditions/v1/termsandconditions/termsandconditions.html
index 31f0c75971..aa52059cf5 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/termsandconditions/v1/termsandconditions/termsandconditions.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/termsandconditions/v1/termsandconditions/termsandconditions.html
@@ -35,27 +35,29 @@
         <div data-sly-call="${label.label @componentId=tnc.id, labelValue=tnc.label.value, labelVisible=tnc.label.visible, labelRichText=tnc.label.richText, bemBlock='cmp-adaptiveform-termsandcondition'}" data-sly-unwrap></div>
         <div data-sly-call="${questionMark.questionMark @componentId=tnc.id, longDescription=tnc.description, bemBlock='cmp-adaptiveform-termsandcondition'}" data-sly-unwrap></div>
     </div>
-    <div class="cmp-adaptiveform-termsandcondition__content-container ${!wcmmode.edit && tnc.showAsPopup ? 'cmp-adaptiveform-termsandcondition__content-container--modal' : ''}"
-         data-cmp-visible="${tnc.showAsPopup ? 'false' : 'true'}">
-        <div class="cmp-adaptiveform-termsandcondition__body">
-            <div class="cmp-adaptiveform-termsandcondition__header" data-sly-test="${tnc.showAsPopup && !wcmmode.edit}">
-                <button type="button" class="cmp-adaptiveform-termsandcondition__close-button" >
-                    X
-                </button>
-                <h3>
-                    ${"Please review the terms and conditions" @ i18n, context='html'}
-                </h3>
-            </div>
-            <div class="cmp-adaptiveform-termsandcondition__content">
-                <div data-sly-test="${!tnc.showLink}" class="cmp-adaptiveform-termsandcondition__text">
-                    <div  data-sly-resource="${'text'}"></div>
-                    <div class="cmp-adaptiveform-termsandcondition__text-intersect"></div>
+    <div class="cmp-adaptiveform-termsandcondition__widget-container">
+        <div class="cmp-adaptiveform-termsandcondition__content-container ${!wcmmode.edit && tnc.showAsPopup ? 'cmp-adaptiveform-termsandcondition__content-container--modal' : ''}"
+            data-cmp-visible="${tnc.showAsPopup ? 'false' : 'true'}">
+            <div class="cmp-adaptiveform-termsandcondition__body">
+                <div class="cmp-adaptiveform-termsandcondition__header" data-sly-test="${tnc.showAsPopup && !wcmmode.edit}">
+                    <button type="button" class="cmp-adaptiveform-termsandcondition__close-button" >
+                        X
+                    </button>
+                    <h3>
+                        ${"Please review the terms and conditions" @ i18n, context='html'}
+                    </h3>
+                </div>
+                <div class="cmp-adaptiveform-termsandcondition__content">
+                    <div data-sly-test="${!tnc.showLink}" class="cmp-adaptiveform-termsandcondition__text">
+                        <div  data-sly-resource="${'text'}"></div>
+                        <div class="cmp-adaptiveform-termsandcondition__text-intersect"></div>
+                    </div>
+                    <div class="cmp-adaptiveform-termsandcondition__link" data-sly-test="${tnc.showLink}" data-sly-resource="${'link'}"></div>
                 </div>
-                <div class="cmp-adaptiveform-termsandcondition__link" data-sly-test="${tnc.showLink}" data-sly-resource="${'link'}"></div>
             </div>
         </div>
+        <div class="cmp-adaptiveform-termsandcondition__approvalcheckbox"  data-sly-test="${tnc.showApprovalOption}"  data-sly-resource="${'approvalcheckbox'}"></div>
     </div>
-    <div class="cmp-adaptiveform-termsandcondition__approvalcheckbox"  data-sly-test="${tnc.showApprovalOption}"  data-sly-resource="${'approvalcheckbox'}"></div>
     <div data-sly-call="${shortDescription.shortDescription @componentId=tnc.id, shortDescriptionVisible=tnc.tooltipVisible, shortDescription=tnc.tooltip, bemBlock='cmp-adaptiveform-termsandcondition'}" data-sly-unwrap></div>
     <div data-sly-call="${longDescription.longDescription @componentId=tnc.id, longDescription=tnc.description, bemBlock='cmp-adaptiveform-termsandcondition'}" data-sly-unwrap></div>
 </div>
diff --git a/ui.frontend/src/view/FormFieldBase.js b/ui.frontend/src/view/FormFieldBase.js
index 260f8d74a0..a7a41c0952 100644
--- a/ui.frontend/src/view/FormFieldBase.js
+++ b/ui.frontend/src/view/FormFieldBase.js
@@ -229,15 +229,25 @@ class FormFieldBase extends FormField {
     }
 
     #syncAriaLabel() {
+        const bemClass = Array.from(this.element.classList).filter(bemClass => !bemClass.includes('--'))[0];
+        const regionContainer = this.element.querySelector(`.${bemClass}__widget-container`);
         let widgetElement = typeof this.getWidget === 'function' ? this.getWidget() : null;
         let widgetElements = typeof this.getWidgets === 'function' ? this.getWidgets() : null;
         widgetElement = widgetElements || widgetElement;
         const model = this.getModel?.();
     
-        if (widgetElement && model?.screenReaderText) {
+        if (model?.screenReaderText){
             // Use DOMPurify to sanitize and strip HTML tags
             const screenReaderText = window.DOMPurify ? window.DOMPurify.sanitize(model.screenReaderText, { ALLOWED_TAGS: [] }) : model.screenReaderText;
-            widgetElement.setAttribute('aria-label', screenReaderText);
+
+            // Some elements have the Widget hidden by default and other are Panels
+            // So this container mimics having a single, showing widget to attach the Accessibility label to.
+            if(regionContainer) {
+                regionContainer.setAttribute('role', 'region');
+                regionContainer.setAttribute('aria-label', screenReaderText);
+            } else if (widgetElement) {
+                widgetElement.setAttribute('aria-label', screenReaderText);
+            }
         }
     }
 
@@ -249,7 +259,7 @@ class FormFieldBase extends FormField {
         this.#syncLabel()
         this.#syncWidget()
         this.#syncShortDesc()
-        this. #syncLongDesc()
+        this.#syncLongDesc()
         this.#syncAriaDescribedBy()
         this.#syncError()
         this.#syncAriaLabel()

From e53cbe2a4d11e642b790e5bcf12c5c028a84d1a3 Mon Sep 17 00:00:00 2001
From: Stefan Dragomir <stefand@ENSRO0422.local>
Date: Wed, 18 Jun 2025 13:33:34 +0300
Subject: [PATCH 2/3] FORMS-18671: Round 1 feedback

---
 .../fileinput/v3/fileinput/fileinput.html     |  2 +-
 ui.frontend/src/view/FormFieldBase.js         | 19 +++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/fileinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/fileinput.html
index 2d0dce4909..5a34379ceb 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/fileinput.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/fileinput.html
@@ -38,7 +38,7 @@
    <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
  </div>
  </br>
- <div class="cmp-adaptiveform-fileinput__container">
+ <div class="cmp-adaptiveform-fileinput__widget-container">
    <div class="cmp-adaptiveform-fileinput__dragarea">
         <div class="cmp-adaptiveform-fileinput__icon"></div>
         <div class="cmp-adaptiveform-fileinput__dragtext">${file.dragDropText @context='html'}</div>
diff --git a/ui.frontend/src/view/FormFieldBase.js b/ui.frontend/src/view/FormFieldBase.js
index a7a41c0952..c3e4835f34 100644
--- a/ui.frontend/src/view/FormFieldBase.js
+++ b/ui.frontend/src/view/FormFieldBase.js
@@ -156,7 +156,7 @@ class FormFieldBase extends FormField {
       let widgetElements = typeof this.getWidgets === 'function' ? this.getWidgets() : null;
       widgetElement = widgetElements || widgetElement;
       if (widgetElement) {
-          widgetElement.setAttribute('id', this.getWidgetId());
+        widgetElement.setAttribute('id', this.getWidgetId());
       }
     }
 
@@ -243,7 +243,7 @@ class FormFieldBase extends FormField {
             // Some elements have the Widget hidden by default and other are Panels
             // So this container mimics having a single, showing widget to attach the Accessibility label to.
             if(regionContainer) {
-                regionContainer.setAttribute('role', 'region');
+                regionContainer.setAttribute('tabindex', '1');
                 regionContainer.setAttribute('aria-label', screenReaderText);
             } else if (widgetElement) {
                 widgetElement.setAttribute('aria-label', screenReaderText);
@@ -251,6 +251,20 @@ class FormFieldBase extends FormField {
         }
     }
 
+    #syncLabelledBy() {
+        let labelElement = typeof this.getLabel === 'function' ? this.getLabel() : null;
+        let widgetElement = typeof this.getWidget === 'function' ? this.getWidget() : null;
+        let widgetElements = typeof this.getWidgets === 'function' ? this.getWidgets() : null;
+        widgetElement = widgetElements || widgetElement;
+
+        if (widgetElement && widgetElement.hasAttribute('role') && (widgetElement.getAttribute('role') === 'group' || widgetElement.getAttribute('role') === 'radiogroup')) {
+            if (labelElement) {
+                labelElement.setAttribute('id', `${this.getId()}__label`);
+                widgetElement.setAttribute('aria-labelledby', `${this.getId()}__label`);
+            }
+        }
+    }
+
     /**
      * Synchronizes the markup with the model.
      * @method
@@ -263,6 +277,7 @@ class FormFieldBase extends FormField {
         this.#syncAriaDescribedBy()
         this.#syncError()
         this.#syncAriaLabel()
+        this.#syncLabelledBy()
     }
 
     /**

From 9fdab1716ab641ef06a0ef2c4ab4f2c98c283f93 Mon Sep 17 00:00:00 2001
From: Stefan Dragomir <stefand@ENSRO0422.local>
Date: Sat, 16 Aug 2025 18:52:47 +0300
Subject: [PATCH 3/3] FORMS-18671: Keeping original class names in
 fileinput.html

---
 .../fd/components/form/fileinput/v1/fileinput/fileinput.html    | 2 +-
 .../fd/components/form/fileinput/v2/fileinput/fileinput.html    | 2 +-
 .../fd/components/form/fileinput/v3/fileinput/fileinput.html    | 2 +-
 .../v1/termsandconditions/termsandconditions.html               | 2 +-
 ui.frontend/src/view/FormFieldBase.js                           | 1 -
 5 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/fileinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/fileinput.html
index 6f35eff671..6c50e32d5d 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/fileinput.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/fileinput.html
@@ -35,7 +35,7 @@
       <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
     </div>
     </br>
-    <div class="cmp-adaptiveform-fileinput__widget-container">
+    <div class="cmp-adaptiveform-fileinput__widget-container" role="region">
       <label data-sly-test="${file.buttonText}" for="${file.id}_widget" tabindex="0" role="button" class="cmp-adaptiveform-fileinput__widgetlabel">${file.buttonText}</label>
       <input class="cmp-adaptiveform-fileinput__widget"
             data-sly-attribute.multiple="${file.isMultiple ? 'multiple' : ''}"
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/fileinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/fileinput.html
index 22502dc556..625a874c0f 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/fileinput.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/fileinput.html
@@ -35,7 +35,7 @@
       <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
     </div>
     </br>
-    <div class="cmp-adaptiveform-fileinput__container">
+    <div class="cmp-adaptiveform-fileinput__container cmp-adaptiveform-fileinput__widget-container" role="region">
       <div class="cmp-adaptiveform-fileinput__dragarea">
            <div class="cmp-adaptiveform-fileinput__icon"></div>
            <div class="cmp-adaptiveform-fileinput__dragtext">${file.dragDropText @context='html'}</div>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/fileinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/fileinput.html
index 5a34379ceb..5c060a4687 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/fileinput.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/fileinput.html
@@ -38,7 +38,7 @@
    <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
  </div>
  </br>
- <div class="cmp-adaptiveform-fileinput__widget-container">
+ <div class="cmp-adaptiveform-fileinput__container cmp-adaptiveform-fileinput__widget-container" role="region">
    <div class="cmp-adaptiveform-fileinput__dragarea">
         <div class="cmp-adaptiveform-fileinput__icon"></div>
         <div class="cmp-adaptiveform-fileinput__dragtext">${file.dragDropText @context='html'}</div>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/termsandconditions/v1/termsandconditions/termsandconditions.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/termsandconditions/v1/termsandconditions/termsandconditions.html
index aa52059cf5..810cac48fa 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/termsandconditions/v1/termsandconditions/termsandconditions.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/termsandconditions/v1/termsandconditions/termsandconditions.html
@@ -35,7 +35,7 @@
         <div data-sly-call="${label.label @componentId=tnc.id, labelValue=tnc.label.value, labelVisible=tnc.label.visible, labelRichText=tnc.label.richText, bemBlock='cmp-adaptiveform-termsandcondition'}" data-sly-unwrap></div>
         <div data-sly-call="${questionMark.questionMark @componentId=tnc.id, longDescription=tnc.description, bemBlock='cmp-adaptiveform-termsandcondition'}" data-sly-unwrap></div>
     </div>
-    <div class="cmp-adaptiveform-termsandcondition__widget-container">
+    <div class="cmp-adaptiveform-termsandcondition__widget-container" role="region">
         <div class="cmp-adaptiveform-termsandcondition__content-container ${!wcmmode.edit && tnc.showAsPopup ? 'cmp-adaptiveform-termsandcondition__content-container--modal' : ''}"
             data-cmp-visible="${tnc.showAsPopup ? 'false' : 'true'}">
             <div class="cmp-adaptiveform-termsandcondition__body">
diff --git a/ui.frontend/src/view/FormFieldBase.js b/ui.frontend/src/view/FormFieldBase.js
index c3e4835f34..ba3224141d 100644
--- a/ui.frontend/src/view/FormFieldBase.js
+++ b/ui.frontend/src/view/FormFieldBase.js
@@ -243,7 +243,6 @@ class FormFieldBase extends FormField {
             // Some elements have the Widget hidden by default and other are Panels
             // So this container mimics having a single, showing widget to attach the Accessibility label to.
             if(regionContainer) {
-                regionContainer.setAttribute('tabindex', '1');
                 regionContainer.setAttribute('aria-label', screenReaderText);
             } else if (widgetElement) {
                 widgetElement.setAttribute('aria-label', screenReaderText);