[Image] | (a11y) | Add aria-describedby to Explore Image modal

[nishasy]

Summary:

The internal audit pointed out that we're missing aria-describedby on the Explore Image modal.
In order to follow best practices, I'm adding that here.

As per the suggestion in the ticket, I'm adding both caption and description IDs if the
caption is present. If there is no caption, then it's just the description ID.

NOTE: This change is not possible to test in VoiceOver since it has a behavior discrepancy -
it will be the same as before adding the aria-describedby. We should be able to see a
difference when using NVDA though.

Update: I confirmed that it reads the describedby content before the close button when using
NVDA on my personal Windows machine!

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

Test plan:

pnpm jest packages/perseus/src/widgets/image/components/explore-image-modal.test.tsx

Storybook

• Go to /?path=/story/widgets-image-widget-demo--image
• Open the Elements tab in dev tools
• Confirm that the role="dialog" element has aria-describedby that points to the
  caption and description IDs.

Before	After

[github-actions]

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3504

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

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

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

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

[github-actions]

🗄️ Schema Change: No Changes ✅

[github-actions]

Size Change: +100 B (+0.02%)

Total Size: 499 kB

📦 View Changed

Filename	Size	Change
packages/perseus/dist/es/index.js	196 kB	+100 B (+0.05%)

ℹ️ 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.36 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	102 kB
packages/perseus-linter/dist/es/index.js	9.3 kB
packages/perseus-score/dist/es/index.js	9.7 kB
packages/perseus-utils/dist/es/index.js	403 B
packages/perseus/dist/es/strings.js	8.27 kB
packages/pure-markdown/dist/es/index.js	1.39 kB
packages/simple-markdown/dist/es/index.js	6.71 kB

_{compressed-size-action}

[github-actions]

🛠️ Item Splitting: No Changes ✅

[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. Added one comment, but non blocking.

[catandthemachines]

Does Renderer not have an id property? That's annoying! If you have enough time it think it would be worth while to add it. But non-blocking.

[jeremywiebe]

I think this might be the first time I've seen a Renderer linked to an aria-describedby. Although we could drill the id down to the <div> that the Renderer renders, I'm not sure it feels warranted for only one use. Perhaps we could wait and see if this comes up again?

[nishasy]

Hypothetically, one could argue this is another example of a Renderer wrapped in something with an ID: https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/numeric-input/input-with-examples.tsx#L143-L154

It looks like it also needs that wrapper for the classname, so I'm not sure if that's a valid example for this. I'm inclined to leave the code as is for now, since I don't currenly have a way to test that any changes here would be valid (I'd need a windows machine with NVDA).