fix: check for hidden elements on aria-errormessage

lib/checks/aria/aria-errormessage-evaluate.js

@@ -1,7 +1,7 @@
 import standards from '../../standards';
 import { idrefs } from '../../commons/dom';
 import { tokenList } from '../../core/utils';
-
+import { isVisible } from '../../commons/dom';
 /**
  * Check if `aria-errormessage` references an element that also uses a technique to announce the message (aria-live, aria-describedby, etc.).
  *
@@ -55,13 +55,21 @@ function ariaErrormessageEvaluate(node, options, virtualNode) {
     }
 
     if (idref) {
+      if (!isVisible(idref)) {
+        this.data({
+          messageKey: 'hidden',
+          values: tokenList(attr)
+        });
+        return false;
+      }
       return (
         idref.getAttribute('role') === 'alert' ||
         idref.getAttribute('aria-live') === 'assertive' ||
         idref.getAttribute('aria-live') === 'polite' ||
         tokenList(virtualNode.attr('aria-describedby')).indexOf(attr) > -1
       );
     }
+
     return;
   }
 

lib/checks/aria/aria-errormessage.json

@@ -7,7 +7,8 @@
       "pass": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique",
       "fail": {
         "singular": "aria-errormessage value `${data.values}` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)",
-        "plural": "aria-errormessage values `${data.values}` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)"
+        "plural": "aria-errormessage values `${data.values}` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)",
+        "hidden": "aria-errormessage value `${data.values}` cannot be reference a hidden element"
       },
       "incomplete": {
         "singular": "ensure aria-errormessage value `${data.values}` references an existing element",

test/checks/aria/errormessage.js

@@ -144,6 +144,54 @@ describe('aria-errormessage', function() {
     );
   });
 
+  it('should return false when hidden attribute is used', function() {
+    var vNode = queryFixture(
+      '<input type="text" id="target" aria-invalid="true" aria-errormessage="id-message-1"></div>' +
+        '<div id="id-message-1" hidden>Error message 1</div>'
+    );
+    assert.isFalse(
+      axe.testUtils
+        .getCheckEvaluate('aria-errormessage')
+        .call(checkContext, null, null, vNode)
+    );
+    assert.deepEqual(checkContext._data, {
+      messageKey: 'hidden',
+      values: ['id-message-1']
+    });
+  });
+
+  it('should return false when display: "none" is used', function() {
+    var vNode = queryFixture(
+      '<input type="text" id="target" aria-invalid="true" aria-errormessage="id-message-1"></div>' +
+        '<div id="id-message-1" style="display: none">Error message 1</div>'
+    );
+    assert.isFalse(
+      axe.testUtils
+        .getCheckEvaluate('aria-errormessage')
+        .call(checkContext, null, null, vNode)
+    );
+    assert.deepEqual(checkContext._data, {
+      messageKey: 'hidden',
+      values: ['id-message-1']
+    });
+  });
+
+  it('should return false when visibility: "hidden" is used', function() {
+    var vNode = queryFixture(
+      '<input type="text" id="target" aria-invalid="true" aria-errormessage="id-message-1"></div>' +
+        '<div id="id-message-1" style="visibility: hidden">Error message 1</div>'
+    );
+    assert.isFalse(
+      axe.testUtils
+        .getCheckEvaluate('aria-errormessage')
+        .call(checkContext, null, null, vNode)
+    );
+    assert.deepEqual(checkContext._data, {
+      messageKey: 'hidden',
+      values: ['id-message-1']
+    });
+  });
+
   (shadowSupported ? it : xit)(
     'should return undefined if aria-errormessage value crosses shadow boundary',
     function() {