@wavemaker/app-ng-runtime 11.4.0-next.28152 → 11.4.0-rc.5339

app-ng-runtime/components/data/form/fesm2015/index.js

@@ -129,16 +129,21 @@ const findInvalidElement = ($formEle, ngForm) => {
     };
 };
 const ɵ2 = findInvalidElement;
-const setTouchedState = ngForm => {
+const setTouchedState = (self, ngForm, fieldName) => {
+    var _a, _b;
     if (ngForm.valid) {
         return;
     }
     if (ngForm.controls) {
-        _.forEach(ngForm.controls, ctrl => {
-            setTouchedState(ctrl);
+        _.forEach(ngForm.controls, (ctrl, fieldName) => {
+            setTouchedState(self, ctrl, fieldName);
         });
     }
     else {
+        const element = self.$element.find(`[wmformfield][key="${fieldName}"]`);
+        element[0].setAttribute('__errormsg', element[0].getAttribute('__validationId'));
+        (_a = element[0].querySelector('input')) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-invalid', ngForm.invalid);
+        (_b = element[0].querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-describedby', element[0].getAttribute('__validationId'));
         ngForm.markAsTouched();
     }
 };
@@ -436,7 +441,7 @@ class FormComponent extends StylableComponent {
     }
     // This method loops through the form fields and highlights the invalid fields by setting state to touched
     highlightInvalidFields() {
-        setTouchedState(this.ngform);
+        setTouchedState(this, this.ngform, '');
     }
     // Disable the form submit if form is in invalid state. Highlight all the invalid fields if validation type is default
     validateFieldsOnSubmit() {
@@ -1439,10 +1444,20 @@ class FormFieldDirective extends StylableComponent {
         $($evt.target).closest('.live-field').addClass('active');
     }
     _onBlurField($evt) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         $($evt.target).closest('.live-field').removeClass('active');
-        (_a = this.nativeElement.querySelector('input')) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-invalid', `${this.ngform.controls[this._fieldName].invalid}`);
-        (_b = this.nativeElement.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-describedby', `${this.nativeElement.getAttribute('__errormsg')}`);
+        const ele = this.nativeElement.querySelector('p.text-danger');
+        // Fix for [WMS-23959]: ADA issue - adding aria-describedby, aria-invalid, __errormsg attributes only when the form field is invalid , else removing the attributes
+        if (this.ngform.controls[this._fieldName].invalid && this.ngform.controls[this._fieldName].touched && this.form.isUpdateMode) {
+            this.nativeElement.setAttribute('__errormsg', `${this.nativeElement.getAttribute('__validationId')}`);
+            (_a = this.nativeElement.querySelector('input')) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-invalid', `${this.ngform.controls[this._fieldName].invalid}`);
+            (_b = this.nativeElement.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-describedby', `${this.nativeElement.getAttribute('__validationId')}`);
+        }
+        else {
+            this.nativeElement.removeAttribute('__errormsg');
+            (_c = this.nativeElement.querySelector('input')) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-invalid');
+            (_d = this.nativeElement.querySelector('input')) === null || _d === void 0 ? void 0 : _d.removeAttribute('aria-describedby');
+        }
         this._activeField = false;
         this._triggeredByUser = false;
         this._clicktriggeredByUser = false;
@@ -1641,7 +1656,7 @@ class FormFieldDirective extends StylableComponent {
     }
     // On field value change, propagate event to parent form
     onValueChange(val) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (!this.isDestroyed) {
             const captionEl = $(this.nativeElement).find('.caption-floating');
             if (captionEl.length > 0) {
@@ -1651,8 +1666,17 @@ class FormFieldDirective extends StylableComponent {
                 const hasValue = ((isDefined(val) && val !== '' && val !== null) || captionEl.find('input').val()) || captionEl.find('input:-webkit-autofill').length;
                 this.app.notify('captionPositionAnimate', { displayVal: hasValue, nativeEl: captionEl, isSelectMultiple: this.formWidget && this.formWidget.multiple, isFocused: this._activeField });
             }
-            (_a = this.nativeElement.querySelector('input')) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-invalid', this._triggeredByUser && this.ngform.controls[this._fieldName].invalid ? 'true' : 'false');
-            (_b = this.nativeElement.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-describedby', `${this.nativeElement.getAttribute('__errormsg')}`);
+            // Fix for [WMS-23959]: ADA issue - adding aria-describedby, aria-invalid, __errormsg attributes only when the form field is invalid , else removing the attributes
+            if (this.ngform.controls[this._fieldName].invalid && this.ngform.controls[this._fieldName].touched && this.form.isUpdateMode) {
+                this.nativeElement.setAttribute('__errormsg', `${this.nativeElement.getAttribute('__validationId')}`);
+                (_a = this.nativeElement.querySelector('input')) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-invalid', this._triggeredByUser && this.ngform.controls[this._fieldName].invalid ? 'true' : 'false');
+                (_b = this.nativeElement.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-describedby', `${this.nativeElement.getAttribute('__validationId')}`);
+            }
+            else {
+                this.nativeElement.removeAttribute('__errormsg');
+                (_c = this.nativeElement.querySelector('input')) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-invalid');
+                (_d = this.nativeElement.querySelector('input')) === null || _d === void 0 ? void 0 : _d.removeAttribute('aria-describedby');
+            }
             this.form.onFieldValueChange(this, val);
             this.notifyChanges();
             // Do mark as touched, only incase when user has entered an input but not through the script. Hence added mousedown event check