@khanacademy/perseus 56.0.0 → 56.1.0

package/dist/index.css

@@ -4446,6 +4446,14 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     --mafs-green: #00a60e; /* WB color.green */
     --mafs-violet: #9059ff; /* WB color.purple */
     --mafs-yellow: #ffb100; /* WB color.gold */
+    /* Note: offBlack50 is not the best for contrast. However, this color needs
+    to be distinguishable from our regular interactive blue so it is clear that
+    the element is not interactive, even though the visual elements (e.g.
+    outlines, shadows) may indicate otherwise. When using a darker gray, it
+    looks the same as our WB blue in grayscale. We had to make a call here, and
+    we decided to make it lighter and more distinguishable even if it sacrifices
+    color contrast. (Nisha 2025) */
+    --static-gray: #909296 /* WB color.offBlack50 */;
 
     /* overridden on a per-point basis */
     --movable-point-color: var(--mafs-blue);
@@ -4595,7 +4603,6 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
 }
 
 .MafsView .movable-circle .circle {
-    stroke: var(--mafs-blue);
     stroke-width: 2px;
     fill: transparent;
 }
@@ -4626,7 +4633,6 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
 }
 
 .MafsView .movable-circle .movable-circle-handle {
-    fill: var(--mafs-blue); /* WB fadedOffBlack64 */
     stroke: #fff;
     stroke-width: 2px;
 }
@@ -4646,12 +4652,16 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     stroke: rgba(33, 36, 44, 0.32);
 }
 
