[Interactive Graph] Add WB Announcer to Absolute Value Graph by catandthemachines · Pull Request #3733 · Khan/perseus

catandthemachines · 2026-06-05T22:59:35Z

Summary

Wires the Absolute Value graph's vertex (movePoint index 0) and arm-point (movePoint index 1) keyboard moves into the WB Announcer — the reducer's case "absolute-value" now emits a move-absolute-value-point stateAnnouncement, and absolute-value.tsx passes ariaLive="off" to MovablePoint so moves aren't double-announced.
getAnnouncementText handles move-absolute-value-point via a new srAbsoluteValuePointLabel helper: index 0 reads as the vertex ("Vertex point at X comma Y.") and index 1 as the arm point ("Point on arm at X comma Y."), matching the static aria-labels. An author-supplied custom label ("Point A at X comma Y.") overrides the vertex/arm phrasing when one is set — mirroring sinusoid's pointLabels handling.
The same-x rejection (which keeps the slope 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-4195

Test plan

Automated

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

Manual (reviewer)

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

…lue Graph

github-actions · 2026-06-05T23:02:01Z

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3733

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

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

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

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

github-actions · 2026-06-05T23:03:06Z

Size Change: +43 B (+0.01%)

Total Size: 508 kB

📦 View Changed

Filename	Size	Change
`packages/perseus/dist/es/index.js`	200 kB	+43 B (+0.02%)

ℹ️ 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.8 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}

benchristel · 2026-06-08T16:10:50Z

