Added Aria Invalid attribute

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/longDescription.html

@@ -1,7 +1,5 @@
 <template data-sly-template.longDescription="${@ componentId, longDescription, bemBlock}">
-  <div aria-live="polite">
-    <div class="${bemBlock}__longdescription" id="${componentId}__longdescription" data-sly-test="${longDescription}">
+    <div class="${bemBlock}__longdescription" id="${componentId}__longdescription" data-sly-test="${longDescription}" aria-live="polite">
       ${longDescription @context='html'}
     </div>
-  </div>
 </template>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/shortDescription.html

@@ -1,5 +1,5 @@
 <template data-sly-template.shortDescription="${@ componentId, shortDescriptionVisible, shortDescription, bemBlock}">
-  <div class="${bemBlock}__shortdescription" id="${componentId}__shortdescription" data-sly-test="${shortDescriptionVisible && shortDescription}">
+  <div class="${bemBlock}__shortdescription" id="${componentId}__shortdescription" aria-live="polite" data-sly-test="${shortDescriptionVisible && shortDescription}">
     ${shortDescription @context='html'}
   </div>
 </template>

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

@@ -41,7 +41,6 @@
             id="${checkbox.id}_widget"
             title="${checkbox.tooltipVisible ? '' : checkbox.tooltipText}"
             name="${checkbox.name}"
-            aria-describedby="${checkbox.id}__errormessage ${checkbox.id}__longdescription ${checkbox.id}__shortdescription"
             value="${checkbox.default[0]}"
             disabled="${!checkbox.enabled}" />
 

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

@@ -111,6 +111,12 @@
             }
         }
 
+        updateValidity(validity) {
+            const valid = validity.valid ? validity.valid : false;
+            let widgets = this.widget;
+            widgets.forEach(widget => widget.setAttribute(FormView.Constants.ARIA_INVALID, !valid));
+        }    
+
         updateValue(modelValue) {
             modelValue = [].concat(modelValue);
             let selectedWidgetValues = modelValue.map(String);

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

@@ -46,7 +46,6 @@
             title="${datePicker.tooltipVisible ? '' : datePicker.tooltipText}"
             id="${widgetId}"
             placeholder="${datePicker.placeHolder}"
-            aria-describedby="${datePicker.id}__errormessage ${datePicker.id}__longdescription ${datePicker.id}__shortdescription"
             min="${datePicker.minimumDate}"
             max="${datePicker.maximumDate}"/>
      <div data-sly-call="${shortDescription.shortDescription @componentId=datePicker.id, shortDescriptionVisible=datePicker.tooltipVisible, shortDescription=datePicker.tooltip, bemBlock='cmp-adaptiveform-datepicker'}" data-sly-unwrap>

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

@@ -43,7 +43,6 @@
             data-cmp-data-layer="${dropdown.data.json}"
             disabled="${!dropdown.enabled || dropdown.readOnly}"
             required="${dropdown.required}"
-            aria-describedby="${dropdown.id}__errormessage ${dropdown.id}__longdescription ${dropdown.id}__shortdescription"
             data-sly-attribute.multiple="${dropdown.isMultiSelect ? 'multiple' : ''}"
             aria-readonly="${dropdown.readOnly ? 'true' : ''}">
         <div data-sly-test.isPlaceHolderSet="${dropdown.placeHolder != null}" data-sly-unwrap></div>

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

@@ -50,7 +50,6 @@
            autocomplete="${email.autoComplete}"
            minlength="${email.minLength}"
            maxlength="${email.maxLength}"
-           aria-describedby="${email.id}__errormessage ${email.id}__longdescription ${email.id}__shortdescription"
            dir="auto"/>
     <div data-sly-call="${shortDescription.shortDescription @componentId=email.id, shortDescriptionVisible=email.tooltipVisible, shortDescription=email.tooltip, bemBlock='cmp-adaptiveform-emailinput'}" data-sly-unwrap>
     </div>

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

@@ -49,7 +49,6 @@
                 required="${file.required}"
                 accept="${file.accept}"
                 id="${file.id}_widget"
-                aria-describedby="${file.id}__errormessage ${file.id}__longdescription ${file.id}__shortdescription"
                 type="file"
                 data-cmp-data-layer="${file.data.json}"
            />

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

@@ -49,7 +49,6 @@
             disabled="${!numberinput.enabled}"
             readonly="${numberinput.readOnly}"
             required="${numberinput.required}"
-            aria-describedby="${numberinput.id}__errormessage ${numberinput.id}__longdescription ${numberinput.id}__shortdescription"
             placeholder="${numberinput.placeHolder}"
             dir="auto"/>
     <div data-sly-call="${shortDescription.shortDescription @componentId=numberinput.id, shortDescriptionVisible=numberinput.tooltipVisible, shortDescription=numberinput.tooltip, bemBlock='cmp-adaptiveform-numberinput'}" data-sly-unwrap>

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

@@ -122,6 +122,12 @@
             });
         }
 
