From 1d2b4e7bf13ec299f92da43024889702230014fa Mon Sep 17 00:00:00 2001
From: Sarah Third <sarahthird@khanacademy.org>
Date: Tue, 3 Dec 2024 13:21:40 -0800
Subject: [PATCH] Adding alt tag to image widget on zoom (#1942)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
This is a simple PR to ensure that we're retaining any pre-existing image alt tags when the user zooms in on an image.

While I created a storybook view for testing this work, I have removed it before opening up the PR for review as I am unsure about potential image copyright issues.

Issue: A11Y-41

## Test plan:
- manual test with storybook
- manual test in webapp with PR

Author: SonicScrewdriver

Reviewers: mark-fitzgerald, catandthemachines

Required Reviewers:

Approved By: mark-fitzgerald, catandthemachines

Checks: ✅ gerald, ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ gerald, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: https://github.com/Khan/perseus/pull/1942
---
 .changeset/hip-pandas-argue.md | 5 +++++
 packages/perseus/src/zoom.ts   | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 .changeset/hip-pandas-argue.md

diff --git a/.changeset/hip-pandas-argue.md b/.changeset/hip-pandas-argue.md
new file mode 100644
index 0000000000..b139d775f5
--- /dev/null
+++ b/.changeset/hip-pandas-argue.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Ensure that zoomed-in images retain alt text
diff --git a/packages/perseus/src/zoom.ts b/packages/perseus/src/zoom.ts
index a260d1048e..d20aae254a 100644
--- a/packages/perseus/src/zoom.ts
+++ b/packages/perseus/src/zoom.ts
@@ -364,6 +364,7 @@ Zoom.prototype.zoomImage = function () {
     }.bind(this);
 
     img.src = this._targetImage.src;
+    img.alt = this._targetImage.alt;
 
     this.$zoomedImage = $zoomedImage;
 };