@wavemaker/app-ng-runtime 11.4.0-next.1417070 → 11.4.0-next.1417071

app-ng-runtime/components/data/form/bundles/index.umd.js

@@ -436,16 +436,21 @@
         };
     };
     var ɵ2 = findInvalidElement;
-    var setTouchedState = function (ngForm) {
+    var setTouchedState = function (self, ngForm, fieldName) {
+        var _a, _b;
         if (ngForm.valid) {
             return;
         }
         if (ngForm.controls) {
-            _.forEach(ngForm.controls, function (ctrl) {
-                setTouchedState(ctrl);
+            _.forEach(ngForm.controls, function (ctrl, fieldName) {
+                setTouchedState(self, ctrl, fieldName);
             });
         }
         else {
+            var 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();
         }
     };
@@ -766,7 +771,7 @@
         };
         // This method loops through the form fields and highlights the invalid fields by setting state to touched
         FormComponent.prototype.highlightInvalidFields = function () {
-            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
         FormComponent.prototype.validateFieldsOnSubmit = function () {
@@ -1357,8 +1362,8 @@
         FormComponent.prototype.generateFormFields = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var noOfColumns, $gridLayout, columnWidth, fieldTemplate, colCount, index, userFields, fields, colTmpl, componentFactoryRef, component;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             // Check if grid layout is present or not for first time
                             if (_.isUndefined(this._isGridLayoutPresent)) {
@@ -1416,7 +1421,7 @@
                                     transpile: true
                                 })];
                         case 1:
-                            componentFactoryRef = _b.sent();
+                            componentFactoryRef = _c.sent();
                             component = this.dynamicFormRef.createComponent(componentFactoryRef, 0, this.inj);
                             core.extendProto(component.instance, this._dynamicContext);
                             $gridLayout[0].appendChild(component.location.nativeElement);
@@ -1828,10 +1833,20 @@
             $($evt.target).closest('.live-field').addClass('active');
         };
         FormFieldDirective.prototype._onBlurField = function ($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'));
+            var 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;
@@ -2067,7 +2082,7 @@
         };
         // On field value change, propagate event to parent form
         FormFieldDirective.prototype.onValueChange = function (val) {
-            var _a, _b;
+            var _a, _b, _c, _d;
             if (!this.isDestroyed) {
                 var captionEl = $(this.nativeElement).find('.caption-floating');
                 if (captionEl.length > 0) {
@@ -2077,8 +2092,17 @@
                     var hasValue = ((core.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