+                {
+                    type: "move-absolute-value-point",
+                    pointIndex: 0,
+                    pointLabel: 1,


What does it mean when pointLabel is a number? This seems confusing.

pointIndex is used to determine the "type" of point is being used, while the pointLabel can be a number (index +1 by default) or a custom label.

We also have a follow-up ticket here:
https://khanacademy.atlassian.net/browse/LEMS-4206

benchristel · 2026-06-08T16:24:18Z

+type MoveAbsoluteValuePointAnnouncement = {
+    type: "move-absolute-value-point";
+    pointIndex: number;
+    pointLabel: string | number;


It looks like pointLabel has no effect unless it is a string. I think the type should be:

Suggested change

pointLabel: string | number;

pointLabel?: string;

…n/wb-announcer-absolute

@nishasy

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@77.11.0 ### Minor Changes - [#3742](#3742) [`d15912407c`](d159124) Thanks [@nishasy](https://github.com/nishasy)! - [Image] Remove gif flag, make gif controls permanent - [#3725](#3725) [`9c601da23f`](9c601da) Thanks [@EmiliaPalaghita](https://github.com/EmiliaPalaghita)! - Add new JSON field "showPointLabels" for interactive graphs. When set, every movable point gets a visible on-canvas label driven by the matching `pointLabels[i]` entry. `pointLabels` is required whenever `showPointLabels` is true (enforced by the interactive-graph-widget-error lint rule). ### Patch Changes - [#3678](#3678) [`5d4625eb73`](5d4625e) Thanks [@catandthemachines](https://github.com/catandthemachines)! - [Interactive Graph] Add WB Announcer to Quadratic Graph - [#3718](#3718) [`7ba77bb3e5`](7ba77bb) Thanks [@ivyolamit](https://github.com/ivyolamit)! - [Interactive Graph] Refactor movable-line - [#3732](#3732) [`40491377ee`](4049137) Thanks [@Evelas78](https://github.com/Evelas78)! - Added role="figure" to the mafs-graph - [#3729](#3729) [`fcd76e42c0`](fcd76e4) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add test to catch typo in translation e.g. %(word) -> \\$(word)s - [#3701](#3701) [`7ccf7fbc8f`](7ccf7fb) Thanks [@Myranae](https://github.com/Myranae)! - Migrate sortable fonts and colors to semantic tokens and add regression stories - [#3703](#3703) [`5d00f57022`](5d00f57) Thanks [@Myranae](https://github.com/Myranae)! - Convert expression widget related files to use semantic tokens - [#3733](#3733) [`6f711cfcf9`](6f711cf) Thanks [@catandthemachines](https://github.com/catandthemachines)! - [Interactive Graph] Use WB Announcer in Absolute Value graph. - [#3736](#3736) [`1cd01a4550`](1cd01a4) Thanks [@catandthemachines](https://github.com/catandthemachines)! - [Interactive Graph] Use WB Announcer in Exponential graph. - [#3735](#3735) [`dcc83bdbf8`](dcc83bd) Thanks [@catandthemachines](https://github.com/catandthemachines)! - [Interactive Graph] Use WB Announcer in Logarithm graph. - [#3734](#3734) [`b4d94b3c09`](b4d94b3) Thanks [@catandthemachines](https://github.com/catandthemachines)! - [Interactive Graph] Use WB Announcer in Tangent graph. - Updated dependencies \[[`d15912407c`](d159124), [`9c601da23f`](9c601da), [`ec0ce8d61a`](ec0ce8d), [`5d00f57022`](5d00f57)]: - @khanacademy/perseus-core@27.4.0 - @khanacademy/perseus-linter@5.1.0 - @khanacademy/math-input@26.4.33 - @khanacademy/keypad-context@3.2.61 - @khanacademy/kmath@2.4.19 - @khanacademy/perseus-score@8.11.3 ## @khanacademy/perseus-core@27.4.0 ### Minor Changes - [#3725](#3725) [`9c601da23f`](9c601da) Thanks [@EmiliaPalaghita](https://github.com/EmiliaPalaghita)! - Add new JSON field "showPointLabels" for interactive graphs. When set, every movable point gets a visible on-canvas label driven by the matching `pointLabels[i]` entry. `pointLabels` is required whenever `showPointLabels` is true (enforced by the interactive-graph-widget-error lint rule). ### Patch Changes - [#3742](#3742) [`d15912407c`](d159124) Thanks [@nishasy](https://github.com/nishasy)! - [Image] Remove gif flag, make gif controls permanent - [#3726](#3726) [`ec0ce8d61a`](ec0ce8d) Thanks [@handeyeco](https://github.com/handeyeco)! - Copy data that was once shared into perseus-parser ## @khanacademy/perseus-linter@5.1.0 ### Minor Changes - [#3725](#3725) [`9c601da23f`](9c601da) Thanks [@EmiliaPalaghita](https://github.com/EmiliaPalaghita)! - Add new JSON field "showPointLabels" for interactive graphs. When set, every movable point gets a visible on-canvas label driven by the matching `pointLabels[i]` entry. `pointLabels` is required whenever `showPointLabels` is true (enforced by the interactive-graph-widget-error lint rule). ### Patch Changes - Updated dependencies \[[`d15912407c`](d159124), [`9c601da23f`](9c601da), [`ec0ce8d61a`](ec0ce8d)]: - @khanacademy/perseus-core@27.4.0 - @khanacademy/kmath@2.4.19 ## @khanacademy/keypad-context@3.2.61 ### Patch Changes - Updated dependencies \[[`d15912407c`](d159124), [`9c601da23f`](9c601da), [`ec0ce8d61a`](ec0ce8d)]: - @khanacademy/perseus-core@27.4.0 ## @khanacademy/kmath@2.4.19 ### Patch Changes - Updated dependencies \[[`d15912407c`](d159124), [`9c601da23f`](9c601da), [`ec0ce8d61a`](ec0ce8d)]: - @khanacademy/perseus-core@27.4.0 ## @khanacademy/math-input@26.4.33 ### Patch Changes - [#3703](#3703) [`5d00f57022`](5d00f57) Thanks [@Myranae](https://github.com/Myranae)! - Convert expression widget related files to use semantic tokens - Updated dependencies \[[`d15912407c`](d159124), [`9c601da23f`](9c601da), [`ec0ce8d61a`](ec0ce8d)]: - @khanacademy/perseus-core@27.4.0 - @khanacademy/keypad-context@3.2.61 ## @khanacademy/perseus-editor@32.3.2 ### Patch Changes - [#3722](#3722) [`e751a37c67`](e751a37) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - BUGFIX: Fix cursor positioning after pasting widget content, or after inserting a widget via the "Add a widget…" dropdown, in the markdown editor (was jumping to the end of the content always). - [#3742](#3742) [`d15912407c`](d159124) Thanks [@nishasy](https://github.com/nishasy)! - [Image] Remove gif flag, make gif controls permanent - Updated dependencies \[[`5d4625eb73`](5d4625e), [`7ba77bb3e5`](7ba77bb), [`d15912407c`](d159124), [`40491377ee`](4049137), [`fcd76e42c0`](fcd76e4), [`9c601da23f`](9c601da), [`ec0ce8d61a`](ec0ce8d), [`7ccf7fbc8f`](7ccf7fb), [`5d00f57022`](5d00f57), [`6f711cfcf9`](6f711cf), [`1cd01a4550`](1cd01a4), [`dcc83bdbf8`](dcc83bd), [`b4d94b3c09`](b4d94b3)]: - @khanacademy/perseus@77.11.0 - @khanacademy/perseus-core@27.4.0 - @khanacademy/perseus-linter@5.1.0 - @khanacademy/math-input@26.4.33 - @khanacademy/keypad-context@3.2.61 - @khanacademy/kmath@2.4.19 - @khanacademy/perseus-score@8.11.3 ## @khanacademy/perseus-score@8.11.3 ### Patch Changes - Updated dependencies \[[`d15912407c`](d159124), [`9c601da23f`](9c601da), [`ec0ce8d61a`](ec0ce8d)]: - @khanacademy/perseus-core@27.4.0 - @khanacademy/kmath@2.4.19

[catjohnson/wb-announcer-absolute] Adding WB Announcer to Absolute Va…

9527554

…lue Graph

catandthemachines self-assigned this Jun 5, 2026

catandthemachines added the olc-5.0.f429d label Jun 5, 2026

catandthemachines changed the title ~~[Interactive Graph] Adding WB Announcer to Absolute Value Graph~~ [Interactive Graph] Add WB Announcer to Absolute Value Graph Jun 5, 2026

catandthemachines requested review from Evelas78, benchristel, handeyeco and ivyolamit June 5, 2026 23:01

catandthemachines requested a review from nishasy June 5, 2026 23:02

ivyolamit approved these changes Jun 5, 2026

View reviewed changes

benchristel reviewed Jun 8, 2026

View reviewed changes

[catjohnson/wb-announcer-absolute] Merge branch 'main' into catjohnso…

f1461b7

…n/wb-announcer-absolute

catandthemachines merged commit 6f711cf into main Jun 8, 2026
13 checks passed

catandthemachines deleted the catjohnson/wb-announcer-absolute branch June 8, 2026 18:30

khan-actions-bot mentioned this pull request Jun 8, 2026

Version Packages #3739

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Interactive Graph] Add WB Announcer to Absolute Value Graph#3733

[Interactive Graph] Add WB Announcer to Absolute Value Graph#3733
catandthemachines merged 2 commits into
mainfrom
catjohnson/wb-announcer-absolute

catandthemachines commented Jun 5, 2026 •

edited by atlassian Bot

Loading

Uh oh!

github-actions Bot commented Jun 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 5, 2026 •

edited

Loading

Uh oh!

benchristel Jun 8, 2026

Uh oh!

catandthemachines Jun 8, 2026

Uh oh!

ivyolamit Jun 8, 2026

Uh oh!

benchristel Jun 8, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

catandthemachines commented Jun 5, 2026 • edited by atlassian Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Automated

Manual (reviewer)

Uh oh!

github-actions Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

npm Snapshot: Published

Uh oh!

github-actions Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

benchristel Jun 8, 2026

Choose a reason for hiding this comment

Uh oh!

catandthemachines Jun 8, 2026

Choose a reason for hiding this comment

Uh oh!

ivyolamit Jun 8, 2026

Choose a reason for hiding this comment

Uh oh!

benchristel Jun 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

catandthemachines commented Jun 5, 2026 •

edited by atlassian Bot

Loading

github-actions Bot commented Jun 5, 2026 •

edited

Loading

github-actions Bot commented Jun 5, 2026 •

edited

Loading