aria-errormessage is hidden or removed when not pertinent (#1588)

jongund · spectranaut · jnurthen · web-flow · commit 11902fc61b00 · 2023-04-25T10:14:10.000-07:00
Co-authored-by: Valerie Young &lt;spectranaut@igalia.com&gt;
Co-authored-by: James Nurthen &lt;jnurthen@users.noreply.github.com&gt;
diff --git a/validator-tests/README.md b/validator-tests/README.md
@@ -19,6 +19,8 @@ corresponding changes in validators.
 * [Dialog Must Have Name](dialog-must-have-name.html)
   * @axe-core/cli: [Results](dialog-must-have-name-axe.json)
   * validator.nu: [Results](dialog-must-have-name-vnu.json)
+* [Error message MUST be pertinent](errormessage-hidden-removed.html)
+  * @axe-core/cli: [Results](errormessage-hidden-removed-axe.json), [bug](https://github.com/dequelabs/axe-core-npm/issues/328)
 * [Form MUST have name](form-role-must-have-name.html)
   * @axe-core/cli: [Results](form-role-must-have-name-axe.json), [bug](https://github.com/dequelabs/axe-core-npm/issues/329)
   * validator.nu: [Results](form-role-must-have-name-vnu.json)
diff --git a/validator-tests/errormessage-hidden-removed-axe.json b/validator-tests/errormessage-hidden-removed-axe.json
@@ -0,0 +1,100 @@
+[
+  {
+    "description": "Ensures all ARIA attributes have valid values",
+    "help": "ARIA attributes must conform to valid values",
+    "helpUrl": "https://dequeuniversity.com/rules/axe/4.3/aria-valid-attr-value?application=webdriverjs",
+    "id": "aria-valid-attr-value",
+    "impact": "critical",
+    "nodes": [
+      {
+        "all": [
+          {
+            "data": [
+              "id-message-1"
+            ],
+            "id": "aria-errormessage",
+            "impact": "critical",
+            "message": "aria-errormessage value `id-message-1` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)",
+            "relatedNodes": []
+          }
+        ],
+        "any": [],
+        "failureSummary": "Fix all of the following:\n  aria-errormessage value `id-message-1` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)",
+        "html": "<input type=\"text\" id=\"input-1\" aria-invalid=\"true\" aria-errormessage=\"id-message-1\" class=\"fail\">",
+        "impact": "critical",
+        "none": [],
+        "target": [
+          "#input-1"
+        ]
+      },
+      {
+        "all": [
+          {
+            "data": [
+              "id-message-2"
+            ],
+            "id": "aria-errormessage",
+            "impact": "critical",
+            "message": "aria-errormessage value `id-message-2` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)",
+            "relatedNodes": []
+          }
+        ],
+        "any": [],
+        "failureSummary": "Fix all of the following:\n  aria-errormessage value `id-message-2` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)",
+        "html": "<input type=\"text\" id=\"input-2\" aria-invalid=\"true\" aria-errormessage=\"id-message-2\" class=\"fail\">",
+        "impact": "critical",
+        "none": [],
+        "target": [
+          "#input-2"
+        ]
+      },
+      {
+        "all": [
+          {
+            "data": [
+              "id-message-3"
+            ],
+            "id": "aria-errormessage",
+            "impact": "critical",
+            "message": "aria-errormessage value `id-message-3` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)",
+            "relatedNodes": []
+          }
+        ],
+        "any": [],
+        "failureSummary": "Fix all of the following:\n  aria-errormessage value `id-message-3` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)",
+        "html": "<input type=\"text\" id=\"input-3\" aria-invalid=\"true\" aria-errormessage=\"id-message-3\" class=\"fail\">",
+        "impact": "critical",
+        "none": [],
+        "target": [
+          "#input-3"
+        ]
+      },
+      {
+        "all": [
+          {
+            "data": [
+              "id-message-7"
+            ],
+            "id": "aria-errormessage",
+            "impact": "critical",
+            "message": "aria-errormessage value `id-message-7` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)",
+            "relatedNodes": []
+          }
+        ],
+        "any": [],
+        "failureSummary": "Fix all of the following:\n  aria-errormessage value `id-message-7` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)",
+        "html": "<input type=\"text\" id=\"input-7\" aria-invalid=\"true\" aria-errormessage=\"id-message-7\" class=\"pass\">",
+        "impact": "critical",
+        "none": [],
+        "target": [
+          "#input-7"
+        ]
+      }
+    ],
+    "tags": [
+      "cat.aria",
+      "wcag2a",
+      "wcag412"
+    ]
+  }
+]
diff --git a/validator-tests/errormessage-hidden-removed.html b/validator-tests/errormessage-hidden-removed.html
@@ -0,0 +1,37 @@
+<html lang="en-US">
+<head><title>When aria-errormessage is pertinent, authors MUST ensure the content is not hidden so users can navigate to and examine the error message</title></head>
+<body>
+
+<!--
+URL: https://www.w3.org/TR/wai-aria-1.2/#aria-errormessage
+RULE: " Authors MUST use aria-invalid in conjunction with aria-errormessage and when aria-errormessage is pertinent, authors MUST ensure the content is not hidden so users can navigate to and examine the error message"
+-->
+
+<!-- inputs with aria-errormessage that should fail -->
+
+<input type="text" id="error-message-hidden-1" aria-invalid="true" aria-errormessage="id-message-1" class="fail"></div>
+<div id="id-message-1" hidden>Error message 1</div>
+
+<input type="text" id="error-message-hidden-2" aria-invalid="true" aria-errormessage="id-message-2" class="fail"></div>
+<div id="id-message-2" style="display: none">Error message 2</div>
+
+<input type="text" id="error-message-hidden-3" aria-invalid="true" aria-errormessage="id-message-3" class="fail"></div>
+<div id="id-message-3" style="visibility: hidden">Error message 3</div>
+
+<!-- inputs with aria-errormessage that should pass -->
+
+<input type="text" id="aria-invalid-value-false-1" aria-invalid="false" aria-errormessage="id-message-4" class="pass"></div>
+<div id="id-message-4" hidden>Error message 4</div>
+
+<input type="text" id="aria-invalid-value-false-2" aria-invalid="false" aria-errormessage="id-message-5" class="pass"></div>
+<div id="id-message-5" style="display: none">Error message 5</div>
+
+<input type="text" id="aria-invalid-value-false-3" aria-invalid="false" aria-errormessage="id-message-6" class="pass"></div>
+<div id="id-message-6"  style="visibility: hidden">Error message 6</div>
+
+<input type="text" id="aria-invalid-visible-1" aria-invalid="true" aria-errormessage="id-message-7" class="pass"></div>
+<div id="id-message-7">Error message 7</div>
+
+</body>
+</html>
+
