Skip to content

[Interactive Graph] Absolute value graph description polish.#3800

Open
catandthemachines wants to merge 2 commits into
mainfrom
catjohnson/absolute-sr-polish
Open

[Interactive Graph] Absolute value graph description polish.#3800
catandthemachines wants to merge 2 commits into
mainfrom
catjohnson/absolute-sr-polish

Conversation

@catandthemachines

@catandthemachines catandthemachines commented Jun 18, 2026

Copy link
Copy Markdown
Member

Summary:

Updating the Absolute value graph descriptions so the screen reader copy matches the Absolute outline doc, enriching the description with the visual detail that's essential for all learners:

  • Which direction the graph opens (upward / downward).
  • The vertex location (or "the origin" when it sits at 0, 0).
  • The x- and y-intercepts.
  • The slope of the arms.

Follows the same pattern as the exponential (#3786), logarithm (#3798), and vector (#3799) description polish.

Issue: LEMS-4286

Test plan:

Run pnpm storybook and open Widgets → Interactive Graph → Absolute value. These are screen-reader strings, so verify with a screen reader or by inspecting the element aria-labels / aria-describedby text. Check:

  1. Graph description — announces the direction the graph opens, the vertex location, the intercepts, and the slope, e.g. "The graph opens downward. Vertex is at 0 comma 2. The X-intercepts are at -1 comma 0 and 1 comma 0. The Y-intercept is at 0 comma 2. The slope is -2." Drag the points to confirm it updates.
  2. Vertex at the origin — the intercepts are omitted (they'd all be at the origin), e.g. "The graph opens upward. Vertex is at the origin. The slope is 1."
  3. Vertex point — reads "Vertex point at X comma Y."
  4. Arm point — reads "Point on arm at X comma Y." with a separate slope description (aria-describedby) of "The slope is S."
  5. Interactive elements summary"Absolute value graph with vertex point at …, arm point at …, and slope of …."
  6. Live announcements — moving the vertex announces "Vertex point at X comma Y."; moving the arm point announces "Point on arm at X comma Y. The slope is S."

@github-actions

github-actions Bot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3800

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

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

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

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

@github-actions

github-actions Bot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Size Change: +668 B (+0.13%)

Total Size: 514 kB

📦 View Changed
Filename Size Change
packages/perseus/dist/es/index.js 204 kB +352 B (+0.17%)
packages/perseus/dist/es/strings.js 8.91 kB +316 B (+3.68%)
ℹ️ 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.3 kB
packages/perseus-core/dist/es/index.js 27.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/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.

1 participant