a11y: do not warn about <a name> / <a id> (#4739)

Author: andrelmlins

src/compiler/compile/nodes/Element.ts

@@ -423,22 +423,29 @@ export default class Element extends Node {
 
 		// handle special cases
 		if (this.name === 'a') {
-			const attribute = attribute_map.get('href') || attribute_map.get('xlink:href');
-
-			if (attribute) {
-				const value = attribute.get_static_value();
-
-				if (value === '' || value === '#' || /^\W*javascript:/i.test(value)) {
-					component.warn(attribute, {
+			const href_attribute = attribute_map.get('href') || attribute_map.get('xlink:href');
+			const id_attribute = attribute_map.get('id');
+			const name_attribute = attribute_map.get('name');
+
+			if (href_attribute) {
+				const href_value = href_attribute.get_static_value();
+				
+				if (href_value === '' || href_value === '#' || /^\W*javascript:/i.test(href_value)) {
+					component.warn(href_attribute, {
 						code: `a11y-invalid-attribute`,
-						message: `A11y: '${value}' is not a valid ${attribute.name} attribute`
+						message: `A11y: '${href_value}' is not a valid ${href_attribute.name} attribute`
 					});
 				}
 			} else {
-				component.warn(this, {
-					code: `a11y-missing-attribute`,
-					message: `A11y: <a> element should have an href attribute`
-				});
+				const id_attribute_valid = id_attribute && id_attribute.get_static_value() !== '';
+				const name_attribute_valid = name_attribute && name_attribute.get_static_value() !== '';
+
+				if (!id_attribute_valid && !name_attribute_valid) {
+					component.warn(this, {
+						code: `a11y-missing-attribute`,
+						message: `A11y: <a> element should have an href attribute`
+					});
+				}
 			}
 		}
 

test/validator/samples/a11y-anchor-is-valid/input.svelte

@@ -1,4 +1,8 @@
 <a>not actually a link</a>
 <a href=''>invalid</a>
 <a href='#'>invalid</a>
-<a href="javascript:void(0)">invalid</a>
+<a href='javascript:void(0)'>invalid</a>
+<a name=''>invalid</a>
+<a id=''>invalid</a>
+<a name='fragment'>valid</a>
+<a id='fragment'>valid</a>

test/validator/samples/a11y-anchor-is-valid/warnings.json

@@ -58,5 +58,35 @@
 			"character": 102
 		},
 		"pos": 77
+	},
+	{
+		"code": "a11y-missing-attribute",
+		"message": "A11y: <a> element should have an href attribute",
+		"start": {
+			"line": 5,
+			"column": 0,
+			"character": 115
+		},
+		"end": {
+			"line": 5,
+			"column": 22,
+			"character": 137
+		},
+		"pos": 115
+	},
+	{
+		"code": "a11y-missing-attribute",
+		"message": "A11y: <a> element should have an href attribute",
+		"start": {
+			"line": 6,
+			"column": 0,
+			"character": 138
+		},
+		"end": {
+			"line": 6,
+			"column": 20,
+			"character": 158
+		},
+		"pos": 138
 	}
 ]