fix: do not add aria-describedby to hidden inputs

diff --git a/js/foundation.abide.js b/js/foundation.abide.js
index cd1aca3490707333a2bd1bdfe60d1c68ed959f53..6bf27f507b896456148bbaafce086e25baf6a523 100644 (file)
--- a/js/foundation.abide.js
+++ b/js/foundation.abide.js
@@ -328,6 +328,7 @@ class Abide extends Plugin {
   }
 
   addA11yErrorDescribe($el, $error) {
+    if ($el.attr('type') === 'hidden') return;
     if (typeof $el.attr('aria-describedby') !== 'undefined') return;
 
     // Set [aria-describedby] on the input toward the first form error if it is not set

diff --git a/test/javascript/components/abide.js b/test/javascript/components/abide.js
index 19ea148db168440c0f8d189fa3cb0b21507154d5..c49ee1ae86b6bb4422119756a351be3dc88475d0 100644 (file)
--- a/test/javascript/components/abide.js
+++ b/test/javascript/components/abide.js
@@ -157,6 +157,19 @@ describe('Abide', function() {
       $html.find('input').should.not.have.attr('aria-describedby', 'test-error');
     });
 
+    it('does not add [aria-describedby] to the field if the input is hidden', function() {
+      $html = $(`
+        <form data-abide>
+          <input type="hidden" id="test-input">
+          <span class="form-error is-visible" id="test-error">Form error</span>
+        </form>
+      `).appendTo('body');
+      plugin = new Foundation.Abide($html, {});
+      plugin.addA11yAttributes($html.find('input'));
+
+      $html.find('input').should.not.have.attr('aria-describedby', 'test-error');
+    });
+
     it('adds [aria-describedby] to the field if the form error is shown after a validation error', function() {
       $html = $(`
         <form data-abide>