fix: treat <img> alt attribute as content for a11y labelling purposes

sveltejs · Sep 27, 2024 · d5424c6 · d5424c6
1 parent 505e8ca
commit d5424c6
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/.changeset/nervous-chefs-exist.md b/.changeset/nervous-chefs-exist.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: treat `<img>` alt attribute as content for a11y labelling purposes
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
@@ -1161,6 +1161,13 @@ function has_content(element) {
 		}
 
 		if (node.type === 'RegularElement' || node.type === 'SvelteElement') {
+			if (
+				node.name === 'img' &&
+				node.attributes.some((node) => node.type === 'Attribute' && node.name === 'alt')
+			) {
+				return true;
+			}
+
 			if (!has_content(node)) {
 				continue;
 			}

diff --git a/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte b/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte
@@ -9,3 +9,4 @@
 
 <button>Click me</button>
 <a href="/#">Link text</a>
+<a href="/#"><img src="./icon.svg" alt="Link text"></a>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,3 +9,4 @@

		<button>Click me</button>
		<a href="/#">Link text</a>
		<a href="/#"><img src="./icon.svg" alt="Link text"></a>