From 2f68d8fdf17014ba6a8f9af01f5e5f1febb76a26 Mon Sep 17 00:00:00 2001
From: Stefan Dragomir <stefand@ENSRO0422.local>
Date: Mon, 5 May 2025 20:32:16 +0300
Subject: [PATCH 1/2] FORMS-18634: Desktop, RWD Tablet, RWD Mobile - Form field
 with error not identified @sunnym @vavarshn

---
 .../components/af-commons/v1/fieldTemplates/errorMessage.html | 2 +-
 ui.frontend/src/view/FormFieldBase.js                         | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/errorMessage.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/errorMessage.html
index 92aa7d845f..6a712c6c06 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/errorMessage.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/errorMessage.html
@@ -1,3 +1,3 @@
 <template data-sly-template.errorMessage="${@ componentId, bemBlock}">
-    <div class="${bemBlock}__errormessage" id="${componentId}__errormessage" aria-live="assertive"></div>
+    <div class="${bemBlock}__errormessage" id="${componentId}__errormessage" aria-live="assertive" tabindex=0 role="complementary"></div>
 </template>
\ No newline at end of file
diff --git a/ui.frontend/src/view/FormFieldBase.js b/ui.frontend/src/view/FormFieldBase.js
index 260f8d74a0..687056d60d 100644
--- a/ui.frontend/src/view/FormFieldBase.js
+++ b/ui.frontend/src/view/FormFieldBase.js
@@ -167,6 +167,7 @@ class FormFieldBase extends FormField {
     #syncLabel() {
         let labelElement = typeof this.getLabel === 'function' ? this.getLabel() : null;
         if (labelElement) {
+            labelElement.setAttribute('id', `${this.getId()}__label`);
             labelElement.setAttribute('for', this.getWidgetId());
         }
     }
@@ -176,6 +177,7 @@ class FormFieldBase extends FormField {
         let errorElement = typeof this.getErrorDiv === 'function' ? this.getErrorDiv() : null;
         if (errorElement) {
             errorElement.setAttribute('id', `${this.getId()}__errormessage`);
+            errorElement.setAttribute('aria-describedby', `${this.getId()}__label`);
         }
     }   
 
@@ -249,7 +251,7 @@ class FormFieldBase extends FormField {
         this.#syncLabel()
         this.#syncWidget()
         this.#syncShortDesc()
-        this. #syncLongDesc()
+        this.#syncLongDesc()
         this.#syncAriaDescribedBy()
         this.#syncError()
         this.#syncAriaLabel()

From 2dfe8b823e8f6e18579f9fe13e61e54af870f19b Mon Sep 17 00:00:00 2001
From: Stefan Dragomir <stefand@ENSRO0422.local>
Date: Tue, 6 May 2025 21:59:05 +0300
Subject: [PATCH 2/2] FORMS-18634: Responding to feedback

---
 .../af-commons/v1/fieldTemplates/errorMessage.html          | 2 +-
 ui.frontend/src/view/FormFieldBase.js                       | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/errorMessage.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/errorMessage.html
index 6a712c6c06..92aa7d845f 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/errorMessage.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/errorMessage.html
@@ -1,3 +1,3 @@
 <template data-sly-template.errorMessage="${@ componentId, bemBlock}">
-    <div class="${bemBlock}__errormessage" id="${componentId}__errormessage" aria-live="assertive" tabindex=0 role="complementary"></div>
+    <div class="${bemBlock}__errormessage" id="${componentId}__errormessage" aria-live="assertive"></div>
 </template>
\ No newline at end of file
diff --git a/ui.frontend/src/view/FormFieldBase.js b/ui.frontend/src/view/FormFieldBase.js
index 687056d60d..87b33e1441 100644
--- a/ui.frontend/src/view/FormFieldBase.js
+++ b/ui.frontend/src/view/FormFieldBase.js
@@ -540,6 +540,8 @@ class FormFieldBase extends FormField {
             // Check if the validationMessage is different from the current content
             if (this.errorDiv.innerHTML !== state.validationMessage) {
                 this.errorDiv.innerHTML = state.validationMessage;
+                this.errorDiv.removeAttribute('tabindex');
+                this.errorDiv.removeAttribute('role');
                 if (state.validity.valid === false) {
                     // Find the first key whose value is true
                     const validationType = Object.keys(state.validity).find(key => key !== 'valid' && state.validity[key] === true);
@@ -552,7 +554,9 @@ class FormFieldBase extends FormField {
                     if (!state.validationMessage) {
                         this.errorDiv.innerHTML = LanguageUtils.getTranslatedString(this.formContainer.getModel().lang, "defaultError");
                     }
-                } 
+                    this.errorDiv.setAttribute('tabindex', 0);
+                    this.errorDiv.setAttribute('role', 'complementary');
+                }
                 this.#syncAriaDescribedBy();
             }
         }