Khan / perseus / 6088045513

69%

push

github

Refresh design of image caption (#693)

## Summary:

<img width="755" alt="image" src="https://github.com/Khan/perseus/assets/18454/32d18329-541d-46e7-aebc-3431f3fe2675">

Refreshes the design of the image widget's caption so that:
- It doesn't overflow the bounds of the image
- It has a slightly different visual treatment
- Improves accessibility by using figure/figcaption

Issue: https://khanacademy.atlassian.net/browse/LC-1084

## Test plan:
- run the storybook
- There should be a new new question for the image widget
- Look at the caption on Question 2
- **It should look ok**

Author: nixterrimus

Reviewers: handeyeco, nixterrimus

Required Reviewers:

Approved By: handeyeco

Checks: ✅ finish_coverage, ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ gerald, ✅ Check for .changeset file (ubuntu-latest, 16.x)

Pull Request URL: https://github.com/Khan/perseus/pull/693

7649 of 16637 branches covered (0.0%)

Branch coverage included in aggregate %.

8 of 8 new or added lines in 1 file covered. (100.0%)

71701 of 97778 relevant lines covered (73.33%)

710.31 hits per line