[Interactive Graph] Wire pointLabels through special-shape graphs (angle, circle, absolute-value)

[ivyolamit]

Summary:

• Wires pointLabels through the three special-shape interactive graphs — angle, circle, and absolute-value — closing out the LEMS-3995 rollout (PRs 1–6 already shipped).
• Each interactive MovablePoint now announces its author-supplied label when set. Per-type fallbacks when pointLabels is unset, empty, or non-string:
  • angle falls back to the existing slot-aware semantic defaults: "Point 1, vertex at …" / "Point 2, ending side at …" / "Point 3, starting side at …".
  • absolute-value falls back to "Vertex point at …" / "Point on arm at …".
  • circle falls back to the compound "Right/Left radius endpoint at … Circle radius is N." — see scope note below.

Co-Authored by Claude Code (Opus)
Issue: LEMS-3995

Test plan:

• Reviewer manual: open the AngleWithCustomLabels / CircleWithCustomLabels / AbsoluteValueWithCustomLabels stories. Enable the Storybook a11y addon (or VoiceOver / JAWS) and confirm each interactive handle announces "Point A / B / C / V / R at …" matching its prompt. Confirm the existing base stories still announce the per-type defaults. For circle, confirm the center's announcement ("Circle. The center point is at …") is NOT overridden even when pointLabels is set.
• Reviewer manual: open the InteractiveGraphAngle / InteractiveGraphCircle / InteractiveGraphAbsoluteValue editor stories, expand "Start coordinates", and confirm each label field is present. For angle/absolute-value, the field sits inside the existing CoordInput tile. For circle, the field appears as a separate "Radius point label:" row at the bottom (only visible when onChangePointLabels is wired by the surrounding interactive-graph-editor.tsx). Type a letter into each field and confirm the rendered graph's point aria-label and the Screen reader tree panel update on the same render.

PR Series

• PR 1 — Schema — no behavior. Only data-shape stop.
• PR 2 — Foundation + Point graph
• PR 3 — Polygon (shares start-coords-point.tsx); widen the gate to type === "point" || type === "polygon"
• PR 4 — Lines: linear, ray
• PR 5 — Multi-line: linear-system, segment
• follow-up PR — Refactor linear, point, polygon, and ray graphs to use usePointAriaLabel instead of buildPointAriaLabel
• PR 6 — Curves: quadratic, sinusoid, tangent, exponential, logarithm
• 👉🏼 PR 7 — Special shapes: angle, circle, absolute-value

[github-actions]

Size Change: +141 B (+0.03%)

Total Size: 506 kB

📦 View Changed

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	105 kB	+66 B (+0.06%)
packages/perseus/dist/es/index.js	199 kB	+75 B (+0.04%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	20.6 kB
packages/keypad-context/dist/es/index.js	1 kB
packages/kmath/dist/es/index.js	6.32 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	12.1 kB
packages/perseus-core/dist/es/index.js	26.1 kB
packages/perseus-linter/dist/es/index.js	9.41 kB
packages/perseus-score/dist/es/index.js	10.2 kB
packages/perseus-utils/dist/es/index.js	403 B
packages/perseus/dist/es/strings.js	8.55 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]

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3697

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

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

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

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