Skip to content

[Interactive Graph] Add WB Announcer to Exponential graph#3736

Merged
catandthemachines merged 2 commits into
mainfrom
catjohnson/wb-announcer-exponential
Jun 8, 2026
Merged

[Interactive Graph] Add WB Announcer to Exponential graph#3736
catandthemachines merged 2 commits into
mainfrom
catjohnson/wb-announcer-exponential

Conversation

@catandthemachines

@catandthemachines catandthemachines commented Jun 5, 2026

Copy link
Copy Markdown
Member

Summary

The Exponential graph has two distinct keyboard moves, and this wires both into the WB Announcer:

  • Control points (movePoint indices 0/1, MovablePoint) — the reducer's doMovePointInFigure case "exponential" now emits a move-exponential-point stateAnnouncement. getAnnouncementText reads index 0 as "Point 1 at X comma Y." and index 1 as "Point 2 at X comma Y." (via a new srExponentialPointLabel helper), with an author-supplied custom label ("Point A at X comma Y.") overriding when one is set — mirroring sinusoid's pointLabels handling.
  • Horizontal asymptote (moveCenter, MovableAsymptote) — doMoveCenter's case "exponential" now emits a move-exponential-asymptote stateAnnouncement carrying the new y, read via the existing srExponentialAsymptote string.
  • exponential.tsx passes ariaLive="off" to both the MovablePoints and the MovableAsymptote so moves aren't double-announced. MovableAsymptote gains an optional ariaLive prop that defaults to "polite", leaving any not-yet-migrated asymptote graph that shares the component unchanged.
  • Both reducer paths keep their existing rejection checks first, so a rejected move emits no stateAnnouncement.
  • TODOs reference LEMS-4189, which tracks removing aria-live from useControlPoint / MovableAsymptote once every graph is wired to the announcer.

Note

The asymptote announcement reuses srExponentialAsymptote ("Horizontal asymptote at y equals Y. Use up and down arrow keys to move."), preserving today's behavior exactly. The keyboard hint now repeats on every keypress through the announcer — a position-only string could be a nice follow-up.

The MovableAsymptote ariaLive prop is also introduced by the Logarithm PR (LEMS-4194). If both merge, whichever lands second needs a trivial rebase on that shared component change.

Issue: LEMS-4193

Test plan

Automated

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

Manual (reviewer)

  • Open the Interactive Graph → Exponential story in Storybook with VoiceOver/NVDA (or the a11y addon's live-region inspector).
  • Arrow-move point 1 and point 2: confirm you hear "Point 1/2 at X comma Y." once each — not doubled.
  • Tab to the horizontal asymptote and arrow-move it: confirm you hear "Horizontal asymptote at y equals Y…" once.
  • With custom point labels set, confirm a labeled point announces "Point A at …" on move.
  • Regression: open the Logarithm story and confirm its asymptote/point announcements still work as expected.

@catandthemachines catandthemachines self-assigned this Jun 5, 2026
@github-actions github-actions Bot added schema-change Attached to PRs when we detect Perseus Schema changes in it item-splitting-change and removed item-splitting-change schema-change Attached to PRs when we detect Perseus Schema changes in it labels Jun 5, 2026
@github-actions

github-actions Bot commented Jun 5, 2026

Copy link
Copy Markdown
Contributor

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3736

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

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

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

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

@github-actions

github-actions Bot commented Jun 5, 2026

Copy link
Copy Markdown
Contributor

Size Change: +74 B (+0.01%)

Total Size: 509 kB

📦 View Changed
Filename Size Change
packages/perseus/dist/es/index.js 200 kB +74 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.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

@catandthemachines catandthemachines merged commit 1cd01a4 into main Jun 8, 2026
13 checks passed
@catandthemachines catandthemachines deleted the catjohnson/wb-announcer-exponential branch June 8, 2026 19:31
Evelas78 added a commit that referenced this pull request Jun 8, 2026
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
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