fix(aria-valid-attr-value): pass for aria-errormessage when aria-inva…

…lid is not set or false (#2721)
dequelabs · Jan 4, 2021 · 93a765c · 93a765c
1 parent 9903d7d
commit 93a765c
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 31 deletions.
diff --git a/lib/checks/aria/aria-errormessage-evaluate.js b/lib/checks/aria/aria-errormessage-evaluate.js
@@ -29,6 +29,14 @@ function ariaErrormessageEvaluate(node, options) {
 
   const attr = node.getAttribute('aria-errormessage');
   const hasAttr = node.hasAttribute('aria-errormessage');
+  const invaid = node.getAttribute('aria-invalid');
+  const hasInvallid = node.hasAttribute('aria-invalid');
+
+  // pass if aria-invalid is not set or set to false as we don't
+  // need to check the referenced node since it is not applicable
+  if (!hasInvallid || invaid === 'false') {
+    return true;
+  }
 
   const doc = getRootNode(node);
 

diff --git a/test/checks/aria/errormessage.js b/test/checks/aria/errormessage.js
@@ -13,9 +13,9 @@ describe('aria-errormessage', function() {
   });
 
   it('should return false if aria-errormessage value is invalid', function() {
-    var testHTML = '<div></div>';
-    testHTML += '<div id="plain"></div>';
-    fixture.innerHTML = testHTML;
+    fixture.innerHTML =
+      '<div aria-errormessage="plain" aria-invalid="true">' +
+      '<div id="plain"></div>';
     var target = fixture.children[0];
     target.setAttribute('aria-errormessage', 'plain');
     assert.isFalse(
@@ -26,8 +26,8 @@ describe('aria-errormessage', function() {
   });
 
   it('should return undefined if aria-errormessage references an element that does not exist', function() {
-    var testHTML = '<div></div>';
-    fixture.innerHTML = testHTML;
+    fixture.innerHTML =
+      '<div aria-errormessage="plain" aria-invalid="true">' + '<div></div>';
     var target = fixture.children[0];
     target.setAttribute('aria-errormessage', 'plain');
     assert.isUndefined(
@@ -38,9 +38,9 @@ describe('aria-errormessage', function() {
   });
 
   it('should return true if aria-errormessage id is alert', function() {
-    var testHTML = '<div></div>';
-    testHTML += '<div id="alert" role="alert"></div>';
-    fixture.innerHTML = testHTML;
+    fixture.innerHTML =
+      '<div aria-errormessage="alert" aria-invalid="true">' +
+      '<div id="alert" role="alert"></div>';
     var target = fixture.children[0];
     target.setAttribute('aria-errormessage', 'alert');
     assert.isTrue(
@@ -51,9 +51,9 @@ describe('aria-errormessage', function() {
   });
 
   it('should return true if aria-errormessage id is aria-live=assertive', function() {
-    var testHTML = '<div></div>';
-    testHTML += '<div id="live" aria-live="assertive"></div>';
-    fixture.innerHTML = testHTML;
+    fixture.innerHTML =
+      '<div aria-errormessage="live" aria-invalid="true">' +
+      '<div id="live" aria-live="assertive"></div>';
     var target = fixture.children[0];
     target.setAttribute('aria-errormessage', 'live');
     assert.isTrue(
@@ -64,12 +64,10 @@ describe('aria-errormessage', function() {
   });
 
   it('should return true if aria-errormessage id is aria-describedby', function() {
-    var testHTML = '<div></div>';
-    testHTML += '<div id="plain"></div>';
-    fixture.innerHTML = testHTML;
+    fixture.innerHTML =
+      '<div aria-errormessage="plain" aria-describedby="plain" aria-invalid="true">' +
+      '<div id="plain"></div>';
     var target = fixture.children[0];
-    target.setAttribute('aria-errormessage', 'plain');
-    target.setAttribute('aria-describedby', 'plain');
     assert.isTrue(
       axe.testUtils
         .getCheckEvaluate('aria-errormessage')
@@ -78,11 +76,10 @@ describe('aria-errormessage', function() {
   });
 
   it('sets an array of IDs in data', function() {
-    var testHTML = '<div></div>';
-    testHTML += '<div id="plain"></div>';
-    fixture.innerHTML = testHTML;
+    fixture.innerHTML =
+      '<div aria-errormessage=" foo  bar \tbaz  " aria-invalid="true">' +
+      '<div id="plain"></div>';
     var target = fixture.children[0];
-    target.setAttribute('aria-errormessage', ' foo  bar \tbaz  ');
     axe.testUtils
       .getCheckEvaluate('aria-errormessage')
       .call(checkContext, target);
@@ -99,14 +96,39 @@ describe('aria-errormessage', function() {
         }
       }
     });
-    fixture.innerHTML = '<div aria-errormessage=" "></div>';
+    fixture.innerHTML = '<div aria-errormessage=" " aria-invalid="true"></div>';
     assert.isTrue(
       axe.testUtils
         .getCheckEvaluate('aria-errormessage')
         .call(checkContext, fixture.children[0])
     );
   });
 
+  it('should return true when aria-invalid is not set', function() {
+    fixture.innerHTML =
+      '<div aria-errormessage="plain">' + '<div id="plain"></div>';
+    var target = fixture.children[0];
+    target.setAttribute('aria-errormessage', 'plain');
+    assert.isTrue(
+      axe.testUtils
+        .getCheckEvaluate('aria-errormessage')
+        .call(checkContext, target)
+    );
+  });
+
+  it('should return true when aria-invalid=false', function() {
+    fixture.innerHTML =
+      '<div aria-errormessage="plain" aria-invalid="false">' +
+      '<div id="plain"></div>';
+    var target = fixture.children[0];
+    target.setAttribute('aria-errormessage', 'plain');
+    assert.isTrue(
+      axe.testUtils
+        .getCheckEvaluate('aria-errormessage')
+        .call(checkContext, target)
+    );
+  });
+
   it('returns false when aria-errormessage is empty, if that is not allowed', function() {
     axe.configure({
       standards: {
@@ -117,7 +139,7 @@ describe('aria-errormessage', function() {
         }
       }
     });
-    fixture.innerHTML = '<div aria-errormessage=" "></div>';
+    fixture.innerHTML = '<div aria-errormessage=" " aria-invalid="true"></div>';
     assert.isFalse(
       axe.testUtils
         .getCheckEvaluate('aria-errormessage')
@@ -129,7 +151,7 @@ describe('aria-errormessage', function() {
     'should return undefined if aria-errormessage value crosses shadow boundary',
     function() {
       var params = shadowCheckSetup(
-        '<div id="target" aria-errormessage="live"></div>',
+        '<div id="target" aria-errormessage="live" aria-invalid="true"></div>',
         '<div id="live" aria-live="assertive"></div>'
       );
       assert.isUndefined(
@@ -145,7 +167,7 @@ describe('aria-errormessage', function() {
     function() {
       var params = shadowCheckSetup(
         '<div></div>',
-        '<div id="target" aria-errormessage="live"</div>' +
+        '<div id="target" aria-errormessage="live" aria-invalid="true"></div>' +
           '<div id="live"></div>'
       );
       assert.isFalse(
@@ -161,7 +183,7 @@ describe('aria-errormessage', function() {
     function() {
       var params = shadowCheckSetup(
         '<div></div>',
-        '<div id="target" aria-errormessage="live"</div>' +
+        '<div id="target" aria-errormessage="live" aria-invalid="true"></div>' +
           '<div id="live" aria-live="assertive"></div>'
       );
       assert.isTrue(

diff --git a/test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.html b/test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.html
@@ -36,7 +36,9 @@ <h2>Violations</h2>
   <div aria-valuemax="stuff" id="violation32">hi</div>
   <div aria-valuemin="stuff" id="violation33">hi</div>
   <div aria-valuenow="stuff" id="violation34">hi</div>
-  <div aria-errormessage="violation35-ref" id="violation35">hi</div>
+  <div aria-errormessage="violation35-ref" aria-invalid="true" id="violation35">
+    hi
+  </div>
   <div id="violation35-ref"></div>
   <div aria-valuetext="" id="violation36"></div>
   <!-- don't allow empty aria-valuetext -->
@@ -248,17 +250,24 @@ <h2>Possible False Positives</h2>
   <div aria-valuenow="-.1" id="pass165">hi</div>
   <div aria-valuenow="-412" id="pass166">hi</div>
   <div aria-valuetext="stuff" id="pass167">hi</div>
-  <div aria-errormessage="pass168-ref" id="pass168">hi</div>
+  <div aria-errormessage="pass168-ref" id="pass168" aria-invalid="true">hi</div>
   <div id="pass168-ref" role="alert"></div>
-  <div aria-errormessage="pass68" id="pass169">hi</div>
-  <div aria-errormessage="ref" aria-describedby="ref" id="pass170">hi</div>
+  <div aria-errormessage="pass68" id="pass169" aria-invalid="true">hi</div>
+  <div
+    aria-errormessage="ref"
+    aria-describedby="ref"
+    aria-invalid="true"
+    id="pass170"
+  >
+    hi
+  </div>
 
   <div aria-activedescendant="" id="pass171">hi</div>
   <div aria-current="" id="pass172">hi</div>
   <div aria-invalid="" id="pass173">hi</div>
   <div aria-controls="" id="pass174">hi</div>
   <div aria-describedby="" id="pass175">hi</div>
-  <div aria-errormessage="" id="pass176">hi</div>
+  <div aria-errormessage="" id="pass176" aria-invalid="true">hi</div>
   <div aria-flowto="" id="pass177">hi</div>
   <div aria-haspopup="" id="pass178">hi</div>
   <div aria-invalid="" id="pass179">hi</div>
@@ -267,6 +276,8 @@ <h2>Possible False Positives</h2>
   <div aria-labelledby="" id="pass182">hi</div>
   <div aria-owns="" id="pass183">hi</div>
   <div aria-placeholder="" id="pass184">hi</div>
+  <div aria-errormessage="invalidId" id="pass185">hi</div>
+  <div aria-errormessage="invalidId" aria-invalid="false" id="pass186">hi</div>
 
   <div id="ref">Hi</div>
   <div id="ref2">Hi2</div>

diff --git a/test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.json b/test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.json
@@ -221,7 +221,9 @@
     ["#pass181"],
     ["#pass182"],
     ["#pass183"],
-    ["#pass184"]
+    ["#pass184"],
+    ["#pass185"],
+    ["#pass186"]
   ],
   "incomplete": [["#incomplete1"], ["#incomplete2"]]
 }