Fix accessibility : Fix aria-describedby when using data-parsley-erro…

…r-message - Add aria-hidden attribute on error wrapper
guillaumepotier · Oct 6, 2019 · a1a5d36 · a1a5d36
1 parent 04f744e
commit a1a5d36
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/src/parsley/ui.js b/src/parsley/ui.js
@@ -170,14 +170,20 @@ UI.Field = {
               .addClass('parsley-custom-error-message')
             );
 
+        this._ui.$errorClassHandler.attr('aria-describedby', this._ui.errorsWrapperId);
+
         return this._ui.$errorsWrapper
           .addClass('filled')
+          .attr('aria-hidden', 'false')
           .find('.parsley-custom-error-message')
           .html(this.options.errorMessage);
       }
 
+      this._ui.$errorClassHandler.removeAttr('aria-describedby');
+
       return this._ui.$errorsWrapper
         .removeClass('filled')
+        .attr('aria-hidden', 'true')
         .find('.parsley-custom-error-message')
         .remove();
     }
@@ -200,6 +206,7 @@ UI.Field = {
       .attr('aria-describedby', this._ui.errorsWrapperId);
     this._ui.$errorsWrapper
       .addClass('filled')
+      .attr('aria-hidden', 'false')
       .append(
         $(this.options.errorTemplate)
         .addClass('parsley-' + name)
@@ -219,6 +226,7 @@ UI.Field = {
       .removeAttr('aria-describedby');
     this._ui.$errorsWrapper
       .removeClass('filled')
+      .attr('aria-hidden', 'true')
       .find('.parsley-' + name)
       .remove();
   },