-.MafsView .angle-arc,
-.MafsView .arc-right-angle {
+.MafsView .angle-arc-interactive {
     stroke: var(--mafs-blue);
     stroke-width: 0.1px;
 }
 
+.MafsView .angle-arc-static {
+    stroke: var(--static-gray);
+    stroke-width: 0.1px;
+}
+
 .MafsView .axis-tick-label {
     /* There is a bug in the MathJax font for Safari, so we use KaTeX */
     font-family: "KaTeX_Main", "Mafs-MJXTEX", sans-serif;

package/dist/index.js

@@ -28143,7 +28143,8 @@ const defaultGraphConfig = {
   width: 0,
   height: 0,
   labels: [],
-  disableKeyboardInteraction: false
+  disableKeyboardInteraction: false,
+  interactiveColor: "var(--mafs-blue)"
 };
 const GraphConfigContext = /*#__PURE__*/React.createContext(defaultGraphConfig);
 function useGraphConfig() {
@@ -28220,6 +28221,11 @@ const arrowPath = pathBuilder().move(-3, 4).curve(-2.75, 2.5, 0, 0.25, 0.75, 0).
 function Arrowhead(props) {
   const [point] = useTransformVectorsToPixels(props.tip);
   return /*#__PURE__*/React__namespace.createElement("g", {
+    // Use aria-hidden to hide the line from screen readers
+    // so it doesn't read as "image" with no context.
+    // The elements using this should have their own aria-labels,
+    // so this is okay.
+    "aria-hidden": true,
     className: "interactive-graph-arrowhead",
     transform: `translate(${point[X]} ${point[Y]}) rotate(${props.angle})`
   }, /*#__PURE__*/React__namespace.createElement("g", {
@@ -29389,6 +29395,11 @@ function SVGLine(props) {
     testId
   } = props;
   return /*#__PURE__*/React__namespace.createElement("line", {
+    // Use aria-hidden to hide the line from screen readers
+    // so it doesn't read as "image" with no context.
+    // The elements using this should have their own aria-labels,
+    // so this is okay.
+    "aria-hidden": true,
     x1: start[X],
     y1: start[Y],
     x2: end[X],
@@ -29399,15 +29410,23 @@ function SVGLine(props) {
   });
 }
 
+/**
+ * Used to visualize vectors for both interative elements
+ * as well as locked figures within an Interactive Graph widget.
+ */
 const {
   calculateAngleInDegrees: calculateAngleInDegrees$3
 } = kmath.angles;
 function Vector(props) {
+  const {
+    interactiveColor
+  } = useGraphConfig();
   const {
     tail,
     tip,
-    color,
-    style
+    color = interactiveColor,
+    style,
+    testId
   } = props;
   const [tailPx, tipPx] = useTransformVectorsToPixels(tail, tip);
   const direction = mafs.vec.sub(tipPx, tailPx);
@@ -29416,7 +29435,8 @@ function Vector(props) {
     style: {
       stroke: color,
       strokeWidth: 2
-    }
+    },
+    "data-testid": testId
   }, /*#__PURE__*/React__namespace.createElement(SVGLine, {
     start: tailPx,
     end: tipPx,
@@ -29714,9 +29734,17 @@ function getAngleFromPoints(points, i) {
   const a = mafs.vec.dist(point, pt1);
   const b = mafs.vec.dist(point, pt2);
   const c = mafs.vec.dist(pt1, pt2);
+  let lawOfCosinesRadicand = (a ** 2 + b ** 2 - c ** 2) / (2 * a * b);
+
+  // If the equation results in a number greater than 1 or less than -1.
+  // Correct to ensure a valid angle.
+  // This ensures we are not producing NaN results from Math.acos.
+  if (lawOfCosinesRadicand < -1 || lawOfCosinesRadicand > 1) {
+    lawOfCosinesRadicand = Math.round(lawOfCosinesRadicand);
+  }
 
   // Law of cosines
-  const angle = Math.acos((a ** 2 + b ** 2 - c ** 2) / (2 * a * b));
+  const angle = Math.acos(lawOfCosinesRadicand);
   return angle;
 }
 function getSideLengthsFromPoints(points, i, isPolygonOpen) {
@@ -30243,9 +30271,17 @@ const PolygonAngle = _ref => {
   const a = mafs.vec.dist(centerPoint, endPoints[0]);
   const b = mafs.vec.dist(centerPoint, endPoints[1]);
   const c = mafs.vec.dist(endPoints[0], endPoints[1]);
+  let lawOfCosinesRadicand = (a ** 2 + b ** 2 - c ** 2) / (2 * a * b);
+
+  // If the equation results in a number greater than 1 or less than -1.
+  // Correct to ensure a valid angle.
+  // This ensures we are not producing NaN results from Math.acos.
+  if (lawOfCosinesRadicand < -1 || lawOfCosinesRadicand > 1) {
+    lawOfCosinesRadicand = Math.round(lawOfCosinesRadicand);
+  }
 
   // Law of cosines
-  const angle = Math.acos((a ** 2 + b ** 2 - c ** 2) / (2 * a * b));
+  const angle = Math.acos(lawOfCosinesRadicand);
   const y1 = centerY + (startY - centerY) / a * radius;
   const x2 = centerX + (endX - centerX) / b * radius;
   const x1 = centerX + (startX - centerX) / a * radius;
@@ -30362,6 +30398,12 @@ const Angle = _ref2 => {
   // Calculate the text position based on the angle and whether we allow reflex angles
   // Let's try the angle bisector method to find the midpoint of the arc
   const [textX, textY] = calculateBisectorPoint(point1, point2, vertex, isReflexive, allowReflexAngles, radius);
+
+  // Determine the color style for the arc when interactive vs disabled
+  const {
+    disableKeyboardInteraction
+  } = useGraphConfig();
+  const arcClassName = disableKeyboardInteraction ? "angle-arc-static" : "angle-arc-interactive";
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("filter", {
     id: "background",
     x: "-5%",
@@ -30378,10 +30420,10 @@ const Angle = _ref2 => {
     start: [x1, y1],
     vertex: [x2, y2],
     end: [x3, y3],
-    className: "arc-right-angle"
+    className: arcClassName
   }) : /*#__PURE__*/React__namespace.createElement(Arc, {
     arc: arc,
-    className: "angle-arc"
+    className: arcClassName
   }), showAngles && /*#__PURE__*/React__namespace.createElement(TextLabel, {
     x: textX,
     y: textY,
@@ -30401,10 +30443,16 @@ const RightAngleSquare = _ref3 => {
     className
   } = _ref3;
   return /*#__PURE__*/React__namespace.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React__namespace.createElement("path", {
+    // Use aria-hidden to hide the line from screen readers
+    // so it doesn't read as "image" with no context.
+    // The elements using this should have their own aria-labels,
+    // so this is okay.
+    "aria-hidden": true,
     d: `M ${x1} ${y1} L ${x3} ${y3} M ${x3} ${y3} L ${x2} ${y2}`,
     strokeWidth: 0.02,
     fill: "none",
-    className: className
+    className: className,
+    "data-testid": "angle-indicators__right-angle"
   }));
 };
 
@@ -30416,10 +30464,16 @@ const Arc = _ref4 => {
     className
   } = _ref4;
   return /*#__PURE__*/React__namespace.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React__namespace.createElement("path", {
+    // Use aria-hidden to hide the line from screen readers
+    // so it doesn't read as "image" with no context.
+    // The elements using this should have their own aria-labels,
+    // so this is okay.
+    "aria-hidden": true,
     d: arc,
     strokeWidth: 0.02,
     fill: "none",
-    className: className
+    className: className,
+    "data-testid": "angle-indicators__arc"
   }));
 };
 const isRightPolygonAngle = angle => Math.abs(angle - Math.PI / 2) < 0.01;
@@ -30692,7 +30746,13 @@ function Hairlines(props) {
   const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
   const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
   const [[__, horizontalEndY]] = useTransformVectorsToPixels([0, yMax]);
-  return /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("line", {
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    // Use aria-hidden to hide the line from screen readers
+    // so it doesn't read as "image" with no context.
+    // The elements using this should have their own aria-labels,
+    // so this is okay.
+    "aria-hidden": true
+  }, /*#__PURE__*/React__namespace.createElement("line", {
     x1: verticalStartX,
     y1: y,
     x2: verticalEndX,
@@ -30717,11 +30777,12 @@ const hitboxSizePx = 48;
 const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
   const {
     markings,
-    showTooltips
+    showTooltips,
+    interactiveColor
   } = useGraphConfig();
   const {
     point,
-    color = wonderBlocksTokens.color.blue,
+    color = interactiveColor,
     dragging,
     focused,
     cursor,
@@ -30739,6 +30800,11 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
   const [[x, y]] = useTransformVectorsToPixels(point);
   const showHairlines = (dragging || focused) && markings !== "none";
   const svgForPoint = /*#__PURE__*/React__namespace.createElement("g", {
+    // Use aria-hidden to hide the line from screen readers
+    // so it doesn't read as "image" with no context.
+    // The elements using this should have their own aria-labels,
+    // so this is okay.
+    "aria-hidden": true,
     ref: hitboxRef,
     className: pointClasses,
     style: {
@@ -30842,9 +30908,21 @@ function useControlPoint(params) {
     x: srFormatNumber(point[X], locale),
     y: srFormatNumber(point[Y], locale)
   });
+
+  // Set the forwarded ref to the focusable handle element when it changes.
   React.useLayoutEffect(() => {
     setForwardedRef(forwardedRef, focusableHandleRef.current);
   }, [forwardedRef]);
+
+  // If the point is being dragged and is not focused, focus the focusable handle.
+  React.useLayoutEffect(() => {
+    if (dragging && !focused) {
+      // If the point is being dragged, focus the focusable handle so that
+      // users can continue to interact with the point using the keyboard or buttons.
+      // This particular focus call ensures that the focus ring and hairlines are visible.
+      focusableHandleRef.current?.focus();
+    }
+  }, [dragging, focused]);
   const focusableHandle = /*#__PURE__*/React__namespace.createElement("g", {
     "data-testid": "movable-point__focusable-handle",
     className: "movable-point__focusable-handle",
@@ -30905,7 +30983,6 @@ const MovableLine = props => {
     points: [start, end],
     ariaLabels,
     ariaDescribedBy,
-    color,
     extend,
     onMoveLine = () => {},
     onMovePoint = () => {}
@@ -30940,7 +31017,6 @@ const MovableLine = props => {
     ariaLive: ariaLives[0],
     point: start,
     sequenceNumber: 1,
-    color,
     onMove: p => {
       setAriaLives(["polite", "off", "off"]);
       onMovePoint(0, p);
@@ -30956,7 +31032,6 @@ const MovableLine = props => {
     ariaLive: ariaLives[1],
     point: end,
     sequenceNumber: 2,
-    color,
     onMove: p => {
       setAriaLives(["off", "polite", "off"]);
       onMovePoint(1, p);
@@ -30969,7 +31044,6 @@ const MovableLine = props => {
     ariaLive: ariaLives[2],
     start: start,
     end: end,
-    stroke: color,
     extend: extend,
     onMove: delta => {
       setAriaLives(["off", "off", "polite"]);
@@ -30978,7 +31052,6 @@ const MovableLine = props => {
   });
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, focusableHandle1, line, focusableHandle2, visiblePoint1, visiblePoint2);
 };
-const defaultStroke = "var(--movable-line-stroke-color)";
 const Line$1 = props => {
   const {
     start,
@@ -30987,7 +31060,6 @@ const Line$1 = props => {
     ariaDescribedBy,
     ariaLive,
     extend,
-    stroke = defaultStroke,
     onMove
   } = props;
   const [startPtPx, endPtPx] = useTransformVectorsToPixels(start, end);
@@ -30995,7 +31067,8 @@ const Line$1 = props => {
     range,
     graphDimensionsInPixels,
     snapStep,
-    disableKeyboardInteraction
+    disableKeyboardInteraction,
+    interactiveColor
   } = useGraphConfig();
   let startExtend = undefined;
   let endExtend = undefined;
@@ -31052,7 +31125,7 @@ const Line$1 = props => {
     start: startPtPx,
     end: endPtPx,
     style: {
-      stroke,
+      stroke: interactiveColor,
       strokeWidth: "var(--movable-line-stroke-weight)"
     },
     className: dragging ? "movable-dragging" : "",
@@ -31060,11 +31133,11 @@ const Line$1 = props => {
   })), startExtend && /*#__PURE__*/React__namespace.createElement(Vector, {
     tail: start,
     tip: startExtend,
-    color: stroke
+    testId: "movable-line__vector"
   }), endExtend && /*#__PURE__*/React__namespace.createElement(Vector, {
     tail: end,
     tip: endExtend,
-    color: stroke
+    testId: "movable-line__vector"
   }));
 };
 const getMovableLineKeyboardConstraint = (line, snapStep, pointIndex) => {
@@ -31137,7 +31210,8 @@ function AngleGraph(props) {
     graphState
   } = props;
   const {
-    graphDimensionsInPixels
+    graphDimensionsInPixels,
+    interactiveColor
   } = useGraphConfig();
   const i18n = usePerseusI18n();
   const id = React__namespace.useId();
@@ -31169,13 +31243,14 @@ function AngleGraph(props) {
       start: startPtPx,
       end: endPtPx,
       style: {
-        stroke: "var(--movable-line-stroke-color)",
+        stroke: interactiveColor,
         strokeWidth: "var(--movable-line-stroke-weight)"
-      }
+      },
+      testId: "angle-graph__line"
     }), /*#__PURE__*/React__namespace.createElement(Vector, {
       tail: angleLines[i][1],
       tip: endExtend,
-      color: "var(--movable-line-stroke-color)"
+      testId: "angle-graph__vector"
     }));
   });
 
@@ -31532,7 +31607,8 @@ function MovableCircle(props) {
   } = props;
   const {
     snapStep,
-    disableKeyboardInteraction
+    disableKeyboardInteraction,
+    interactiveColor
   } = useGraphConfig();
   const [focused, setFocused] = React__namespace.useState(false);
   const draggableRef = React.useRef(null);
@@ -31568,7 +31644,9 @@ function MovableCircle(props) {
     cx: centerPx[X],
     cy: centerPx[Y],
     rx: radiiPx[X],
-    ry: radiiPx[Y]
+    ry: radiiPx[Y],
+    stroke: interactiveColor,
+    "data-testid": "movable-circle__circle"
   }), /*#__PURE__*/React__namespace.createElement(DragHandle, {
     center: center,
     dragging: dragging,
@@ -31585,7 +31663,8 @@ function DragHandle(props) {
   } = props;
   const [centerPx] = useTransformVectorsToPixels(center);
   const {
-    markings
+    markings,
+    interactiveColor
   } = useGraphConfig();
   const cornerRadius = Math.min(...dragHandleDimensions) / 2;
   const topLeft = mafs.vec.sub(centerPx, mafs.vec.scale(dragHandleDimensions, 0.5));
@@ -31599,7 +31678,9 @@ function DragHandle(props) {
     width: dragHandleDimensions[X],
     height: dragHandleDimensions[Y],
     rx: cornerRadius,
-    ry: cornerRadius
+    ry: cornerRadius,
+    fill: interactiveColor,
+    "data-testid": "movable-circle__handle"
   }), dragHandleDotPositions.map(offsetPx => {
     const [xPx, yPx] = mafs.vec.add(offsetPx, centerPx);
     return /*#__PURE__*/React__namespace.createElement("circle", {
@@ -31758,8 +31839,7 @@ const LinearGraph = (props, key) => {
       start: true,
       end: true
     },
-    onMovePoint: (endpointIndex, destination) => dispatch(actions.linear.movePoint(endpointIndex, destination)),
-    color: "var(--movable-line-stroke-color)"
+    onMovePoint: (endpointIndex, destination) => dispatch(actions.linear.movePoint(endpointIndex, destination))
   }), /*#__PURE__*/React__namespace.createElement("g", {
     id: pointsDescriptionId,
     style: a11y.srOnly
@@ -31901,8 +31981,7 @@ const LinearSystemGraph = props => {
       start: true,
       end: true
     },
-    onMovePoint: (endpointIndex, destination) => dispatch(actions.linearSystem.movePointInFigure(i, endpointIndex, destination)),
-    color: "var(--movable-line-stroke-color)"
+    onMovePoint: (endpointIndex, destination) => dispatch(actions.linearSystem.movePointInFigure(i, endpointIndex, destination))
   })), linesAriaInfo.map(_ref2 => {
     let {
       pointsDescriptionId,
@@ -32748,6 +32827,7 @@ function doMovePoint(state, action) {
         return {
           ...state,
           hasBeenInteractedWith: true,
+          focusedPointIndex: action.index,
           coords: setAtIndex({
             array: state.coords,
             index: action.index,
@@ -33083,7 +33163,9 @@ function boundAndSnapToPolygonAngle(destinationPoint, _ref6, index) {
     coords
   } = _ref6;
   const startingPoint = coords[index];
-
+  return calculateAngleSnap(destinationPoint, range, coords, index, startingPoint);
+}
+function calculateAngleSnap(destinationPoint, range, coords, index, startingPoint) {
   // Needed to prevent updating the original coords before the checks for
   // degenerate triangles and overlapping sides
   const coordsCopy = [...coords];
@@ -33375,7 +33457,8 @@ const LimitedPolygonGraph = statefulProps => {
     snapStep
   } = statefulProps.graphState;
   const {
-    disableKeyboardInteraction
+    disableKeyboardInteraction,
+    interactiveColor
   } = graphConfig;
   const {
     strings,
@@ -33411,12 +33494,16 @@ const LimitedPolygonGraph = statefulProps => {
     "aria-describedby": `${polygonPointsNumId} ${polygonPointsId}`
   }, /*#__PURE__*/React__namespace.createElement(mafs.Polygon, {
     points: [...points],
-    color: "var(--movable-line-stroke-color)",
+    color: interactiveColor,
     svgPolygonProps: {
       strokeWidth: focusVisible ? "var(--movable-line-stroke-weight-active)" : "var(--movable-line-stroke-weight)",
       style: {
         fill: "transparent"
-      }
+      },
+      // Use aria-hidden to hide the line from screen readers
+      // so it doesn't read as "image" with no context.
+      // This is okay because the graph has its own aria-label.
+      "aria-hidden": true
     }
   }), points.map((point, i) => {
     const pt1 = points.at(i - 1);
@@ -33557,6 +33644,9 @@ const UnlimitedPolygonGraph = statefulProps => {
     strings,
     locale
   } = usePerseusI18n();
+  const {
+    interactiveColor
+  } = useGraphConfig();
   const id = React__namespace.useId();
   const polygonPointsNumId = id + "-points-num";
   const polygonPointsId = id + "-points";
@@ -33597,14 +33687,22 @@ const UnlimitedPolygonGraph = statefulProps => {
     "aria-describedby": `${polygonPointsNumId} ${polygonPointsId}`
   }, /*#__PURE__*/React__namespace.createElement(mafs.Polyline, {
     points: [...points],
-    color: "var(--movable-line-stroke-color)",
+    color: interactiveColor,
     svgPolylineProps: {
       strokeWidth: "var(--movable-line-stroke-weight)",
       style: {
         fill: "transparent"
-      }
+      },
+      // Use aria-hidden to hide the line from screen readers
+      // so it doesn't read as "image" with no context.
+      // This is okay because the graph has its own aria-label.
+      "aria-hidden": true
     }
   }), /*#__PURE__*/React__namespace.createElement("rect", {
+    // Use aria-hidden to hide the line from screen readers
+    // so it doesn't read as "image" with no context.
+    // This is okay because the graph has its own aria-label.
+    "aria-hidden": true,
     style: {
       fill: "rgba(0,0,0,0)",
       cursor: "crosshair"
@@ -33758,7 +33856,7 @@ function getKeyboardMovementConstraintForPoint(points, index, range, snapStep, s
     case "sides":
       return getSideSnapConstraint(points, index, range);
     case "angles":
-      return p => p;
+      return getAngleSnapConstraint(points, index, range);
     default:
       throw new wonderStuffCore.UnreachableCaseError(snapTo);
   }
@@ -33812,6 +33910,49 @@ function getSideSnapConstraint(points, index, range) {
     right: movePointWithConstraint(coord => mafs.vec.add(coord, [1, 0]))
   };
 }
+function getAngleSnapConstraint(points, index, range) {
+  // Make newPoints mutable.
+  const newPoints = [...points];
+
+  // Get the point that is being moved.
+  const pointToBeMoved = newPoints[index];
+
+  // Create a helper function that moves the point to a valid location
+  // for angle snapping.
+  const movePointWithConstraint = moveFunc => {
+    // The direction the user is attempting to move the point in.
+    let destinationAttempt = bound$1({
+      snapStep: [0, 0],
+      range,
+      point: moveFunc(pointToBeMoved)
+    });
+    // The new point we're moving to.
+    let newPoint = pointToBeMoved;
+
+    // Move the point and keep trying until we are at the boarder
+    // of the graph.
+    while (newPoint[0] === pointToBeMoved[0] && newPoint[1] === pointToBeMoved[1] && isInBound({
+      range,
+      point: destinationAttempt
+    })) {
+      newPoint = calculateAngleSnap(destinationAttempt, range, newPoints, index, pointToBeMoved);
+
+      // Increment the destinationAttempt.
+      // For every time it does not work increment the direction for x and y.
+      destinationAttempt = moveFunc(destinationAttempt);
+    }
+    return newPoint;
+  };
+
+  // For each direction look for the next movable point by a small step to increase changes
+  // of finding the next angle value.
+  return {
+    up: movePointWithConstraint(coord => mafs.vec.add(coord, [0, 0.1])),
+    down: movePointWithConstraint(coord => mafs.vec.sub(coord, [0, 0.1])),
+    left: movePointWithConstraint(coord => mafs.vec.sub(coord, [0.1, 0])),
+    right: movePointWithConstraint(coord => mafs.vec.add(coord, [0.1, 0]))
+  };
+}
 
 function renderQuadraticGraph(state, dispatch, i18n) {
   return {
@@ -33831,6 +33972,9 @@ function QuadraticGraph(props) {
     coords,
     snapStep
   } = graphState;
+  const {
+    interactiveColor
+  } = useGraphConfig();
   const {
     strings,
     locale
@@ -33872,7 +34016,13 @@ function QuadraticGraph(props) {
     "aria-describedby": `${quadraticDirectionId} ${quadraticVertexId} ${quadraticInterceptsId}`
   }, /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, {
     y: y,
-    color: wonderBlocksTokens.color.blue
+    color: interactiveColor,
+    svgPathProps: {
+      // Use aria-hidden to hide the line from screen readers
+      // so it doesn't read as "image" with no context.
+      // This is okay because the graph has its own aria-label.
+      "aria-hidden": true
+    }
   }), coords.map((coord, i) => {
     const srQuadraticPoint = getQuadraticPointString(i + 1, coord, strings, locale);
     // Vertex might not exist if the quadratic graph is a line
@@ -34272,6 +34422,9 @@ function SinusoidGraph(props) {
     dispatch,
     graphState
   } = props;
+  const {
+    interactiveColor
+  } = useGraphConfig();
   const i18n = usePerseusI18n();
   const id = React__namespace.useId();
   const descriptionId = id + "-description";
@@ -34314,7 +34467,13 @@ function SinusoidGraph(props) {
     "aria-describedby": descriptionId
   }, /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, {
     y: x => computeSine(x, coeffRef.current),
-    color: wonderBlocksTokens.color.blue
+    color: interactiveColor,
+    svgPathProps: {
+      // Use aria-hidden to hide the line from screen readers
+      // so it doesn't read as "image" with no context.
+      // This is okay because the graph has its own aria-label.
+      "aria-hidden": true
+    }
   }), coords.map((coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     ariaLabel: i === 0 ? srSinusoidRootPoint : srSinusoidPeakPoint,
     key: "point-" + i,
@@ -34663,6 +34822,7 @@ const MafsGraph = props => {
     i18n,
     markings: props.markings
   });
+  const disableInteraction = readOnly || !!props.static;
   return /*#__PURE__*/React__namespace.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
@@ -34675,7 +34835,12 @@ const MafsGraph = props => {
       width,
       height,
       labels,
-      disableKeyboardInteraction: readOnly || !!props.static
+      disableKeyboardInteraction: disableInteraction,
+      // If the graph is read-only or static, we want to make it
+      // visually clear that the graph is no longer interactive.
+      // We do this by changing the color of the interactive elements
+      // to a static gray color rather than our standard blue.
+      interactiveColor: disableInteraction ? "var(--static-gray)" : "var(--mafs-blue)"
     }
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     className: "mafs-graph-container"
@@ -35701,7 +35866,8 @@ class InteractiveGraph extends React__namespace.Component {
 const staticTransform$3 = ___default["default"].identity;
 var InteractiveGraph$1 = {
   name: "interactive-graph",
-  displayName: "Interactive graph (Assessments only)",
+  displayName: "Interactive graph",
+  accessible: true,
   widget: InteractiveGraph,
   staticTransform: staticTransform$3
 };
@@ -41796,7 +41962,7 @@ const addLibraryVersionToPerseusDebug = (libraryName, libraryVersion) => {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "56.0.0";
+const libVersion = "56.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {