Merge pull request #12496 from ahukkanen/fix/hidden-input-aria-descri…

…bedby fix: do not add aria-describedby to hidden inputs
foundation · Sep 27, 2024 · 3ea67b0 · 3ea67b0
2 parents 570374b + dff781f
commit 3ea67b0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git 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
@@ -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>