[SR] Add aria-hidden to individual components of interactive graph elements

[nishasy]

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-hidden to all the visual elements that should not be read as "image" in all the graph types.

Issue: none

Test Plan:

Storybook

• http://localhost:6006/?path=/docs/perseuseditor-widgets-interactive-graph--docs
• Go to every graph type and traverse through it with a screen reader
• Confirm there are no random empty "image" calls

[github-actions]

Size Change: +313 B (+0.04%)

Total Size: 873 kB

Filename	Size	Change
packages/perseus/dist/es/index.js	368 kB	+313 B (+0.09%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	39.7 kB
packages/keypad-context/dist/es/index.js	760 B
packages/kmath/dist/es/index.js	11.1 kB
packages/math-input/dist/es/index.js	78.2 kB
packages/math-input/dist/es/strings.js	1.79 kB
packages/perseus-core/dist/es/index.js	29.9 kB
packages/perseus-editor/dist/es/index.js	276 kB
packages/perseus-linter/dist/es/index.js	22.8 kB
packages/perseus-score/dist/es/index.js	20.6 kB
packages/perseus/dist/es/strings.js	6.74 kB
packages/pure-markdown/dist/es/index.js	4.14 kB
packages/simple-markdown/dist/es/index.js	13.1 kB

_{compressed-size-action}

[github-actions]

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR2277

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR2277

[catandthemachines]

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.

[nishasy]

@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]

Looks good to me! Thanks for this great fix. :)

Note: I tried testing what I currently have in storybook and I wasn't able to recreate it with Safari. 🤔 I wonder if this is a more recent bug that they've introduced, as I'm a few versions behind.

[SonicScrewdriver]

Ooo fun I never looked into this but I'm glad mafs allowed us to pass props through.

[catandthemachines]

No impact to other screen readers, lets go! 😎

[nishasy]

Update: Third was able to repro when using control + option + arrow keys.