[Image] | (a11y) | Add aria-describedby to Explore Image modal#3504
Open
[Image] | (a11y) | Add aria-describedby to Explore Image modal#3504
Conversation
…o Explore Image modal 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. 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.
…ria-describedby to Explore Image modal
github-actions
bot
added
schema-change
Contributor
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (ffa1ad4) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3504If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3504If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3504 |
github-actions
bot
removed
the
schema-change
Contributor
🗄️ Schema Change: No Changes ✅ |
Contributor
|
Size Change: +100 B (+0.02%) Total Size: 499 kB 📦 View Changed
ℹ️ View Unchanged
|
Contributor
🛠️ Item Splitting: No Changes ✅ |
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
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.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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:
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.tsxStorybook
/?path=/story/widgets-image-widget-demo--imagerole="dialog"element hasaria-describedbythat points to thecaption and description IDs.