[Interactive Graph] Add logarithm graph rendering, SR strings, and equation string (#3423)

## Summary:
PR series to add logarithm graph support to the Interactive Graph widget:
1.  [Add logarithm graph type definitions and data](#3420)
2. [Add logarithm math utilities to kmath](#3421)
3. [Add logarithm graph state management and reducer](#3422)
4. ▶️ [Add logarithm graph rendering, SR strings, and equation string](#3423)
5. [Add logarithm graph scoring](#3424)
6. [Add logarithm graph option in the Interactive Graph Editor](#3425)

Create the logarithm graph visual component, add Storybook coverage, SR strings, and equation string for supporting Logarithm graph in Interactive Graph

- Create the logarithm graph visual component (`logarithm.tsx`) with curve rendering, draggable asymptote, and movable points
- Add 6 screen reader strings for accessibility
- Add equation string display for the editor
- Add Storybook story

## Details

This is the largest PR in the series. It creates the visual rendering of the logarithm graph, following the exponential component pattern with the axis swapped (vertical asymptote instead of horizontal).

**Curve rendering:**
- Single `<Plot.OfX>` with domain restricted to one side of the asymptote (`[asymptoteX + 0.001, xMax]` or `[xMin, asymptoteX - 0.001]`)
- Plot function computes `a * ln(b*x + c)`, returning NaN when outside domain or when y-value exceeds visible range + padding (prevents curve visually touching the asymptote)
- `coeffRef` caches last valid coefficients as fallback during transient invalid states

**Asymptote rendering:**
- Uses existing `MovableAsymptote` component with `orientation="vertical"`
- Dispatches `actions.logarithm.moveCenter()` on drag
- `constrainAsymptoteKeyboard()` implements snap-through logic for keyboard navigation (mirrors exponential's vertical version but on X-axis)

**Keyboard constraints:**
- `getLogarithmKeyboardConstraint()` prevents points from landing on the asymptote's x-coordinate or sharing y-value with the other point
- Uses bounded retry (max 3 steps) to skip past invalid positions

**Equation string:**
- `getLogarithmEquationString()` displays `y = a*ln(b*x + c)` with computed coefficient values
- `defaultLogarithmCoords()` provides fallback coords (normalized fractions `[0.55, 0.55]`, `[0.75, 0.75]`)

**Screen reader strings (6):**
- `srLogarithmGraph` — graph container label
- `srLogarithmPoint1` / `srLogarithmPoint2` — point position labels
- `srLogarithmAsymptote` — asymptote label with keyboard instructions
- `srLogarithmDescription` — graph state description
- `srLogarithmInteractiveElements` — interactive elements summary

Co-Authored by Claude Code (Opus)

Issue: LEMS-3953

## Test plan:

- [ ] `pnpm tsc` passes
- [ ] `pnpm knip` passes
- [ ] `pnpm lint` passes
- [ ] `pnpm prettier . --check` passes
- [ ] Logarithm component tests pass (15 new tests):
  - 9 screen reader tests (aria-labels, descriptions, interactive elements, updates on state change)
  - 3 keyboard constraint tests for points (valid move, skip asymptote, skip same-y)
  - 3 keyboard constraint tests for asymptote (free move, snap-through, skip point x-value)
- [ ] Interactive graph tests pass (178 passed, 28 skipped)
- [ ] Verify rendering in Storybook (logarithm story renders correctly, curve matches expected shape)

Author: ivyolamit

Reviewers: claude[bot], ivyolamit, SonicScrewdriver

Required Reviewers:

Approved By: SonicScrewdriver

Checks: ⏭️  1 check has been skipped, ✅ 10 checks were successful

Pull Request URL: #3423

Author: ivyolamit

.changeset/hip-turtles-sort.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Create the logarithm graph visual component, add Storybook coverage, SR strings, and equation string for supporting Logarithm graph in Interactive Graph

packages/perseus/src/strings.ts

@@ -522,6 +522,36 @@ export type PerseusStrings = {
         asymptoteY: string;
     }) => string;
     srExponentialAsymptote: ({asymptoteY}: {asymptoteY: string}) => string;
+    srLogarithmGraph: string;
+    srLogarithmPoint1: ({x, y}: {x: string; y: string}) => string;
+    srLogarithmPoint2: ({x, y}: {x: string; y: string}) => string;
+    srLogarithmDescription: ({
+        point1X,
+        point1Y,
+        point2X,
+        point2Y,
+        asymptoteX,
+    }: {
+        point1X: string;
+        point1Y: string;
+        point2X: string;
+        point2Y: string;
+        asymptoteX: string;
+    }) => string;
+    srLogarithmInteractiveElements: ({
+        point1X,
+        point1Y,
+        point2X,
+        point2Y,
+        asymptoteX,
+    }: {
+        point1X: string;
+        point1Y: string;
+        point2X: string;
+        point2Y: string;
+        asymptoteX: string;
+    }) => string;
+    srLogarithmAsymptote: ({asymptoteX}: {asymptoteX: string}) => string;
     srAbsoluteValueGraph: string;
     srAbsoluteValueVertexPoint: ({x, y}: {x: string; y: string}) => string;
     srAbsoluteValueSecondPoint: ({x, y}: {x: string; y: string}) => string;
@@ -1202,6 +1232,39 @@ export const strings = {
         message:
             "Horizontal asymptote at y equals %(asymptoteY)s. Use up and down arrow keys to move.",
     },
+    srLogarithmGraph: {
+        context:
+            "Aria label for the container containing a Logarithm function in the interactive graph widget.",
+        message: "A logarithm function on a coordinate plane.",
+    },
+    srLogarithmPoint1: {
+        context:
+            "Aria label for the first Point on the Logarithm function in the interactive graph widget.",
+        message: "Point 1 at %(x)s comma %(y)s.",
+    },
+    srLogarithmPoint2: {
+        context:
+            "Aria label for the second Point on the Logarithm function in the interactive graph widget.",
+        message: "Point 2 at %(x)s comma %(y)s.",
+    },
+    srLogarithmDescription: {
+        context:
+            "Screen reader description of the Logarithm function in the interactive graph widget.",
+        message:
+            "The graph shows a logarithm curve passing through point %(point1X)s comma %(point1Y)s and point %(point2X)s comma %(point2Y)s with a vertical asymptote at x equals %(asymptoteX)s.",
+    },
+    srLogarithmInteractiveElements: {
+        context:
+            "Screen reader description of all the elements available to interact with within the Logarithm function in the interactive graph widget.",
+        message:
+            "Logarithm graph with point 1 at %(point1X)s comma %(point1Y)s, point 2 at %(point2X)s comma %(point2Y)s, and vertical asymptote at x equals %(asymptoteX)s.",
+    },
+    srLogarithmAsymptote: {
+        context:
+            "Aria label for the draggable vertical asymptote line in the Logarithm function in the interactive graph widget.",
+        message:
+            "Vertical asymptote at x equals %(asymptoteX)s. Use left and right arrow keys to move.",
+    },
     srAbsoluteValueGraph: {
         context:
             "Aria label for the container containing an Absolute Value function in the interactive graph widget.",
@@ -1612,6 +1675,27 @@ export const mockStrings: PerseusStrings = {
         `Exponential graph with point 1 at ${point1X} comma ${point1Y}, point 2 at ${point2X} comma ${point2Y}, and horizontal asymptote at y equals ${asymptoteY}.`,
     srExponentialAsymptote: ({asymptoteY}) =>
         `Horizontal asymptote at y equals ${asymptoteY}. Use up and down arrow keys to move.`,
+    srLogarithmGraph: "A logarithm function on a coordinate plane.",
+    srLogarithmPoint1: ({x, y}) => `Point 1 at ${x} comma ${y}.`,
+    srLogarithmPoint2: ({x, y}) => `Point 2 at ${x} comma ${y}.`,
+    srLogarithmDescription: ({
+        point1X,
+        point1Y,
+        point2X,
+        point2Y,
+        asymptoteX,
+    }) =>
+        `The graph shows a logarithm curve passing through point ${point1X} comma ${point1Y} and point ${point2X} comma ${point2Y} with a vertical asymptote at x equals ${asymptoteX}.`,
+    srLogarithmInteractiveElements: ({
+        point1X,
+        point1Y,
+        point2X,
+        point2Y,
+        asymptoteX,
+    }) =>
+        `Logarithm graph with point 1 at ${point1X} comma ${point1Y}, point 2 at ${point2X} comma ${point2Y}, and vertical asymptote at x equals ${asymptoteX}.`,
+    srLogarithmAsymptote: ({asymptoteX}) =>
+        `Vertical asymptote at x equals ${asymptoteX}. Use left and right arrow keys to move.`,
     srAbsoluteValueGraph: "An absolute value function on a coordinate plane.",
     srAbsoluteValueVertexPoint: ({x, y}) => `Vertex point at ${x} comma ${y}.`,
     srAbsoluteValueSecondPoint: ({x, y}) => `Point on arm at ${x} comma ${y}.`,

packages/perseus/src/widgets/interactive-graphs/__docs__/interactive-graph.stories.tsx

@@ -17,6 +17,7 @@ import {
     segmentWithAllLockedLineVariations,
     segmentWithAllLockedRayVariations,
     exponentialQuestion,
+    logarithmQuestion,
     sinusoidQuestion,
     tangentQuestion,
     segmentWithLockedEllipses,
@@ -117,6 +118,12 @@ export const Sinusoid: Story = {
     },
 };
 
+export const Logarithm: Story = {
+    args: {
+        item: generateTestPerseusItem({question: logarithmQuestion}),
+    },
+};
+
 export const Tangent: Story = {
     args: {
         item: generateTestPerseusItem({question: tangentQuestion}),

packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-asymptote.test.tsx

@@ -83,6 +83,32 @@ describe("MovableAsymptote", () => {
         );
     });
 
+    it("blurs the element when a mouse drag ends to clear the focus ring", () => {
+        // Arrange — start with dragging: true
+        useDraggable.mockReturnValue({dragging: true});
+        const {rerender} = render(
+            <Mafs width={200} height={200}>
+                <MovableAsymptote {...defaultProps} />
+            </Mafs>,
+        );
+
+        const group = screen.getByTestId("movable-asymptote");
+        // Simulate that the element received focus during drag
+        group.focus();
+        const blurSpy = jest.spyOn(group, "blur");
+
+        // Act — drag ends
+        useDraggable.mockReturnValue({dragging: false});
+        rerender(
+            <Mafs width={200} height={200}>
+                <MovableAsymptote {...defaultProps} />
+            </Mafs>,
+        );
+
+        // Assert — blur was called to remove the focus ring
+        expect(blurSpy).toHaveBeenCalled();
+    });
+
     it("renders the same structure for vertical orientation", () => {
         // Arrange, Act
         render(

packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-asymptote.tsx

@@ -56,6 +56,16 @@ export function MovableAsymptote(props: Props) {
         constrainKeyboardMovement: constrainKeyboardMovement ?? ((p) => p),
     });
 
+    // When a mouse drag ends, blur the element so the focus ring doesn't
+    // persist after the user releases the mouse and moves away.
+    const wasDragging = React.useRef(false);
+    React.useEffect(() => {
+        if (wasDragging.current && !dragging) {
+            groupRef.current?.blur();
+        }
+        wasDragging.current = dragging;
+    }, [dragging]);
+
     return (
         <g
             ref={groupRef}

packages/perseus/src/widgets/interactive-graphs/graphs/exponential.test.tsx

@@ -200,6 +200,10 @@ describe("getExponentialKeyboardConstraint", () => {
     ];
     const asymptote = 1;
     const snapStep: vec.Vector2 = [1, 1];
+    const range: [vec.Vector2, vec.Vector2] = [
+        [-10, 10],
+        [-10, 10],
+    ];
 
     it("moves point up by one snap step when valid", () => {
         // Arrange, Act
@@ -208,6 +212,7 @@ describe("getExponentialKeyboardConstraint", () => {
             asymptote,
             snapStep,
             0,
+            range,
         );
 
         // Assert
@@ -227,6 +232,7 @@ describe("getExponentialKeyboardConstraint", () => {
             asymptote,
             snapStep,
             0,
+            range,
         );
 
         // Assert — skips y=1 (asymptote) and lands on y=0
@@ -246,11 +252,84 @@ describe("getExponentialKeyboardConstraint", () => {
             asymptote,
             snapStep,
             0,
+            range,
         );
 
         // Assert — skips x=2 and lands on x=3
         expect(constraint.right).toEqual([3, 3]);
     });
+
+    it("rejects positions where the clamped coord collides with the other point's x", () => {
+        // Arrange — points at [9,3] and [8,6], asymptote at 1.
+        // Moving point 0 right: x=10 clamps to 9 (inset max),
+        // which equals otherPoint[X]=... wait, otherPoint is point 1.
+        // Actually let's use: point 0 at [8,3], point 1 at [9,6].
+        // Moving right: x=9 shares x with point 1 (skip).
+        // x=10 clamps to 9 (same as point 1). All further clamp to 9.
+        const edgeCoords: [vec.Vector2, vec.Vector2] = [
+            [8, 3],
+            [9, 6],
+        ];
+
+        // Act
+        const constraint = getExponentialKeyboardConstraint(
+            edgeCoords,
+            asymptote,
+            snapStep,
+            0,
+            range,
+        );
+
+        // Assert — no valid right move, falls back to original position
+        expect(constraint.right).toEqual([8, 3]);
+    });
+
+    it("stays put when all upward positions would cause a clamped reflection collision", () => {
+        // Arrange — asymptote at y=8, points at [3,7] and [1,4].
+        // Moving point 0 up: y=8 is the asymptote (skip), y=9 crosses
+        // the asymptote so reflectedY = 2*8-4 = 12, which clamps to 9
+        // (yMax - snapStep). clampedReflectedY(9) === clampedY(9). Skip.
+        // y=10 clamps to 9 too. No valid upward position.
+        const edgeCoords: [vec.Vector2, vec.Vector2] = [
+            [3, 7],
+            [1, 4],
+        ];
+
+        // Act
+        const constraint = getExponentialKeyboardConstraint(
+            edgeCoords,
+            8,
+            snapStep,
+            0,
+            range,
+        );
+
+        // Assert — no valid up move, falls back to original position
+        expect(constraint.up).toEqual([3, 7]);
+    });
+
+    it("skips positions where the clamped asymptote check catches out-of-bounds coord", () => {
+        // Arrange — asymptote at y=9 (one step from edge).
+        // Point 0 at [3,8], moving up: y=9 is asymptote (skip).
+        // y=10 clamps to 9 which also equals asymptote. Skip.
+        // No valid upward position.
+        const edgeCoords: [vec.Vector2, vec.Vector2] = [
+            [3, 8],
+            [1, 6],
+        ];
+
+        // Act
+        const constraint = getExponentialKeyboardConstraint(
+            edgeCoords,
+            9,
+            snapStep,
+            0,
+            range,
+        );
+
+        // Assert — no valid up move
+        expect(constraint.up).toEqual([3, 8]);
+    });
 });
 
 describe("constrainAsymptoteKeyboard", () => {