aw-front-helpers 2.5.4 → 2.5.6

package/classes/formControl.js

@@ -100,25 +100,42 @@ export default class FormControl {
 
   setError(element, message = null) {
     const parent = element.closest(this._options.selectorGroup);
-    if( parent === null ) return;
+    if (parent === null) return;
     let error = parent.querySelector(`.${this._options.classErrorElement}`);
+    parent.classList.add(this._options.classIsError);
+    const id = `error-${[...Array(6)].map(() => Math.floor(Math.random() * 16).toString(16)).join('')}`;
     if (!error) {
       error = Object.assign(
-        document.createElement('ul'), {
-        className: this._options.classErrorElement
+        document.createElement('p'), {
+          id,
+          className: this._options.classErrorElement,
+          innerHTML: message
       });
+      element.setAttribute('aria-describedby', id);
       parent.appendChild(error);
-    }
-    parent.classList.add(this._options.classIsError);
-
-    const previousErrors = [...error.querySelectorAll('li')];
-    for (let i = 0; i < previousErrors.length; i++) {
-      if (previousErrors[i].innerHTML === message) return;
-    }
-    if (message) {
-      const errorElement = document.createElement('li');
-      errorElement.innerHTML = message;
-      error.appendChild(errorElement);
+    } else {
+      if (error.tagName === 'P') {
+        if (message === error.innerHTML) return;
+        const newError = Object.assign(
+          document.createElement('ul'), {
+            id,
+            className: this._options.classErrorElement,
+            innerHTML: `<li>${error.innerHTML}</li>`
+        });
+        element.setAttribute('aria-describedby', id);
+        parent.appendChild(newError);
+        error.parentNode.removeChild(error);
+        error = newError;
+      }
+      const previousErrors = [...error.querySelectorAll('li')];
+      for (let i = 0; i < previousErrors.length; i++) {
+        if (previousErrors[i].innerHTML === message) return;
+      }
+      if (message) {
+        const errorElement = document.createElement('li');
+        errorElement.innerHTML = message;
+        error.appendChild(errorElement);
+      }
     }
   }
 
@@ -149,14 +166,14 @@ export default class FormControl {
   /** @private */
   _formCreateBound() {
     ['_onChange', '_onFormSubmit', 'onFormSubmit']
-    .forEach((fn) => this[fn] = this[fn].bind(this));
+      .forEach((fn) => this[fn] = this[fn].bind(this));
   }
 
   /** @private */
   _removeError(el = null) {
     if (el) {
-      const group = el.closest( this._options.selectorGroup );
-      if( group === null ) return;
+      const group = el.closest(this._options.selectorGroup);
+      if (group === null) return;
       group.classList.remove(this._options.classIsError);
       const currentErrors = [...group.querySelectorAll(`.${this._options.classErrorElement}`)];
       currentErrors.forEach(error => {
@@ -219,11 +236,14 @@ export default class FormControl {
       if (!isValid && firstErrorElement === null) firstErrorElement = el;
     }
 
-    if (!isValid && firstErrorElement && this._options.animateToFirstError) {
-      gsap.to(window, {
-        duration: .6,
-        scrollTo: (window.pageYOffset + firstErrorElement.getBoundingClientRect().top - 150)
-      })
+    if (!isValid && firstErrorElement) {
+      firstErrorElement.focus();
+      if (this._options.animateToFirstError) {
+        gsap.to(window, {
+          duration: .6,
+          scrollTo: (window.pageYOffset + firstErrorElement.getBoundingClientRect().top - 150)
+        })
+      }
     }
     return isValid;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-front-helpers",
-  "version": "2.5.4",
+  "version": "2.5.6",
   "description": "Assets helpers for projects",
   "author": "Yoann Le Poupon",
   "license": "ISC",
@@ -12,6 +12,6 @@
   "dependencies": {
     "es6-symbol": "^3.1.3",
     "exif-js": "^2.3.0",
-    "gsap": "^3.10.4"
+    "gsap": "^3.12.1"
   }
 }