[Image] Fix long description bug for transparent images #3201
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…to adjust to use WB white, but this should work.
Contributor
🗄️ Schema Change: No Changes ✅ |
Contributor
🛠️ Item Splitting: No Changes ✅ |
Contributor
|
Size Change: 0 B Total Size: 485 kB ℹ️ View Unchanged
|
Contributor
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (24c27a4) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3201If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3201If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3201 |
…ong description dialogs to fix contrast issues in transparent images.
github-actions
bot
added
item-splitting-change
and removed
item-splitting-change
labels
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/perseus@74.0.0 ### Major Changes - [#3192](#3192) [`2d57e51583`](2d57e51) Thanks [@benchristel](https://github.com/benchristel)! - Remove the deprecated `KEScore` type. - [#3188](#3188) [`ea593fef51`](ea593fe) Thanks [@benchristel](https://github.com/benchristel)! - Remove the deprecated `getUserInput` method from `Renderer`, and delete the `UserInputArray` type. - [#3189](#3189) [`3f6e33047d`](3f6e330) Thanks [@benchristel](https://github.com/benchristel)! - Remove the deprecated `getUserInputLegacy()` method of `ServerItemRenderer`. Callers should use `getUserInput()` instead. ### Minor Changes - [#3186](#3186) [`4fc881daf8`](4fc881d) Thanks [@ivyolamit](https://github.com/ivyolamit)! - [Radio] Remove getCorrectUserInput from the radio widget to hide the "Static" switch in the widget editor - [#3157](#3157) [`9cba5197a2`](9cba519) Thanks [@Myranae](https://github.com/Myranae)! - Convert Expression to functional component and improve testing and typing - [#3178](#3178) [`5756410e90`](5756410) Thanks [@mahtabsabet](https://github.com/mahtabsabet)! - Fix JIPT localization for graphie labels ### Patch Changes - [#3193](#3193) [`d5b27f0aad`](d5b27f0) Thanks [@Myranae](https://github.com/Myranae)! - Fix console errors from adding and removing radio choices - Updated dependencies \[[`2d57e51583`](2d57e51), [`e34c3db786`](e34c3db), [`29c3c697fb`](29c3c69), [`ea593fef51`](ea593fe), [`9cba5197a2`](9cba519), [`779c55b0c3`](779c55b)]: - @khanacademy/perseus-core@23.0.0 - @khanacademy/math-input@26.3.10 - @khanacademy/perseus-linter@4.6.12 - @khanacademy/keypad-context@3.2.30 - @khanacademy/kmath@2.2.30 - @khanacademy/perseus-score@8.2.6 ## @khanacademy/perseus-core@23.0.0 ### Major Changes - [#3192](#3192) [`2d57e51583`](2d57e51) Thanks [@benchristel](https://github.com/benchristel)! - Remove the deprecated `KEScore` type. - [#3188](#3188) [`ea593fef51`](ea593fe) Thanks [@benchristel](https://github.com/benchristel)! - Remove the deprecated `getUserInput` method from `Renderer`, and delete the `UserInputArray` type. ### Minor Changes - [#3157](#3157) [`9cba5197a2`](9cba519) Thanks [@Myranae](https://github.com/Myranae)! - Convert Expression to functional component and improve testing and typing ## @khanacademy/perseus-editor@28.10.0 ### Minor Changes - [#3186](#3186) [`4fc881daf8`](4fc881d) Thanks [@ivyolamit](https://github.com/ivyolamit)! - [Radio] Remove getCorrectUserInput from the radio widget to hide the "Static" switch in the widget editor ### Patch Changes - Updated dependencies \[[`d5b27f0aad`](d5b27f0), [`4fc881daf8`](4fc881d), [`2d57e51583`](2d57e51), [`e34c3db786`](e34c3db), [`29c3c697fb`](29c3c69), [`ea593fef51`](ea593fe), [`9cba5197a2`](9cba519), [`3f6e33047d`](3f6e330), [`5756410e90`](5756410), [`779c55b0c3`](779c55b)]: - @khanacademy/perseus@74.0.0 - @khanacademy/perseus-core@23.0.0 - @khanacademy/math-input@26.3.10 - @khanacademy/perseus-linter@4.6.12 - @khanacademy/keypad-context@3.2.30 - @khanacademy/kmath@2.2.30 - @khanacademy/perseus-score@8.2.6 ## @khanacademy/keypad-context@3.2.30 ### Patch Changes - Updated dependencies \[[`2d57e51583`](2d57e51), [`ea593fef51`](ea593fe), [`9cba5197a2`](9cba519)]: - @khanacademy/perseus-core@23.0.0 ## @khanacademy/kmath@2.2.30 ### Patch Changes - Updated dependencies \[[`2d57e51583`](2d57e51), [`ea593fef51`](ea593fe), [`9cba5197a2`](9cba519)]: - @khanacademy/perseus-core@23.0.0 ## @khanacademy/math-input@26.3.10 ### Patch Changes - [#3190](#3190) [`e34c3db786`](e34c3db) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Update Storybook to v9.1.17 (security patch) - Updated dependencies \[[`2d57e51583`](2d57e51), [`ea593fef51`](ea593fe), [`9cba5197a2`](9cba519)]: - @khanacademy/perseus-core@23.0.0 - @khanacademy/keypad-context@3.2.30 ## @khanacademy/perseus-linter@4.6.12 ### Patch Changes - [#2921](#2921) [`29c3c697fb`](29c3c69) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (CX) | Add issues panel warning for long alt text - [#3183](#3183) [`779c55b0c3`](779c55b) Thanks [@anakaren-rojas](https://github.com/anakaren-rojas)! - adds linter to radio editor - triggered when NOTA and another choice are marked as correct - Updated dependencies \[[`2d57e51583`](2d57e51), [`ea593fef51`](ea593fe), [`9cba5197a2`](9cba519)]: - @khanacademy/perseus-core@23.0.0 - @khanacademy/kmath@2.2.30 ## @khanacademy/perseus-score@8.2.6 ### Patch Changes - Updated dependencies \[[`2d57e51583`](2d57e51), [`ea593fef51`](ea593fe), [`9cba5197a2`](9cba519)]: - @khanacademy/perseus-core@23.0.0 - @khanacademy/kmath@2.2.30 Author: khan-actions-bot Reviewers: benchristel Required Reviewers: Approved By: benchristel Checks: ⏭️ 2 checks have been skipped, ✅ 6 checks were successful Pull Request URL: #3187
## Summary: This PR implements the axe-core accessibility library, and automatically runs the checker. However, results are not shown in the Issues panel unless the toggle button is set "On". The reason for defaulting to "Off" is to provide a kind of feature flag option for this feature. The current accessibility results are somewhat noisy, in that content creators can't necessarily address all the issues that are discovered. Once this PR is implemented, time will be spent assessing the results of the scans and either resolving them or writing tickets for follow-up. At some future point, this automated scan will be defaulted to "On" for all content creators, and expanded to other editors (i.e. the Article and Assessments editors). Issue: LEMS-3822 ## Test plan: 1. Launch Editor Demo in Storybook, or [view editor in ZND](https://prod-znd-260114-2890-d538d2e.khanacademy.org/) 2. Open Issues panel at the top of the editor 3. Toggle the accessibility checker switch (at the bottom of the issues panel) <img width="330" height="110" alt="Axe core toggle" src="https://github.com/user-attachments/assets/aca73bda-afa7-4e9e-a2b9-a329b24ff9b5" /> 4. Make a change to the content * If no issues show, it may be necessary to add content that breaks accessibility to get a result 5. Note that the accessibility issue(s) show in the panel <img width="330" height="148" alt="accessibility issue example" src="https://github.com/user-attachments/assets/ac0db2b2-0b3b-40c7-b2a2-9322e1fde7bc" /> 6. Toggle the switch off 7. Note that the accessibility issue(s) are removed from the panel Author: mark-fitzgerald Reviewers: Myranae, mark-fitzgerald Required Reviewers: Approved By: Myranae Checks: ⏭️ 1 check has been skipped, ✅ 10 checks were successful Pull Request URL: #3167
## Summary: Now that the feature flag is on for all apps, we can remove all code involed in the old version of the widget. This PR removes those old widget files, leaving the `*.new.tsx` files. It also updates numerous unit tests to properly reference the multiple choice options. Issue: LEMS-3847 ## Test plan: Unit tests pass Visual regression tests pass Author: mark-fitzgerald Reviewers: mark-fitzgerald, ivyolamit, anakaren-rojas, handeyeco, Myranae Required Reviewers: Approved By: ivyolamit, anakaren-rojas Checks: ⏭️ 1 check has been skipped, ✅ 10 checks were successful Pull Request URL: #3199
nishasy
approved these changes
Jan 27, 2026
Contributor
nishasy
left a comment
nishasy
left a comment
There was a problem hiding this comment.
Pretty straightforward 👍🏽
One request: Could you put a transparent image example in our storybook? It doesn't have to be a regression test; I think the demo stories would be adequate.
packages/perseus/src/widgets/image/__docs__/image-demo.stories.tsx
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
Fixing a bug in the image widget long description experience where transparent images can't be easily seen in our long descriptoin model.
I am fixing this by setting the image in the container to have a white background. This will have no effect on non-transparent images.
Issue: LEMS-3688
Before:
After:
Test plan: