From d5424c6cfa1b71cf7e3af52b7711897acb01d0a0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 26 Sep 2024 20:26:54 -0400
Subject: [PATCH] fix: treat `<img>` alt attribute as content for a11y
 labelling purposes

---
 .changeset/nervous-chefs-exist.md                          | 5 +++++
 .../src/compiler/phases/2-analyze/visitors/shared/a11y.js  | 7 +++++++
 .../samples/a11y-consider-explicit-label/input.svelte      | 1 +
 3 files changed, 13 insertions(+)
 create mode 100644 .changeset/nervous-chefs-exist.md

diff --git a/.changeset/nervous-chefs-exist.md b/.changeset/nervous-chefs-exist.md
new file mode 100644
index 000000000000..c73b9818c393
--- /dev/null
+++ 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
index 4e919e81d12a..9fddade24da0 100644
--- 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
index 6c5a35fc397e..11dc007352fa 100644
--- 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>