feat(image-alt): require alt text or empty strings (#1260)

* feat(image-alt): require alt text or empty strings

The image-alt rule now checks for space characters, and fails if they are present. Empty alt attributes are still fine, and text content is still fine. This fixes cases where ATs do not skip decorative images because of the space characters in the alt attribute.

Closes #1174

* chore: include updated build files

(there are no actual changes)

* chore: rename to alt-space-value, focus on images

* fix: PR feedback

lib/checks/label/alt-space-value.js

@@ -0,0 +1,2 @@
+const validAttrValue = /^\s+$/.test(node.getAttribute('alt'));
+return node.hasAttribute('alt') && validAttrValue;

lib/checks/label/alt-space-value.json

@@ -0,0 +1,11 @@
+{
+	"id": "alt-space-value",
+	"evaluate": "alt-space-value.js",
+	"metadata": {
+		"impact": "critical",
+		"messages": {
+			"pass": "Element has a valid alt attribute value",
+			"fail": "Element has an alt attribute containing only a space character, which is not ignored by all screen readers"
+		}
+	}
+}

lib/rules/image-alt.json

@@ -21,5 +21,5 @@
 		"role-presentation",
 		"role-none"
 	],
-	"none": []
+	"none": ["alt-space-value"]
 }

lib/rules/landmark-complementary-is-top-level.json

@@ -1,17 +1,12 @@
 {
-  "id": "landmark-complementary-is-top-level",
-  "selector": "aside:not([role]), [role=complementary]",
-  "tags": [
-    "cat.semantics",
-    "best-practice"
-  ],
-  "metadata": {
-    "description": "Ensures the complementary landmark or aside is at top level",
-    "help": "Aside must not be contained in another landmark"
-  },
-  "all": [],
-  "any": [
-    "landmark-is-top-level"
-  ],
-  "none": []
+	"id": "landmark-complementary-is-top-level",
+	"selector": "aside:not([role]), [role=complementary]",
+	"tags": ["cat.semantics", "best-practice"],
+	"metadata": {
+		"description": "Ensures the complementary landmark or aside is at top level",
+		"help": "Aside must not be contained in another landmark"
+	},
+	"all": [],
+	"any": ["landmark-is-top-level"],
+	"none": []
 }

test/checks/label/alt-space-value.js

@@ -0,0 +1,31 @@
+describe('alt-space-value', function() {
+	'use strict';
+
+	var checkSetup = axe.testUtils.checkSetup;
+	var checkContext = axe.testUtils.MockCheckContext();
+	var check = checks['alt-space-value'];
+
+	afterEach(function() {
+		checkContext.reset();
+	});
+
+	it('should return true if alt contains a space character', function() {
+		var params = checkSetup('<img id="target" alt=" " />');
+		assert.isTrue(check.evaluate.apply(checkContext, params));
+	});
+
+	it('should return true if alt contains a non-breaking space character', function() {
+		var params = checkSetup('<img id="target" alt="&nbsp;" />');
+		assert.isTrue(check.evaluate.apply(checkContext, params));
+	});
+
+	it('should return false if alt attribute is empty', function() {
+		var params = checkSetup('<img id="target" alt="" />');
+		assert.isFalse(check.evaluate.apply(checkContext, params));
+	});
+
+	it('should return false if alt attribute has a proper text value', function() {
+		var params = checkSetup('<img id="target" alt="text content" />');
+		assert.isFalse(check.evaluate.apply(checkContext, params));
+	});
+});

test/integration/rules/image-alt/image-alt.html

@@ -15,5 +15,6 @@
 <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>

test/integration/rules/image-alt/image-alt.json

@@ -7,7 +7,8 @@
 		["#violation3"],
 		["#violation4"],
 		["#violation5"],
-		["#violation6"]
+		["#violation6"],
+		["#violation7"]
 	],
 	"passes": [
 		["#pass1"],