@khanacademy/perseus 56.0.0 → 56.1.0

package/dist/es/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/es/index.js

@@ -27696,7 +27696,8 @@ const defaultGraphConfig = {
   width: 0,
   height: 0,
   labels: [],
-  disableKeyboardInteraction: false
+  disableKeyboardInteraction: false,
+  interactiveColor: "var(--mafs-blue)"
 };
 const GraphConfigContext = /*#__PURE__*/createContext(defaultGraphConfig);
 function useGraphConfig() {
@@ -27767,6 +27768,11 @@ function Arrowhead(props) {
   var _props$color;
   const [point] = useTransformVectorsToPixels(props.tip);
   return /*#__PURE__*/React.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.createElement("g", {
@@ -28931,6 +28937,11 @@ function SVGLine(props) {
     testId
   } = props;
   return /*#__PURE__*/React.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],
@@ -28941,15 +28952,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
 } = 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 = vec.sub(tipPx, tailPx);
@@ -28958,7 +28977,8 @@ function Vector(props) {
     style: {
       stroke: color,
       strokeWidth: 2
-    }
+    },
+    "data-testid": testId
   }, /*#__PURE__*/React.createElement(SVGLine, {
     start: tailPx,
     end: tipPx,
@@ -29253,9 +29273,17 @@ function getAngleFromPoints(points, i) {
   const a = vec.dist(point, pt1);
   const b = vec.dist(point, pt2);
   const c = 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) {
@@ -29779,9 +29807,17 @@ const PolygonAngle = ({
   const a = vec.dist(centerPoint, endPoints[0]);
   const b = vec.dist(centerPoint, endPoints[1]);
   const c = 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;
@@ -29897,6 +29933,12 @@ const Angle = ({
   // 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
     id: "background",
     x: "-5%",
@@ -29913,10 +29955,10 @@ const Angle = ({
     start: [x1, y1],
     vertex: [x2, y2],
     end: [x3, y3],
-    className: "arc-right-angle"
+    className: arcClassName
   }) : /*#__PURE__*/React.createElement(Arc, {
     arc: arc,
-    className: "angle-arc"
+    className: arcClassName
   }), showAngles && /*#__PURE__*/React.createElement(TextLabel, {
     x: textX,
     y: textY,
@@ -29934,10 +29976,16 @@ const RightAngleSquare = ({
   end: [x3, y3],
   className
 }) => /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.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"
 }));
 
 // We're conditionally adding the class name here so that we can style the arc differently
@@ -29947,10 +29995,16 @@ const Arc = ({
   className
 }) => {
   return /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.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;
@@ -30222,7 +30276,13 @@ function Hairlines(props) {
   const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
   const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
   const [[__, horizontalEndY]] = useTransformVectorsToPixels([0, yMax]);
-  return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+  return /*#__PURE__*/React.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.createElement("line", {
     x1: verticalStartX,
     y1: y,
     x2: verticalEndX,
@@ -30248,11 +30308,12 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
   var _Object$entries$find$, _Object$entries$find;
   const {
     markings,
-    showTooltips
+    showTooltips,
+    interactiveColor
   } = useGraphConfig();
   const {
     point,
-    color: color$1 = color.blue,
+    color: color$1 = interactiveColor,
     dragging,
     focused,
     cursor,
@@ -30267,6 +30328,11 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
   const [[x, y]] = useTransformVectorsToPixels(point);
   const showHairlines = (dragging || focused) && markings !== "none";
   const svgForPoint = /*#__PURE__*/React.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: {
@@ -30367,9 +30433,22 @@ 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.
   useLayoutEffect(() => {
     setForwardedRef(forwardedRef, focusableHandleRef.current);
   }, [forwardedRef]);
+
+  // If the point is being dragged and is not focused, focus the focusable handle.
+  useLayoutEffect(() => {
+    if (dragging && !focused) {
+      var _focusableHandleRef$c;
+      // 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$c = focusableHandleRef.current) == null || _focusableHandleRef$c.focus();
+    }
+  }, [dragging, focused]);
   const focusableHandle = /*#__PURE__*/React.createElement("g", {
     "data-testid": "movable-point__focusable-handle",
     className: "movable-point__focusable-handle",
@@ -30391,9 +30470,9 @@ function useControlPoint(params) {
   const visiblePoint = /*#__PURE__*/React.createElement(MovablePointView, {
     cursor: cursor,
     onClick: () => {
-      var _focusableHandleRef$c;
+      var _focusableHandleRef$c2;
       onClick();
-      (_focusableHandleRef$c = focusableHandleRef.current) == null || _focusableHandleRef$c.focus();
+      (_focusableHandleRef$c2 = focusableHandleRef.current) == null || _focusableHandleRef$c2.focus();
     },
     point: point,
     dragging: dragging,
@@ -30431,7 +30510,6 @@ const MovableLine = props => {
     points: [start, end],
     ariaLabels,
     ariaDescribedBy,
-    color,
     extend,
     onMoveLine = () => {},
     onMovePoint = () => {}
@@ -30466,7 +30544,6 @@ const MovableLine = props => {
     ariaLive: ariaLives[0],
     point: start,
     sequenceNumber: 1,
-    color,
     onMove: p => {
       setAriaLives(["polite", "off", "off"]);
       onMovePoint(0, p);
@@ -30482,7 +30559,6 @@ const MovableLine = props => {
     ariaLive: ariaLives[1],
     point: end,
     sequenceNumber: 2,
-    color,
     onMove: p => {
       setAriaLives(["off", "polite", "off"]);
       onMovePoint(1, p);
@@ -30495,7 +30571,6 @@ const MovableLine = props => {
     ariaLive: ariaLives[2],
     start: start,
     end: end,
-    stroke: color,
     extend: extend,
     onMove: delta => {
       setAriaLives(["off", "off", "polite"]);
@@ -30504,7 +30579,6 @@ const MovableLine = props => {
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, focusableHandle1, line, focusableHandle2, visiblePoint1, visiblePoint2);
 };
-const defaultStroke = "var(--movable-line-stroke-color)";
 const Line$1 = props => {
   const {
     start,
@@ -30513,7 +30587,6 @@ const Line$1 = props => {
     ariaDescribedBy,
     ariaLive,
     extend,
-    stroke = defaultStroke,
     onMove
   } = props;
   const [startPtPx, endPtPx] = useTransformVectorsToPixels(start, end);
@@ -30521,7 +30594,8 @@ const Line$1 = props => {
     range,
     graphDimensionsInPixels,
     snapStep,
-    disableKeyboardInteraction
+    disableKeyboardInteraction,
+    interactiveColor
   } = useGraphConfig();
   let startExtend = undefined;
   let endExtend = undefined;
@@ -30578,7 +30652,7 @@ const Line$1 = props => {
     start: startPtPx,
     end: endPtPx,
     style: {
-      stroke,
+      stroke: interactiveColor,
       strokeWidth: "var(--movable-line-stroke-weight)"
     },
     className: dragging ? "movable-dragging" : "",
@@ -30586,11 +30660,11 @@ const Line$1 = props => {
   })), startExtend && /*#__PURE__*/React.createElement(Vector, {
     tail: start,
     tip: startExtend,
-    color: stroke
+    testId: "movable-line__vector"
   }), endExtend && /*#__PURE__*/React.createElement(Vector, {
     tail: end,
     tip: endExtend,
-    color: stroke
+    testId: "movable-line__vector"
   }));
 };
 const getMovableLineKeyboardConstraint = (line, snapStep, pointIndex) => {
@@ -30662,7 +30736,8 @@ function AngleGraph(props) {
     graphState
   } = props;
   const {
-    graphDimensionsInPixels
+    graphDimensionsInPixels,
+    interactiveColor
   } = useGraphConfig();
   const i18n = usePerseusI18n();
   const id = React.useId();
@@ -30693,13 +30768,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.createElement(Vector, {
       tail: angleLines[i][1],
       tip: endExtend,
-      color: "var(--movable-line-stroke-color)"
+      testId: "angle-graph__vector"
     }));
   });
 
@@ -31043,7 +31119,8 @@ function MovableCircle(props) {
   } = props;
   const {
     snapStep,
-    disableKeyboardInteraction
+    disableKeyboardInteraction,
+    interactiveColor
   } = useGraphConfig();
   const [focused, setFocused] = React.useState(false);
   const draggableRef = useRef(null);
@@ -31079,7 +31156,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.createElement(DragHandle, {
     center: center,
     dragging: dragging,
@@ -31096,7 +31175,8 @@ function DragHandle(props) {
   } = props;
   const [centerPx] = useTransformVectorsToPixels(center);
   const {
-    markings
+    markings,
+    interactiveColor
   } = useGraphConfig();
   const cornerRadius = Math.min(...dragHandleDimensions) / 2;
   const topLeft = vec.sub(centerPx, vec.scale(dragHandleDimensions, 0.5));
@@ -31110,7 +31190,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] = vec.add(offsetPx, centerPx);
     return /*#__PURE__*/React.createElement("circle", {
@@ -31269,8 +31351,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.createElement("g", {
     id: pointsDescriptionId,
     style: a11y.srOnly
@@ -31409,8 +31490,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(({
     pointsDescriptionId,
     interceptDescriptionId,
@@ -32226,6 +32306,7 @@ function doMovePoint(state, action) {
       {
         return _extends({}, state, {
           hasBeenInteractedWith: true,
+          focusedPointIndex: action.index,
           coords: setAtIndex({
             array: state.coords,
             index: action.index,
@@ -32545,7 +32626,9 @@ function boundAndSnapToPolygonAngle(destinationPoint, {
   coords
 }, index) {
   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];
@@ -32834,7 +32917,8 @@ const LimitedPolygonGraph = statefulProps => {
     snapStep
   } = statefulProps.graphState;
   const {
-    disableKeyboardInteraction
+    disableKeyboardInteraction,
+    interactiveColor
   } = graphConfig;
   const {
     strings,
@@ -32870,12 +32954,16 @@ const LimitedPolygonGraph = statefulProps => {
     "aria-describedby": `${polygonPointsNumId} ${polygonPointsId}`
   }, /*#__PURE__*/React.createElement(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);
@@ -33015,6 +33103,9 @@ const UnlimitedPolygonGraph = statefulProps => {
     strings,
     locale
   } = usePerseusI18n();
+  const {
+    interactiveColor
+  } = useGraphConfig();
   const id = React.useId();
   const polygonPointsNumId = id + "-points-num";
   const polygonPointsId = id + "-points";
@@ -33054,14 +33145,22 @@ const UnlimitedPolygonGraph = statefulProps => {
     "aria-describedby": `${polygonPointsNumId} ${polygonPointsId}`
   }, /*#__PURE__*/React.createElement(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.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"
@@ -33215,7 +33314,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 UnreachableCaseError(snapTo);
   }
@@ -33269,6 +33368,49 @@ function getSideSnapConstraint(points, index, range) {
     right: movePointWithConstraint(coord => 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 => vec.add(coord, [0, 0.1])),
+    down: movePointWithConstraint(coord => vec.sub(coord, [0, 0.1])),
+    left: movePointWithConstraint(coord => vec.sub(coord, [0.1, 0])),
+    right: movePointWithConstraint(coord => vec.add(coord, [0.1, 0]))
+  };
+}
 
 function renderQuadraticGraph(state, dispatch, i18n) {
   return {
@@ -33288,6 +33430,9 @@ function QuadraticGraph(props) {
     coords,
     snapStep
   } = graphState;
+  const {
+    interactiveColor
+  } = useGraphConfig();
   const {
     strings,
     locale
@@ -33329,7 +33474,13 @@ function QuadraticGraph(props) {
     "aria-describedby": `${quadraticDirectionId} ${quadraticVertexId} ${quadraticInterceptsId}`
   }, /*#__PURE__*/React.createElement(Plot$2.OfX, {
     y: y,
-    color: 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
@@ -33724,6 +33875,9 @@ function SinusoidGraph(props) {
     dispatch,
     graphState
   } = props;
+  const {
+    interactiveColor
+  } = useGraphConfig();
   const i18n = usePerseusI18n();
   const id = React.useId();
   const descriptionId = id + "-description";
@@ -33766,7 +33920,13 @@ function SinusoidGraph(props) {
     "aria-describedby": descriptionId
   }, /*#__PURE__*/React.createElement(Plot$2.OfX, {
     y: x => computeSine(x, coeffRef.current),
-    color: 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.createElement(MovablePoint$1, {
     ariaLabel: i === 0 ? srSinusoidRootPoint : srSinusoidPeakPoint,
     key: "point-" + i,
@@ -34115,6 +34275,7 @@ const MafsGraph = props => {
     i18n,
     markings: props.markings
   });
+  const disableInteraction = readOnly || !!props.static;
   return /*#__PURE__*/React.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
@@ -34127,7 +34288,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.createElement(View, {
     className: "mafs-graph-container"
@@ -35143,7 +35309,8 @@ InteractiveGraph.defaultProps = {
 const staticTransform$3 = _.identity;
 var InteractiveGraph$1 = {
   name: "interactive-graph",
-  displayName: "Interactive graph (Assessments only)",
+  displayName: "Interactive graph",
+  accessible: true,
   widget: InteractiveGraph,
   staticTransform: staticTransform$3
 };
@@ -41232,7 +41399,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 = {