skip a11y-missing-content check with contenteditable bindings (#5023)

sveltejs · Jun 23, 2020 · 10f7b5e · 10f7b5e
1 parent 6289dfc
commit 10f7b5e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
@@ -706,6 +706,10 @@ export default class Element extends Node {
 
 	validate_content() {
 		if (!a11y_required_content.has(this.name)) return;
+		if (
+			this.bindings
+				.some((binding) => ['textContent', 'innerHTML'].includes(binding.name))
+		) return;
 
 		if (this.children.length === 0) {
 			this.component.warn(this, {

diff --git a/test/validator/samples/a11y-contenteditable-element-without-child/errors.json b/test/validator/samples/a11y-contenteditable-element-without-child/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "missing-contenteditable-attribute",
+		"message": "'contenteditable' attribute is required for textContent and innerHTML two-way bindings",
+		"start": {
+			"line": 6,
+			"column": 3,
+			"character": 157
+		},
+		"end": {
+			"line": 6,
+			"column": 24,
+			"character": 178
+		},
+		"pos": 157
+	}
+]
diff --git a/test/validator/samples/a11y-contenteditable-element-without-child/input.svelte b/test/validator/samples/a11y-contenteditable-element-without-child/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	let text = 'Hello world';
+</script>
+<p bind:textContent={text} contenteditable="true"></p>
+<p bind:innerHTML={text} contenteditable="true"></p>
+<p bind:innerHTML={text}></p>