fix: improve invalid nested interactive element error (#10199)

* fix: improve invalid nested interactive element error

* add test

* revise

Author: trueadm

.changeset/giant-moons-own.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve invalid nested interactive element error

packages/svelte/src/compiler/phases/1-parse/utils/html.js

@@ -122,7 +122,14 @@ function validate_code(code) {
 // based on http://developers.whatwg.org/syntax.html#syntax-tag-omission
 
 // while `input` is also an interactive element, it is never moved by the browser, so we don't need to check for it
-const interactive_elements = new Set(['a', 'button', 'iframe', 'embed', 'select', 'textarea']);
+export const interactive_elements = new Set([
+	'a',
+	'button',
+	'iframe',
+	'embed',
+	'select',
+	'textarea'
+]);
 
 /** @type {Record<string, Set<string>>} */
 const disallowed_contents = {

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -7,6 +7,7 @@ import {
 } from '../../utils/ast.js';
 import { warn } from '../../warnings.js';
 import fuzzymatch from '../1-parse/utils/fuzzymatch.js';
+import { interactive_elements } from '../1-parse/utils/html.js';
 import { binding_properties } from '../bindings.js';
 import { ContentEditableBindings, EventModifiers, SVGElements } from '../constants.js';
 import { is_custom_element_node } from '../nodes.js';
@@ -530,6 +531,19 @@ export const validation = {
 			}
 		}
 
+		if (interactive_elements.has(node.name)) {
+			const path = context.path;
+			for (let parent of path) {
+				if (
+					parent.type === 'RegularElement' &&
+					parent.name === node.name &&
+					interactive_elements.has(parent.name)
+				) {
+					error(node, 'invalid-node-placement', `<${node.name}>`, parent.name);
+				}
+			}
+		}
+
 		context.next({
 			...context.state,
 			parent_element: node.name

packages/svelte/tests/validator/samples/invalid-node-placement/errors.json

@@ -0,0 +1,14 @@
+[
+	{
+		"code": "invalid-node-placement",
+		"message": "<a> is invalid inside <a>",
+		"start": {
+			"line": 4,
+			"column": 6
+		},
+		"end": {
+			"line": 4,
+			"column": 34
+		}
+	}
+]

packages/svelte/tests/validator/samples/invalid-node-placement/input.svelte

@@ -0,0 +1,7 @@
+<div>
+	<a href="/foo">
+		<div>
+			<p><a href="/foo">{`hello`}</a></p>
+		</div>
+	</a>
+</div>