Skip to content

[Interactive Graph] Add WB Announcer to Tangent Graph#3734

Open
catandthemachines wants to merge 1 commit into
mainfrom
catjohnson/wb-announcer-tangent
Open

[Interactive Graph] Add WB Announcer to Tangent Graph#3734
catandthemachines wants to merge 1 commit into
mainfrom
catjohnson/wb-announcer-tangent

Conversation

@catandthemachines
Copy link
Copy Markdown
Member

@catandthemachines catandthemachines commented Jun 5, 2026

Summary

  • Wires the Tangent graph's inflection point (movePoint index 0) and second/control point (movePoint index 1) keyboard moves into the WB Announcer — the reducer's case "tangent" now emits a move-tangent-point stateAnnouncement, and tangent.tsx passes ariaLive="off" to MovablePoint so moves aren't double-announced.
  • getAnnouncementText handles move-tangent-point via a new srTangentPointLabel helper: index 0 reads as the inflection point ("Inflection point at X comma Y.") and index 1 as the control point ("Control point at X comma Y."), matching the static aria-labels. An author-supplied custom label ("Point A at X comma Y.") overrides the inflection/control-point phrasing when one is set — mirroring sinusoid's pointLabels handling.
  • The same-x rejection (which keeps the tangent coefficients defined) happens before the announcement, so a rejected move emits no stateAnnouncement.
  • TODOs reference LEMS-4189, which tracks removing aria-live from useControlPoint once every graph is wired to the announcer.

Issue: LEMS-4196

Test plan

Automated

  • pnpm tsc — passes
  • pnpm lint (changed files) — passes
  • pnpm jest packages/perseus/src/widgets/interactive-graphs — passes (reducer, screenreader-text, and tangent suites)

Manual (reviewer)

  • Open the Interactive Graph → Tangent story in Storybook with VoiceOver/NVDA (or the a11y addon's live-region inspector).
  • Arrow-move the inflection point: confirm you hear "Inflection point at X comma Y." once — not doubled.
  • Arrow-move the second point: confirm you hear "Control point at X comma Y." once.
  • With custom point labels set, confirm a labeled point announces "Point A at …" on move.
  • Regression: open Sinusoid, Absolute Value, and Linear and confirm their announcements are unchanged.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 5, 2026

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3734

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

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

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

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 5, 2026

Size Change: +60 B (+0.01%)

Total Size: 508 kB

📦 View Changed
Filename Size Change
packages/perseus/dist/es/index.js 200 kB +60 B (+0.03%)
ℹ️ 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.3 kB
packages/perseus-editor/dist/es/index.js 105 kB
packages/perseus-linter/dist/es/index.js 9.65 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.6 kB
packages/pure-markdown/dist/es/index.js 1.39 kB
packages/simple-markdown/dist/es/index.js 6.71 kB

compressed-size-action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants