这是indexloc提供的服务，不要输入任何密码
Skip to content

Commit 11902fc

Browse files
jongundspectranautjnurthen
authored
aria-errormessage is hidden or removed when not pertinent (#1588)
Co-authored-by: Valerie Young <spectranaut@igalia.com> Co-authored-by: James Nurthen <jnurthen@users.noreply.github.com>
1 parent e262b4a commit 11902fc

File tree

3 files changed

+139
-0
lines changed

3 files changed

+139
-0
lines changed

‎validator-tests/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ corresponding changes in validators.
1919
* [Dialog Must Have Name](dialog-must-have-name.html)
2020
* @axe-core/cli: [Results](dialog-must-have-name-axe.json)
2121
* validator.nu: [Results](dialog-must-have-name-vnu.json)
22+
* [Error message MUST be pertinent](errormessage-hidden-removed.html)
23+
* @axe-core/cli: [Results](errormessage-hidden-removed-axe.json), [bug](https://github.com/dequelabs/axe-core-npm/issues/328)
2224
* [Form MUST have name](form-role-must-have-name.html)
2325
* @axe-core/cli: [Results](form-role-must-have-name-axe.json), [bug](https://github.com/dequelabs/axe-core-npm/issues/329)
2426
* validator.nu: [Results](form-role-must-have-name-vnu.json)

‎validator-tests/errormessage-hidden-removed-axe.json

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
[
2+
{
3+
"description": "Ensures all ARIA attributes have valid values",
4+
"help": "ARIA attributes must conform to valid values",
5+
"helpUrl": "https://dequeuniversity.com/rules/axe/4.3/aria-valid-attr-value?application=webdriverjs",
6+
"id": "aria-valid-attr-value",
7+
"impact": "critical",
8+
"nodes": [
9+
{
10+
"all": [
11+
{
12+
"data": [
13+
"id-message-1"
14+
],
15+
"id": "aria-errormessage",
16+
"impact": "critical",
17+
"message": "aria-errormessage value `id-message-1` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)",
18+
"relatedNodes": []
19+
}
20+
],
21+
"any": [],
22+
"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.)",
23+
"html": "<input type=\"text\" id=\"input-1\" aria-invalid=\"true\" aria-errormessage=\"id-message-1\" class=\"fail\">",
24+
"impact": "critical",
25+
"none": [],
26+
"target": [
27+
"#input-1"
28+
]
29+
},
30+
{
31+
"all": [
32+
{
33+
"data": [
34+
"id-message-2"
35+
],
36+
"id": "aria-errormessage",
37+
"impact": "critical",
38+
"message": "aria-errormessage value `id-message-2` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)",
39+
"relatedNodes": []
40+
}
41+
],
42+
"any": [],
43+
"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.)",
44+
"html": "<input type=\"text\" id=\"input-2\" aria-invalid=\"true\" aria-errormessage=\"id-message-2\" class=\"fail\">",
45+
"impact": "critical",
46+
"none": [],
47+
"target": [
48+
"#input-2"
49+
]
50+
},
51+
{
52+
"all": [
53+
{
54+
"data": [
55+
"id-message-3"
56+
],
57+
"id": "aria-errormessage",
58+
"impact": "critical",
59+
"message": "aria-errormessage value `id-message-3` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)",
60+
"relatedNodes": []
61+
}
62+
],
63+
"any": [],
64+
"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.)",
65+
"html": "<input type=\"text\" id=\"input-3\" aria-invalid=\"true\" aria-errormessage=\"id-message-3\" class=\"fail\">",
66+
"impact": "critical",
67+
"none": [],
68+
"target": [
69+
"#input-3"
70+
]
71+
},
72+
{
73+
"all": [
74+
{
75+
"data": [
76+
"id-message-7"
77+
],
78+
"id": "aria-errormessage",
79+
"impact": "critical",
80+
"message": "aria-errormessage value `id-message-7` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)",
81+
"relatedNodes": []
82+
}
83+
],
84+
"any": [],
85+
"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.)",
86+
"html": "<input type=\"text\" id=\"input-7\" aria-invalid=\"true\" aria-errormessage=\"id-message-7\" class=\"pass\">",
87+
"impact": "critical",
88+
"none": [],
89+
"target": [
90+
"#input-7"
91+
]
92+
}
93+
],
94+
"tags": [
95+
"cat.aria",
96+
"wcag2a",
97+
"wcag412"
98+
]
99+
}
100+
]

‎validator-tests/errormessage-hidden-removed.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<html lang="en-US">
2+
<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>
3+
<body>
4+
5+
<!--
6+
URL: https://www.w3.org/TR/wai-aria-1.2/#aria-errormessage
7+
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"
8+
-->
9+
10+
<!-- inputs with aria-errormessage that should fail -->
11+
12+
<input type="text" id="error-message-hidden-1" aria-invalid="true" aria-errormessage="id-message-1" class="fail"></div>
13+
<div id="id-message-1" hidden>Error message 1</div>
14+
15+
<input type="text" id="error-message-hidden-2" aria-invalid="true" aria-errormessage="id-message-2" class="fail"></div>
16+
<div id="id-message-2" style="display: none">Error message 2</div>
17+
18+
<input type="text" id="error-message-hidden-3" aria-invalid="true" aria-errormessage="id-message-3" class="fail"></div>
19+
<div id="id-message-3" style="visibility: hidden">Error message 3</div>
20+
21+
<!-- inputs with aria-errormessage that should pass -->
22+
23+
<input type="text" id="aria-invalid-value-false-1" aria-invalid="false" aria-errormessage="id-message-4" class="pass"></div>
24+
<div id="id-message-4" hidden>Error message 4</div>
25+
26+
<input type="text" id="aria-invalid-value-false-2" aria-invalid="false" aria-errormessage="id-message-5" class="pass"></div>
27+
<div id="id-message-5" style="display: none">Error message 5</div>
28+
29+
<input type="text" id="aria-invalid-value-false-3" aria-invalid="false" aria-errormessage="id-message-6" class="pass"></div>
30+
<div id="id-message-6" style="visibility: hidden">Error message 6</div>
31+
32+
<input type="text" id="aria-invalid-visible-1" aria-invalid="true" aria-errormessage="id-message-7" class="pass"></div>
33+
<div id="id-message-7">Error message 7</div>
34+
35+
</body>
36+
</html>
37+

0 commit comments

Comments
 (0)