feat(role-img-alt): Split rule for role=img with no accessible name (#…

…1586)
dequelabs · May 24, 2019 · 2416ed3 · 2416ed3
1 parent b9a324a
commit 2416ed3
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 9 deletions.
diff --git a/doc/rule-descriptions.md b/doc/rule-descriptions.md
@@ -66,6 +66,7 @@
 | page-has-heading-one                | Ensure that the page, or at least one of its frames contains a level-one heading                                           | Moderate           | cat.semantics, best-practice                                                 | true               |
 | radiogroup                          | Ensures related &lt;input type=&quot;radio&quot;&gt; elements have a group and that the group designation is consistent    | Critical           | cat.forms, best-practice                                                     | true               |
 | region                              | Ensures all page content is contained by landmarks                                                                         | Moderate           | cat.keyboard, best-practice                                                  | true               |
+| role-img-alt                        | Ensures [role=&apos;img&apos;] elements have alternate text                                                                | Serious            | cat.text-alternatives, wcag2a, wcag111, section508, section508.22.a          | true               |
 | scope-attr-valid                    | Ensures the scope attribute is used correctly on tables                                                                    | Moderate, Critical | cat.tables, best-practice                                                    | true               |
 | scrollable-region-focusable         | Elements that have scrollable content should be accessible by keyboard                                                     | Moderate           | wcag2a, wcag211                                                              | true               |
 | server-side-image-map               | Ensures that server-side image maps are not used                                                                           | Minor              | cat.text-alternatives, wcag2a, wcag211, section508, section508.22.f          | true               |

diff --git a/lib/rules/image-alt.json b/lib/rules/image-alt.json
@@ -1,6 +1,6 @@
 {
 	"id": "image-alt",
-	"selector": "img, [role='img']:not(svg)",
+	"selector": "img",
 	"tags": [
 		"cat.text-alternatives",
 		"wcag2a",

diff --git a/lib/rules/role-img-alt.json b/lib/rules/role-img-alt.json
@@ -0,0 +1,18 @@
+{
+	"id": "role-img-alt",
+	"selector": "[role='img']:not(svg):not(img):not(area):not(input):not(object)",
+	"tags": [
+		"cat.text-alternatives",
+		"wcag2a",
+		"wcag111",
+		"section508",
+		"section508.22.a"
+	],
+	"metadata": {
+		"description": "Ensures [role='img'] elements have alternate text",
+		"help": "[role='img'] elements have an alternative text"
+	},
+	"all": [],
+	"any": ["aria-label", "aria-labelledby", "non-empty-title"],
+	"none": []
+}
diff --git a/test/integration/rules/image-alt/image-alt.html b/test/integration/rules/image-alt/image-alt.html
@@ -13,7 +13,4 @@
 <img src="img.jpg" id="pass6" role="presentation" />
 <img src="img.jpg" id="pass7" role="none" />
 <img src="img.jpg" id="pass8" aria-labelledby="ninjamonkeys" />
-<div role="img" alt="blah" id="violation6"></div>
-<img src="img.jpg" id="violation7" alt=" " />
-<div role="img" aria-label="blah" id="pass9"></div>
-<svg role="img" id="ignore1"><title>SVG Title</title></svg>
+<img src="img.jpg" id="violation6" alt=" " />
diff --git a/test/integration/rules/image-alt/image-alt.json b/test/integration/rules/image-alt/image-alt.json
@@ -7,8 +7,7 @@
 		["#violation3"],
 		["#violation4"],
 		["#violation5"],
-		["#violation6"],
-		["#violation7"]
+		["#violation6"]
 	],
 	"passes": [
 		["#pass1"],
@@ -18,7 +17,6 @@
 		["#pass5"],
 		["#pass6"],
 		["#pass7"],
-		["#pass8"],
-		["#pass9"]
+		["#pass8"]
 	]
 }
diff --git a/test/integration/rules/role-img-alt/role-img-alt.html b/test/integration/rules/role-img-alt/role-img-alt.html
@@ -0,0 +1,13 @@
+<div id="match">Bananas</div>
+<div id="hidden-match" style="display:none">Banana bombs</div>
+
+<div role="img" aria-label="blah" id="pass1"></div>
+<div role="img" aria-labelledby="match" id="pass2"></div>
+<div role="img" aria-labelledby="hidden-match" id="pass3"></div>
+<div role="img" title="title" id="pass4"></div>
+
+<div role="img" id="violation1"></div>
+<div role="img" aria-label="" id="violation2"></div>
+<div role="img" alt="blah" id="violation3"></div>
+<div role="img" aria-labelledby="no-match" id="violation4"></div>
+<div role="img" title="" id="violation5"></div>
diff --git a/test/integration/rules/role-img-alt/role-img-alt.json b/test/integration/rules/role-img-alt/role-img-alt.json
@@ -0,0 +1,12 @@
+{
+	"description": "role-img-alt tests",
+	"rule": "role-img-alt",
+	"violations": [
+		["#violation1"],
+		["#violation2"],
+		["#violation3"],
+		["#violation4"],
+		["#violation5"]
+	],
+	"passes": [["#pass1"], ["#pass2"], ["#pass3"], ["#pass4"]]
+}