+        updateValidity(validity) {
+            const valid = validity.valid ? validity.valid : false;
+            let widgets = this.widget;
+            widgets.forEach(widget => widget.setAttribute(FormView.Constants.ARIA_INVALID, !valid));
+        } 
+
         updateValue(modelValue) {
             this.widget.forEach(widget => {
                 if (modelValue != null && widget.value != null && (modelValue.toString() == widget.value.toString())) {
@@ -158,6 +164,7 @@
         updateEnumNames(newEnumNames) {
             super.updateEnumNamesForRadioButtonAndCheckbox(newEnumNames, this.#createRadioOption)
         }
+
         updateRequired(required, state) {
             if (this.widget) {
                 this.element.toggleAttribute("required", required);

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

@@ -37,7 +37,7 @@
       <div data-sly-call="${label.label @componentId=widgetId, labelValue=radioButton.label.value, labelVisible=radioButton.label.visible, labelRichText=radioButton.label.richText, bemBlock='cmp-adaptiveform-radiobutton'}" data-sly-unwrap></div>
       <div data-sly-call="${questionMark.questionMark @componentId=radiobutton.id, longDescription=radioButton.description, bemBlock='cmp-adaptiveform-radiobutton'}" data-sly-unwrap></div>
     </div>
-    <div class="cmp-adaptiveform-radiobutton__widget ${radioButton.orientation}" id="${widgetId}">
+    <div class="cmp-adaptiveform-radiobutton__widget ${radioButton.orientation}" id="${widgetId}" role="radiogroup">
       <div data-sly-list="${radioButton.enums}" data-sly-unwrap>
           <div class="cmp-adaptiveform-radiobutton__option">
               <label class="cmp-adaptiveform-radiobutton__option-label"
@@ -48,7 +48,7 @@
                         value="${item.toString}"
                         disabled="${!radioButton.enabled || radioButton.readOnly}"
                         checked="${radioButton.enums[itemList.index] == radioButton.default[0]}"
-                        aria-describedby="${radioButton.id}__errormessage ${radioButton.id}__longdescription ${radioButton.id}__shortdescription"/>
+                        />
                   <span>${radioButton.enumNames[itemList.index]}</span>
               </label>
           </div>

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

@@ -48,7 +48,6 @@
                    aria-label="${switch.label.value}"
                    disabled="${!switch.enabled || switch.readOnly}"
                    value="${switch.default}"
-                   aria-describedby="${switch.id}__errormessage ${switch.id}__longdescription ${switch.id}__shortdescription"
                    aria-readonly="${switch.readOnly ? 'true' : ''}">
             <div class="cmp-adaptiveform-switch__widget-slider">
                 <div class="cmp-adaptiveform-switch__circle-indicator"></div>

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

@@ -48,7 +48,6 @@
            required="${telText.required}"
            placeholder="${telText.placeHolder}"
            autocomplete="${telText.autoComplete}"
-           aria-describedby="${telText.id}__errormessage ${telText.id}__longdescription ${telText.id}__shortdescription"
            minlength="${telText.minLength}"
            maxlength="${telText.maxLength}"
            dir="auto"/>

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

@@ -18,7 +18,6 @@
      data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
      data-cmp-is="adaptiveFormText"
      id="${textModel.id}"
-     name="${textModel.name}"
      data-cmp-data-layer="${textModel.data.json}"
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"
      data-cmp-visible="${textModel.visible}"

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

@@ -63,7 +63,6 @@
            required="${text.required}"
            placeholder="${text.placeHolder}"
            autocomplete="${text.autoComplete}"
-           aria-describedby="${text.id}__errormessage ${text.id}__longdescription ${text.id}__shortdescription"
            minlength="${text.minLength}"
            maxlength="${text.maxLength}"
            dir="auto"/>

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

@@ -25,7 +25,6 @@
                  value="${checkboxgroup.enums[itemList.index].toString}"
                  checked="${checkboxgroup.enums[itemList.index] in checkboxgroup.default }"
                  disabled="${!checkboxgroup.enabled || checkboxgroup.readOnly}"
-                 aria-describedby="${checkboxgroup.id}__errormessage ${checkboxgroup.id}__longdescription ${checkboxgroup.id}__shortdescription"
                  aria-readonly="${checkboxgroup.readOnly ? 'true' : ''}"/>
           <a class="cmp-adaptiveform-checkboxgroup__links" title="${checkboxgroup.enumNames[itemList.index]}" href="${checkboxgroup.enums[itemList.index].toString@context='uri'}" target="_blank">
             <span>${checkboxgroup.enumNames[itemList.index] @ context = 'html'}</span>

ui.frontend/src/utils.js

@@ -233,24 +233,8 @@ class Utils {
      */
     static updateId(htmlElement, oldId, newId) {
         let elementWithId = htmlElement.querySelectorAll("#" + oldId)[0];
-        let errorElementWithId = htmlElement.querySelector("#" + `${oldId}__errormessage`);
-        let elementWithDescId = htmlElement.querySelector("#" + `${oldId}-widget`);
-        let elementWithShortDescId = htmlElement.querySelector("#" + `${oldId}__shortdescription`);
-        let elementWithLongDescId = htmlElement.querySelector("#" + `${oldId}__longdescription`);
         if (elementWithId) {
             elementWithId.id = newId;
-        };
-        if (errorElementWithId) {
-            errorElementWithId.id = newId;
-        };
-        if (elementWithDescId) {
-            elementWithDescId.id = newId;
-        };
-        if (elementWithShortDescId) {
-            elementWithShortDescId.id = newId;
-        };
-        if (elementWithLongDescId) {
-            elementWithLongDescId.id = newId;
         }
     }
 

ui.frontend/src/view/FormFieldBase.js

@@ -171,13 +171,48 @@ class FormFieldBase extends FormField {
         }
     }
 
+
+    #syncError() {
+        let errorElement = typeof this.getErrorDiv === 'function' ? this.getErrorDiv() : null;
+        if (errorElement) {
+            errorElement.setAttribute('id', `${this.getId()}__errormessage`);
+        }
+    }   
+
+    #syncShortDesc() {
+        let shortDescElement = typeof this.getTooltipDiv === 'function' ? this.getTooltipDiv() : null;
+        if (shortDescElement) {
+            shortDescElement.setAttribute('id', `${this.getId()}__shortdescription`);
+        }
+    } 
+
+    #syncLongDesc() {
+        let longDescElement = typeof this.getDescription === 'function' ? this.getDescription() : null;
+        if (longDescElement) {
+            longDescElement.setAttribute('id', `${this.getId()}__longdescription`);
+        }
+    } 
+
+    #syncAriaDescribedBy() {
+        let widgetElement = typeof this.getWidget === 'function' ? this.getWidget() : null;
+        let widgetElements = typeof this.getWidgets === 'function' ? this.getWidgets() : null;
+        widgetElement = widgetElements || widgetElement;
+        if (widgetElement) {
+            widgetElement.setAttribute('aria-describedby', `${this.getId()}__errormessage ${this.getId()}__shortdescription ${this.getId()}__longdescription`);
+        }
+    }
+
     /**
      * Synchronizes the markup with the model.
      * @method
      */
     syncMarkupWithModel() {
         this.#syncLabel()
         this.#syncWidget()
+        this.#syncShortDesc()
+        this. #syncLongDesc()
+        this.#syncAriaDescribedBy()
+        this.#syncError()
     }
 
     /**
@@ -435,8 +470,8 @@ class FormFieldBase extends FormField {
         // todo: handle the type of validity if required later
         const valid = validity.valid;
         if (this.errorDiv) {
-            this.toggle(valid, Constants.ARIA_INVALID, true);
             this.element.setAttribute(Constants.DATA_ATTRIBUTE_VALID, valid);
+            this.widget.setAttribute(Constants.ARIA_INVALID, !valid);
             this.updateValidationMessage(state.validationMessage, state);
         }
     }

ui.frontend/src/view/FormOptionFieldBase.js

@@ -62,8 +62,6 @@ class FormOptionFieldBase extends FormFieldBase {
         }
     }
 
-
-
     /**
      * Common method to update the enums Names of checkbox and radiobutton
      * @param {Array} newEnumsNames - updated enum Names values

ui.tests/test-module/specs/actions/setFocus/setFocus.runtime.spec.js

@@ -33,7 +33,7 @@ describe("SetFocus Test", () => {
             });
         });
         cy.get(focusTnC).click().then(() => {
-            cy.get('[name="consenttext"]').should('have.attr', 'data-cmp-active', 'true');
+            cy.get('[data-cmp-is="adaptiveFormText"]').should('have.attr', 'data-cmp-active', 'true');
         })
     });
 

ui.tests/test-module/specs/checkbox/checkbox.runtime.spec.js

@@ -124,7 +124,8 @@ describe("Form Runtime with CheckBox Input", () => {
         cy.get(`#${id}`).find("input").click().then(x => {
             cy.get(`#${id}`).find(".cmp-adaptiveform-checkbox__errormessage").should('have.text',"This is a custom required checkbox")
             cy.get(`#${id} > div.${bemBlock}__errormessage`).should('have.attr', 'id', `${id}__errormessage`)
-            cy.get(`#${id} > .${bemBlock}__widget-container > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${id}__errormessage ${id}__longdescription ${id}__shortdescription`)
+            cy.get(`#${id} > .${bemBlock}__widget-container > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${id}__errormessage ${id}__shortdescription ${id}__longdescription`)
+            cy.get(`#${id} > .${bemBlock}__widget-container > .${bemBlock}__widget`).should('have.attr', 'aria-invalid', 'true')
         })
 
         cy.get(`#${id}`).find("input").click().then(x => {

ui.tests/test-module/specs/checkboxgroup/checkboxgroup.runtime.spec.js

@@ -157,11 +157,13 @@ describe("Form Runtime with CheckBoxGroup Input", () => {
         cy.get(`#${checkBox3}`).find("input").uncheck().check(["0"]).blur().then(x => {
             cy.get(`#${checkBox5}`).find("input").uncheck().check(["1"])
             cy.get(`#${checkBox5}`).find(".cmp-adaptiveform-checkboxgroup__errormessage").should('have.text',"Please enter a valid value.")
+            cy.get(`#${checkBox5}`).find(".cmp-adaptiveform-checkboxgroup__widget").should('have.attr', 'aria-describedby', `${checkBox5}__errormessage ${checkBox5}__shortdescription ${checkBox5}__longdescription`)
         })
 
         cy.get(`#${checkBox3}`).find("input").uncheck().check(["0"]).blur().then(x => {
             cy.get(`#${checkBox5}`).find("input").uncheck().check(["0"])
             cy.get(`#${checkBox5}`).find(".cmp-adaptiveform-checkboxgroup__errormessage").should('have.text',"")
+            cy.get(`#${checkBox5}`).find(".cmp-adaptiveform-checkboxgroup__option__widget").should('have.attr', 'aria-invalid', 'false');
         })
     })
 

ui.tests/test-module/specs/datepicker/datepicker.runtime.spec.js

@@ -143,7 +143,8 @@ describe("Form Runtime with Date Picker", () => {
         cy.get(`#${datePicker4}`).find("input").clear().type(incorrectInput).blur().then(x => {
             cy.get(`#${datePicker4}`).find(".cmp-adaptiveform-datepicker__errormessage").should('have.text',"Please enter a valid value.")
             cy.get(`#${datePicker4} > div.${bemBlock}__errormessage`).should('have.attr', 'id', `${datePicker4}__errormessage`)
-            cy.get(`#${datePicker4} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${datePicker4}__errormessage ${datePicker4}__longdescription ${datePicker4}__shortdescription`)
+            cy.get(`#${datePicker4} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${datePicker4}__errormessage ${datePicker4}__shortdescription ${datePicker4}__longdescription`)
+            cy.get(`#${datePicker4} > .${bemBlock}__widget`).should('have.attr', 'aria-invalid', 'true')
         })
 
         cy.get(`#${datePicker4}`).find("input").clear().type(correctInput).blur().then(x => {

ui.tests/test-module/specs/dropdown/dropdown.runtime.spec.js

@@ -185,7 +185,8 @@ describe("Form with Dropdown", () => {
             cy.get(`#${dropdown6} select`).select("beans")
             cy.get(`#${dropdown6}`).find(".cmp-adaptiveform-dropdown__errormessage").should('have.text',"Please enter a valid value.")
             cy.get(`#${dropdown6} > div.${bemBlock}__errormessage`).should('have.attr', 'id', `${dropdown6}__errormessage`)
-            cy.get(`#${dropdown6} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${dropdown6}__errormessage ${dropdown6}__longdescription ${dropdown6}__shortdescription`)
+            cy.get(`#${dropdown6} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${dropdown6}__errormessage ${dropdown6}__shortdescription ${dropdown6}__longdescription`)
+            cy.get(`#${dropdown6} > .${bemBlock}__widget`).should('have.attr', 'aria-invalid', 'true')
 
             cy.get(`#${dropdown6} select`).select("carrot")
             cy.get(`#${dropdown6}`).find(".cmp-adaptiveform-dropdown__errormessage").should('have.text',"")

ui.tests/test-module/specs/emailinput/emailinput.runtime.spec.js

@@ -94,7 +94,8 @@ describe("Form Runtime with Email Input", () => {
         cy.get(`#${id}`).find("input").clear().type(notAllowed).blur().then(x => {
             cy.get('.cmp-adaptiveform-emailinput__errormessage').should('be.visible');
             cy.get(`#${id} > div.${bemBlock}__errormessage`).should('have.attr', 'id', `${id}__errormessage`);
-            cy.get(`#${id} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${id}__errormessage ${id}__longdescription ${id}__shortdescription`);
+            cy.get(`#${id} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${id}__errormessage ${id}__shortdescription ${id}__longdescription`);
+            cy.get(`#${id} > .${bemBlock}__widget`).should('have.attr', 'aria-invalid', 'true');
         })
         const invalidEmailPattern = "invalidEmail@domain"
         cy.get(`#${id}`).find("input").clear().type(invalidEmailPattern).blur().then(x => {

ui.tests/test-module/specs/fileinput/fileinput.runtime.spec.js

@@ -143,6 +143,7 @@ describe("Form with File Input - Basic Tests", () => {
                         let expectedFileName = Array.isArray(model.getState().value) ? model.getState().value[0].name : model.getState().value.name;
                         expect(expectedFileName).to.equal(fileName)
                         cy.get(`#${id}`).should('have.class', 'cmp-adaptiveform-fileinput--filled');
+                        cy.get(`#${id}`).find(".cmp-adaptiveform-fileinput__widget").should('have.attr', 'aria-invalid', 'false');
                     })
                 }
             }

ui.tests/test-module/specs/numberinput/numberinput.runtime.spec.js

@@ -166,7 +166,8 @@ describe("Form with Number Input", () => {
         cy.get(`#${numberInput4}`).find("input").clear().type(incorrectInput).blur().then(x => {
             cy.get(`#${numberInput4}`).find(".cmp-adaptiveform-numberinput__errormessage").should('have.text',"Please enter a valid value.")
             cy.get(`#${numberInput4} > div.${bemBlock}__errormessage`).should('have.attr', 'id', `${numberInput4}__errormessage`)
-            cy.get(`#${numberInput4} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${numberInput4}__errormessage ${numberInput4}__longdescription ${numberInput4}__shortdescription`)
+            cy.get(`#${numberInput4} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${numberInput4}__errormessage ${numberInput4}__shortdescription ${numberInput4}__longdescription`)
+            cy.get(`#${numberInput4} > .${bemBlock}__widget`).should('have.attr', 'aria-invalid', 'true')
         })
 
         cy.get(`#${numberInput4}`).find("input").clear().type(correctInput).blur().then(x => {