feat: add [aria-live] on [data-abide-error] on form validation

Add Abide option: `globalErrorAriaLevel`

diff --git a/js/foundation.abide.js b/js/foundation.abide.js
index 2b172875823125a092ecbf5cee06a45c3675651c..74d572e888ec87ca7d060e8c78a74af254af981d 100644 (file)
--- a/js/foundation.abide.js
+++ b/js/foundation.abide.js
@@ -344,7 +344,11 @@ class Abide extends Plugin {
 
     var noError = acc.indexOf(false) === -1;
 
-    this.$element.find('[data-abide-error]').css('display', (noError ? 'none' : 'block'));
+    this.$element.find('[data-abide-error]').each((i, elem) => {
+      const $elem = $(elem);
+      $elem.attr('aria-live', $elem.attr('data-aria-level') || this.options.globalErrorAriaLevel);
+      $elem.css('display', (noError ? 'none' : 'block'));
+    });
 
     /**
      * Fires when the form is finished validating. Event trigger is either `formvalid.zf.abide` or `forminvalid.zf.abide`.
@@ -532,6 +536,16 @@ Abide.defaults = {
    */
   formErrorClass: 'is-visible',
 
+  /**
+   * Aria-live level to be applied on global errors `[data-abide-error]`.
+   * Options are: 'assertive', 'polite' and 'off'/null
+   * @option
+   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+   * @type {string}
+   * @default 'assertive'
+   */
+  globalErrorAriaLevel: 'assertive',
+
   /**
    * Set to true to validate text inputs on any value change.
    * @option