From: Nicolas Coden <nicolas@ncoden.fr>
Date: Tue, 16 Jan 2018 21:17:53 +0000 (+0100)
Subject: feat: add [aria-live] on [data-abide-error] on form validation
X-Git-Tag: v6.6.0~3^2~311^2~9
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=07b2d7670;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 2b1728758..74d572e88 100644
--- 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