a11y: implement img-redundant-alt (#4750)

Author: andrelmlins

src/compiler/compile/nodes/Element.ts

@@ -272,6 +272,7 @@ export default class Element extends Node {
 		}
 
 		this.validate_attributes();
+		this.validate_special_cases();
 		this.validate_bindings();
 		this.validate_content();
 		this.validate_event_handlers();
@@ -420,8 +421,16 @@ export default class Element extends Node {
 
 			attribute_map.set(attribute.name, attribute);
 		});
+	}
+
+	validate_special_cases() {
+		const { component,attributes } = this;
+		const attribute_map = new Map();
+
+		attributes.forEach(attribute => (
+			attribute_map.set(attribute.name, attribute)
+		));
 
-		// handle special cases
 		if (this.name === 'a') {
 			const href_attribute = attribute_map.get('href') || attribute_map.get('xlink:href');
 			const id_attribute = attribute_map.get('id');
@@ -447,9 +456,7 @@ export default class Element extends Node {
 					});
 				}
 			}
-		}
-
-		else {
+		} else {
 			const required_attributes = a11y_required_attributes[this.name];
 			if (required_attributes) {
 				const has_attribute = required_attributes.some(name => attribute_map.has(name));
@@ -458,16 +465,34 @@ export default class Element extends Node {
 					should_have_attribute(this, required_attributes);
 				}
 			}
+		}
 
-			if (this.name === 'input') {
-				const type = attribute_map.get('type');
-				if (type && type.get_static_value() === 'image') {
-					const required_attributes = ['alt', 'aria-label', 'aria-labelledby'];
-					const has_attribute = required_attributes.some(name => attribute_map.has(name));
+		if (this.name === 'input') {
+			const type = attribute_map.get('type');
+			if (type && type.get_static_value() === 'image') {
+				const required_attributes = ['alt', 'aria-label', 'aria-labelledby'];
+				const has_attribute = required_attributes.some(name => attribute_map.has(name));
 
-					if (!has_attribute) {
-						should_have_attribute(this, required_attributes, 'input type="image"');
-					}
+				if (!has_attribute) {
+					should_have_attribute(this, required_attributes, 'input type="image"');
+				}
+			}
+		}
+
+		if (this.name === 'img') {
+			const alt_attribute = attribute_map.get('alt');
+			const aria_hidden_attribute = attribute_map.get('aria-hidden');
+
+			const aria_hidden_exist = aria_hidden_attribute && aria_hidden_attribute.get_static_value();
+			
+			if (alt_attribute && !aria_hidden_exist) {
+				const alt_value = alt_attribute.get_static_value();
+
+				if (alt_value.match(/\b(image|picture|photo)\b/i)) {
+					component.warn(this, {
+						code: `a11y-img-redundant-alt`,
+						message: `A11y: Screenreaders already announce <img> elements as an image.`
+					});
 				}
 			}
 		}

test/validator/samples/a11y-figcaption-in-non-element-block/input.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <figure>
-	<img src='foo.jpg' alt='a picture of a foo'>
+	<img src='foo.jpg' alt='a foo'>
 	{#if caption}
 		<figcaption>{caption}</figcaption>
 	{/if}

test/validator/samples/a11y-figcaption-right-place/input.svelte

@@ -1,5 +1,5 @@
 <figure>
-	<img src='foo.jpg' alt='a picture of a foo'>
+	<img src='foo.jpg' alt='a foo'>
 
 	<figcaption>
 		a foo in its natural habitat

test/validator/samples/a11y-figcaption-wrong-place/input.svelte

@@ -1,5 +1,5 @@
 <figure>
-	<img src='foo.jpg' alt='a picture of a foo'>
+	<img src='foo.jpg' alt='a foo'>
 
 	<figcaption>
 		a foo in its natural habitat
@@ -9,7 +9,7 @@
 </figure>
 
 <figure>
-	<img src='foo.jpg' alt='a picture of a foo'>
+	<img src='foo.jpg' alt='a foo'>
 
 	<div class='markup-for-styling'>
 		<figcaption>

test/validator/samples/a11y-figcaption-wrong-place/warnings.json

@@ -5,28 +5,28 @@
 		"start": {
 			"line": 4,
 			"column": 1,
-			"character": 57
+			"character": 44
 		},
 		"end": {
 			"line": 6,
 			"column": 14,
-			"character": 115
+			"character": 102
 		},
-		"pos": 57
+		"pos": 44
 	},
 	{
 		"code": "a11y-structure",
 		"message": "A11y: <figcaption> must be an immediate child of <figure>",
 		"start": {
 			"line": 15,
 			"column": 2,
-			"character": 252
+			"character": 226
 		},
 		"end": {
 			"line": 17,
 			"column": 15,
-			"character": 328
+			"character": 302
 		},
-		"pos": 252
+		"pos": 226
 	}
 ]

test/validator/samples/a11y-img-redundant-alt/input.svelte

@@ -0,0 +1,7 @@
+<img src="foo" alt="Foo eating a sandwich." />
+<img src="bar" aria-hidden alt="Picture of me taking a photo of an image" />
+<img src="foo" alt="Photo of foo being weird." />
+<img src="bar" alt="Image of me at a bar!" />
+<img src="foo" alt="Picture of baz fixing a bug." />
+<img src="bar" alt="Plant doing photosynthesis in the afternoon" />
+<img src="foo" alt="Picturesque food" />

test/validator/samples/a11y-img-redundant-alt/warnings.json

@@ -0,0 +1,47 @@
+[
+	{
+		"code": "a11y-img-redundant-alt",
+		"message": "A11y: Screenreaders already announce <img> elements as an image.",
+		"end": {
+			"character": 173,
+			"column": 49,
+			"line": 3
+		},
+		"start": {
+			"character": 124,
+			"column": 0,
+			"line": 3
+		},
+		"pos": 124
+	},
+	{
+		"code": "a11y-img-redundant-alt",
+		"message": "A11y: Screenreaders already announce <img> elements as an image.",
+		"end": {
+			"character": 219,
+			"column": 45,
+			"line": 4
+		},
+		"start": {
+			"character": 174,
+			"column": 0,
+			"line": 4
+		},
+		"pos": 174
+	},
+	{
+		"code": "a11y-img-redundant-alt",
+		"message": "A11y: Screenreaders already announce <img> elements as an image.",
+		"end": {
+			"character": 272,
+			"column": 52,
+			"line": 5
+		},
+		"start": {
+			"character": 220,
+			"column": 0,
+			"line": 5
+		},
+		"pos": 220
+	}
+]