[Image] | (a11y) | Update zoom view SRUX by nishasy · Pull Request #3426 · Khan/perseus

nishasy · 2026-03-27T21:25:05Z

Summary:

We needed to make some updates to the button structure for the zoom view to improve accessibility:

Update the "Zoom image" string to say "Make image bigger" for clarity
Update the "Reset zoom" string to say "Close image" for clarity
Remove the close button that was overlayed over the entire view (and was making the image undiscoverable, because the image was a child of the button)
Add a close button in the top right corner of the zoom view
- It should be invisible by default
- It should become visible when the corner is hovered over
- It should become visible when receiving focus (i.e. when someone tabs to it)

Issue: https://khanacademy.atlassian.net/browse/LEMS-3999

Test plan:

pnpm jest packages/perseus/src/widgets/image/image.test.ts

Storybook

/?path=/story/widgets-image-visual-regression-tests-interactions--zoom-clicked-state

Initial view	Hovered	Focused

…w SRUX

github-actions · 2026-03-27T21:25:54Z

🗄️ Schema Change: No Changes ✅

github-actions · 2026-03-27T21:27:04Z

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (785308c) and published it to npm. You
can install it using the tag PR3426.

Example:

pnpm add @khanacademy/perseus@PR3426

If you are working in Khan Academy's frontend, you can run the below command.

./dev/tools/bump_perseus_version.ts -t PR3426

If you are working in Khan Academy's webapp, you can run the below command.

./dev/tools/bump_perseus_version.js -t PR3426

github-actions · 2026-03-27T21:27:45Z

🛠️ Item Splitting: No Changes ✅

github-actions · 2026-03-27T21:27:58Z

Size Change: +164 B (+0.03%)

Total Size: 494 kB

