[SR] Add aria-hidden to individual components of interactive graph elements #2277
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
…f interactive graph elements
|
Size Change: +313 B (+0.04%) Total Size: 873 kB
ℹ️ View Unchanged
|
…al components of interactive graph elements
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (68eb743) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR2277If you are working in Khan Academy's webapp, you can run: ./dev/tools/bump_perseus_version.sh -t PR2277 |
nishasy
requested review from
SonicScrewdriver,
catandthemachines,
a team and
mark-fitzgerald
nishasy
changed the title
|
Does this have any adverse effects on other screen readers? I know this is pretty bad on Safari, but I want to make sure we're not over correcting for issues that should be logged against Safari/VoiceOver. |
|
@catandthemachines This doesn't affect the experience in any other browsers, it just corrects the issue in Safari. The other browsers didn't read out those elements in the first place, so this is just the status quo for those. |
SonicScrewdriver
approved these changes
Mar 5, 2025
| y={y} | ||
| color={color.blue} | ||
| svgPathProps={{ | ||
| // Use aria-hidden to hide the line from screen readers |
There was a problem hiding this comment.
Ooo fun I never looked into this but I'm glad mafs allowed us to pass props through.
catandthemachines
approved these changes
Mar 5, 2025
|
Update: Third was able to repro when using control + option + arrow keys. |
Merged
catandthemachines
added a commit
that referenced
this pull request
Mar 10, 2025
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@56.1.0 ### Minor Changes - [#2288](#2288) [`7ef0dae77`](7ef0dae) Thanks [@nishasy](https://github.com/nishasy)! - Mark Interactive Graph Widget as accessible. (Content authors are no longer blocked from checking/unchecking the "Requires screen or mouse?" checkbox.) ### Patch Changes - [#2291](#2291) [`e87914dcd`](e87914d) Thanks [@handeyeco](https://github.com/handeyeco)! - Update snapshots as a result of bumping Wonder Blocks - [#2283](#2283) [`0438f6331`](0438f63) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Bugfix to ensure that the Interactive Graph Editor updates the Polygon start coords if the number of sides change. - [#2287](#2287) [`9b4c1942e`](9b4c194) Thanks [@nishasy](https://github.com/nishasy)! - [LX] Make static graphs' interactive elements visually disabled - [#2282](#2282) [`5226f43a9`](5226f43) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Ensure that dragging a point also moves the focus for Interactive Graph - [#2281](#2281) [`015aace83`](015aace) Thanks [@catandthemachines](https://github.com/catandthemachines)! - Improving the angle snapping behavior for keyboard users in polygon examples. - [#2277](#2277) [`88e4e905d`](88e4e90) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Hide individual visual components of interactive graph elements ## @khanacademy/perseus-editor@17.9.1 ### Patch Changes - Updated dependencies \[[`7ef0dae77`](7ef0dae), [`e87914dcd`](e87914d), [`0438f6331`](0438f63), [`9b4c1942e`](9b4c194), [`5226f43a9`](5226f43), [`015aace83`](015aace), [`88e4e905d`](88e4e90)]: - @khanacademy/perseus@56.1.0
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:
When using Safari + VoiceOver, the screen reader reads out every single internal part of every single element on the graph. For example, the arrow on a line is read out as "image" as well as the segment composing the line. This means that when traversing the graph in Safari, there are a whole bunch of empty "image"s being read out with no context. The context is provided by specific element's aria labels.
To remedy this, I added
aria-hiddento all the visual elements that should not be read as "image" in all the graph types.Issue: none
Test Plan:
Storybook