feat(LEMS-2662): handle angle aria label updates

[anakaren-rojas]

Summary:

• Adds SR functionality for angle sides and vertex
• Adds variations of 6 variations of angle strings - initial side copy (x2), updated side copy (x2), initial vertex copy, updated vertex copy

Issue: LEMS-2662

Test plan:

Testing Steps

1. Navigate to chromatic
2. Add an interactive graph widget and update the answer type to Angle
3. With screen reader on - move any of the points on the graph
4. Enable Show angle measures and move points
5. Enable Allow reflex angles and move points

Expected behavior

1. Screen Reader reads point coordinates (always)
2. When Show angle measures is not enabled, screen reader does not read out angle measure
3. When Show angle measures is enabled, angle measure is read out with vertex
4. When Show angle measures and Allow reflex angles are enabled, Screen Reader reads out reflex angles

Screen Recordings:

Without angle measures

Screen.Recording.2024-12-03.at.14.53.13.mov

With angle measures

Screen.Recording.2024-12-03.at.14.53.53.mov

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1940

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

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

[github-actions]

Size Change: +723 B (+0.06%)

Total Size: 1.29 MB

Filename	Size	Change
packages/perseus/dist/es/index.js	426 kB	+423 B (+0.1%)
packages/perseus/dist/es/strings.js	4 kB	+300 B (+8.11%)	🔍

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	39 kB
packages/keypad-context/dist/es/index.js	760 B
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	77.9 kB
packages/math-input/dist/es/strings.js	1.79 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-editor/dist/es/index.js	697 kB
packages/perseus-linter/dist/es/index.js	22.2 kB
packages/pure-markdown/dist/es/index.js	3.66 kB
packages/simple-markdown/dist/es/index.js	12.5 kB

_{compressed-size-action}

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/famous-rockets-occur.md, packages/perseus/src/strings.ts, packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx, packages/perseus/src/widgets/interactive-graphs/math/angles.ts

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[benchristel]

This is exciting!

Requesting changes because we're ultimately going to want a different approach to aria-live notifications (see my inline comment about avoiding useState and building for the upcoming Wonder Blocks API) and I'd prefer to start designing for that now.

[benchristel]

I think we could avoid using the useState and useEffect hooks here if we:

• compute aria labels from the graphState prop
• use aria-live to notify the user of changes to the graph

This would ensure that the SR view and the visible view never get out of sync, since both would be pure functions of graphState. Currently, all the individual graph components are stateless (or nearly so — there are a couple useStates for hover and dragging effects) and I'd like to keep it that way.

Wonder Blocks is planning an API for sending aria-live notifications, but since it's not built yet, I think what we could do is write a minimal implementation of the same API and swap in the WB one when it's ready. I'd be down to pair or consult on that if you want.