Filename	Size	Change
`packages/perseus/dist/es/index.js`	193 kB	+161 B (+0.08%)
`packages/perseus/dist/es/strings.js`	8.09 kB	+3 B (+0.04%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	20.5 kB
`packages/keypad-context/dist/es/index.js`	1 kB
`packages/kmath/dist/es/index.js`	6.21 kB
`packages/math-input/dist/es/index.js`	98.5 kB
`packages/math-input/dist/es/strings.js`	1.61 kB
`packages/perseus-core/dist/es/index.item-splitting.js`	11.9 kB
`packages/perseus-core/dist/es/index.js`	25.1 kB
`packages/perseus-editor/dist/es/index.js`	101 kB
`packages/perseus-linter/dist/es/index.js`	9.3 kB
`packages/perseus-score/dist/es/index.js`	9.66 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/pure-markdown/dist/es/index.js`	1.39 kB
`packages/simple-markdown/dist/es/index.js`	6.71 kB

_{compressed-size-action}

claude

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

_{Tip: disable this comment in your organization's Code Review settings.}

catandthemachines

Looks good to me. Thanks Nisha!

@nishasy

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @khanacademy/[email protected] ### Patch Changes - [#3429](#3429) [`41bea5fd10`](41bea5f) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Stop large images from overflowing - [#3413](#3413) [`06ac0a160d`](06ac0a1) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Don't upscale images within explore modal if size is unknown - [#3426](#3426) [`dae8b1d931`](dae8b1d) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (a11y) | Update zoom view SRUX ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`41bea5fd10`](41bea5f), [`06ac0a160d`](06ac0a1), [`dae8b1d931`](dae8b1d)]: - @khanacademy/[email protected] Author: khan-actions-bot Reviewers: claude[bot], anakaren-rojas Required Reviewers: Approved By: anakaren-rojas Checks: ⏭️ 2 checks have been skipped, ✅ 6 checks were successful Pull Request URL: #3430

## Summary: We needed to make some updates to the button structure for the zoom view to improve accessibility: - Update the "Zoom image" string to say "Make image bigger" for clarity - Update the "Reset zoom" string to say "Close image" for clarity - Remove the close button that was overlayed over the entire view (and was making the image undiscoverable, because the image was a child of the button) - Add a close button in the top right corner of the zoom view - It should be invisible by default - It should become visible when the corner is hovered over - It should become visible when receiving focus (i.e. when someone tabs to it) Issue: https://khanacademy.atlassian.net/browse/LEMS-3999 ## Test plan: `pnpm jest packages/perseus/src/widgets/image/image.test.ts` Storybook - `/?path=/story/widgets-image-visual-regression-tests-interactions--zoom-clicked-state` | Initial view | Hovered | Focused | | --- | --- | --- | | <img width="538" height="351" alt="Screenshot 2026-03-27 at 2 20 43 PM" src="https://github.com/user-attachments/assets/78f3af6f-fc9f-4805-b4ac-c5ceb53b4bdb" /> | <img width="538" height="329" alt="Screenshot 2026-03-27 at 2 20 47 PM" src="https://github.com/user-attachments/assets/5b634abc-c512-43be-b21f-f1406d85edca" /> | <img width="513" height="322" alt="Screenshot 2026-03-27 at 2 20 50 PM" src="https://github.com/user-attachments/assets/b90c5205-cac0-454c-92c5-aa5c430d45b5" /> | Author: nishasy Reviewers: claude[bot], catandthemachines, ivyolamit Required Reviewers: Approved By: catandthemachines Checks: ✅ 10 checks were successful, ⏭️ 1 check has been skipped Pull Request URL: #3426

@nishasy

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @khanacademy/[email protected] ### Patch Changes - [#3429](#3429) [`41bea5fd10`](41bea5f) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Stop large images from overflowing - [#3413](#3413) [`06ac0a160d`](06ac0a1) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Don't upscale images within explore modal if size is unknown - [#3426](#3426) [`dae8b1d931`](dae8b1d) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (a11y) | Update zoom view SRUX ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`41bea5fd10`](41bea5f), [`06ac0a160d`](06ac0a1), [`dae8b1d931`](dae8b1d)]: - @khanacademy/[email protected] Author: khan-actions-bot Reviewers: claude[bot], anakaren-rojas Required Reviewers: Approved By: anakaren-rojas Checks: ⏭️ 2 checks have been skipped, ✅ 6 checks were successful Pull Request URL: #3430

nishasy added 5 commits March 26, 2026 14:59

[image-zoom-a11y] Add button, update strings

27f52f5

[image-zoom-a11y] Use IconButton'

f303626

[image-zoom-a11y] use unique ID

6da0249

[image-zoom-a11y] update tests

c19448d

[image-zoom-a11y] docs(changeset): [Image] | (a11y) | Update zoom vie…

e59b683

…w SRUX

nishasy self-assigned this Mar 27, 2026

nishasy added the olc-5.0.c4fcb label Mar 27, 2026

github-actions bot added the item-splitting-change label Mar 27, 2026

[image-zoom-a11y] Update comment to use my own words.

a6c7126

github-actions bot removed the item-splitting-change label Mar 27, 2026

[image-zoom-a11y] id => initialFocusId

785308c

nishasy marked this pull request as ready for review March 27, 2026 21:36

nishasy requested review from catandthemachines and ivyolamit as code owners March 27, 2026 21:36

claude bot reviewed Mar 27, 2026

View reviewed changes

catandthemachines approved these changes Mar 30, 2026

View reviewed changes

nishasy merged commit dae8b1d into main Mar 30, 2026
11 checks passed

nishasy deleted the image-zoom-a11y branch March 30, 2026 22:24

khan-actions-bot mentioned this pull request Mar 30, 2026

Version Packages #3430

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Image] | (a11y) | Update zoom view SRUX#3426

[Image] | (a11y) | Update zoom view SRUX#3426
nishasy merged 7 commits intomainfrom
image-zoom-a11y

nishasy commented Mar 27, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 27, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 27, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 27, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 27, 2026 •

edited

Loading

Uh oh!

claude bot left a comment

Uh oh!

catandthemachines left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

nishasy commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Test plan:

Uh oh!

github-actions bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🗄️ Schema Change: No Changes ✅

Uh oh!

github-actions bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

npm Snapshot: Published

Uh oh!

github-actions bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛠️ Item Splitting: No Changes ✅

Uh oh!

github-actions bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

claude bot left a comment

Choose a reason for hiding this comment

Claude Code Review

Uh oh!

catandthemachines left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nishasy commented Mar 27, 2026 •

edited

Loading

github-actions bot commented Mar 27, 2026 •

edited

Loading

github-actions bot commented Mar 27, 2026 •

edited

Loading

github-actions bot commented Mar 27, 2026 •

edited

Loading

github-actions bot commented Mar 27, 2026 •

edited

Loading