@khanacademy/perseus 57.0.0 → 57.1.0

package/dist/es/index.js

@@ -234,8 +234,8 @@ const mockStrings = {
   simulationLocaleWarning: "Sorry, this simulation isn't available in your language.",
   selectAnAnswer: "Select an answer",
   // The following strings are used for interactive graph SR descriptions.
-  srGraphInstructions: "Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use the Arrow keys to move it.",
-  srUnlimitedGraphInstructions: "Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use the Arrow keys to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.",
+  srGraphInstructions: "Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use Control + Shift + Arrows to move it.",
+  srUnlimitedGraphInstructions: "Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use Control + Shift + Arrows to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.",
   xAxis: "X-axis",
   yAxis: "Y-axis",
   graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
@@ -24998,7 +24998,7 @@ class GradedGroupAnswerBar extends React.Component {
   }
 }
 GradedGroupAnswerBar.contextType = PerseusI18nContext;
-const fontSize$1 = 17;
+const fontSize = 17;
 const styles$j = {
   answerBar: {
     display: "flex",
@@ -25023,7 +25023,7 @@ const styles$j = {
     flexDirection: "row",
     alignItems: "center",
     fontWeight: "bold",
-    fontSize: fontSize$1
+    fontSize: fontSize
   }
 };
 
@@ -27679,7 +27679,6 @@ const defaultGraphConfig = {
   width: 0,
   height: 0,
   labels: [],
-  labelLocation: "onAxis",
   disableKeyboardInteraction: false,
   interactiveColor: "var(--mafs-blue)"
 };
@@ -27895,8 +27894,6 @@ function escapeIfUnescaped(character) {
   }
 }
 
-// Exported for testing purposes
-const fontSize = 14;
 function AxisLabels({
   i18n
 }) {
@@ -27904,26 +27901,24 @@ function AxisLabels({
     range,
     labels,
     width,
-    height,
-    labelLocation
+    height
   } = useGraphConfig();
   const {
     strings
   } = i18n;
+  const yAxisLabelLocation = [0, range[Y][MAX]];
+  const xAxisLabelLocation = [range[X][MAX], 0];
+  const [xAxisLabelText, yAxisLabelText] = labels;
   const graphInfo = {
     range,
     width,
     height
   };
-
-  // Get the position of the main axis labels
-  const [xAxisLabelLocation, yAxisLabelLocation] = getLabelPosition(graphInfo, labelLocation);
-  const [xAxisLabelText, yAxisLabelText] = labels;
-
-  // If the labels are rotated, we need to center the
-  // x-axis label along the bottom of the graph.
-  const xLabelTransform = labelLocation === "onAxis" ? "translate(7px, -50%)" : "translate(-50%, -50%)";
-  const yLabelTransform = labelLocation === "onAxis" ? "translate(-50%, 0px)" : "translate(-50%, 0px) rotate(-90deg)";
+  const [x1, y1] = pointToPixel(xAxisLabelLocation, graphInfo);
+  // The default location for the y-axis-label is at the maximum y point
+  // This is just underneath the tick line for that point. The -24 moves the
+  // label up one grid square, so it sits on top of the graph
+  const [x2, y2] = vec.add(pointToPixel(yAxisLabelLocation, graphInfo), [0, -24]);
   const {
     TeX
   } = getDependencies();
@@ -27931,53 +27926,22 @@ function AxisLabels({
     "aria-label": strings.xAxis,
     style: {
       position: "absolute",
-      left: xAxisLabelLocation[X],
-      top: xAxisLabelLocation[Y],
-      fontSize: fontSize + "px",
-      transform: xLabelTransform
+      left: x1,
+      top: y1,
+      fontSize: "14px",
+      transform: "translate(7px, -50%)"
     }
   }, /*#__PURE__*/React__default.createElement(TeX, null, replaceOutsideTeX(xAxisLabelText))), /*#__PURE__*/React__default.createElement("span", {
     "aria-label": strings.yAxis,
     style: {
       position: "absolute",
-      left: yAxisLabelLocation[X],
-      top: yAxisLabelLocation[Y],
-      fontSize: fontSize + "px",
-      transform: yLabelTransform
+      left: x2,
+      top: y2,
+      fontSize: "14px",
+      transform: "translate(-50%, 0px)"
     }
   }, /*#__PURE__*/React__default.createElement(TeX, null, replaceOutsideTeX(yAxisLabelText))));
 }
-const getLabelPosition = (graphInfo, labelLocation) => {
-  // If the labels are placed along the edge of the graph, we need to place them at the
-  // center of the graph, which is the average of the min and max values of the axes.
-  if (labelLocation === "alongEdge") {
-    // Offset the labels by a certain amount based on the range of the graph, to ensure that
-    // the labels do not overlap with the axis tick if they are out of the graph bounds.
-    const xAxisLabelOffset = graphInfo.range[Y][MIN] >= 0 ? [0, fontSize * 3] // Move the label down by 3 font sizes if the y-axis min is positive
-    : [0, fontSize]; // Move the label down by 1 font size if the y-axis min is negative
-    const yAxisLabelOffset = graphInfo.range[X][MIN] >= 0 ? [-fontSize * 3, -fontSize] // Move the label left by 3 font sizes if the x-axis min is positive
-    : [-fontSize, -fontSize]; // Move the label left by 1 font size if the x-axis min is negative
-
-    // Calculate the location of the labels to be halfway between the min and max values of the axes
-    const xAxisLabelLocation = [(graphInfo.range[X][MIN] + graphInfo.range[X][MAX]) / 2, graphInfo.range[Y][MIN]];
-    const yAxisLabelLocation = [graphInfo.range[X][MIN], (graphInfo.range[Y][MIN] + graphInfo.range[Y][MAX]) / 2];
-
-    // Convert the Vector2 coordinates to pixel coordinates and add the offsets
-    const _xLabel = vec.add(pointToPixel(xAxisLabelLocation, graphInfo), xAxisLabelOffset);
-    const _yLabel = vec.add(pointToPixel(yAxisLabelLocation, graphInfo), yAxisLabelOffset);
-    return [_xLabel, _yLabel];
-  }
-
-  // Otherwise, the labels are placed on the axes (default), and we need to
-  // place them at the end of the axis, which is the maximum value of the axis.
-  const xLabelInitial = [graphInfo.range[X][MAX], 0];
-  const yLabelInitial = [0, graphInfo.range[Y][MAX]];
-  const yLabelOffset = [0, -fontSize * 2]; // Move the y-axis label up by 2 font sizes
-
-  const xLabel = pointToPixel(xLabelInitial, graphInfo);
-  const yLabel = vec.add(pointToPixel(yLabelInitial, graphInfo), yLabelOffset);
-  return [xLabel, yLabel];
-};
 
 // The size of the ticks and labels in pixels
 const tickSize = 10;
@@ -30197,6 +30161,7 @@ function useDraggable(args) {
       const {
         direction: yDownDirection,
         altKey,
+        ctrlKey,
         metaKey,
         shiftKey
       } = state;
@@ -30206,7 +30171,7 @@ function useDraggable(args) {
       if (altKey || metaKey) {
         divisions = 200;
       }
-      if (shiftKey) {
+      if (shiftKey && !ctrlKey) {
         divisions = 10;
       }
       const min = span / (divisions * 2);
@@ -30735,6 +30700,35 @@ const MovablePoint$1 = /*#__PURE__*/React.forwardRef((props, pointRef) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, focusableHandle, visiblePoint);
 });
 
+/**
+ * If an element has an `aria-describedby` attribute, it needs to point to
+ * a separate description element that contains the description for that
+ * element.
+ *
+ * If the element is within an SVG, the description element must be a
+ * `<span>` within a `<foreignObject>` in order for some browser/SR
+ * combos to be able to access it.
+ *
+ * Use this SRDescInSVG component to create the <foreignObject>
+ * and styling for this description element.
+ */
+function SRDescInSVG(props) {
+  const {
+    id,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement("foreignObject", null, /*#__PURE__*/React.createElement("span", {
+    id: id
+    // Hidden visually
+    ,
+    style: a11y.srOnly
+    // Hidden from screen readers so they don't read this
+    // again outside of the element that it describes.
+    ,
+    "aria-hidden": true
+  }, children));
+}
+
 const {
   calculateAngleInDegrees: calculateAngleInDegrees$1,
   getClockwiseAngle: getClockwiseAngle$2,
@@ -30841,9 +30835,8 @@ function AngleGraph(props) {
     constrain: getAngleSideConstraint(coords[2], coords[1], snapDegrees || 1),
     onMove: destination => dispatch(actions.angle.movePoint(2, destination)),
     ariaLabel: srAngleStartingSide
-  }), /*#__PURE__*/React.createElement("g", {
-    id: descriptionId,
-    style: a11y.srOnly
+  }), /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: descriptionId
   }, srAngleGraphAriaDescription));
 }
 function getAngleGraphDescription(state, i18n) {
@@ -31119,12 +31112,10 @@ function CircleGraph(props) {
       dispatch(actions.circle.moveRadiusPoint(newRadiusPoint));
     },
     constrain: getCircleKeyboardConstraint(center, radiusPoint, snapStep)
-  }), /*#__PURE__*/React.createElement("g", {
-    id: radiusId,
-    style: a11y.srOnly
-  }, srCircleRadius), /*#__PURE__*/React.createElement("g", {
-    id: outerPointsId,
-    style: a11y.srOnly
+  }), /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: radiusId
+  }, srCircleRadius), /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: outerPointsId
   }, srCircleOuterPoints));
 }
 function MovableCircle(props) {
@@ -31371,15 +31362,12 @@ const LinearGraph = (props, key) => {
       end: true
     },
     onMovePoint: (endpointIndex, destination) => dispatch(actions.linear.movePoint(endpointIndex, destination))
-  }), /*#__PURE__*/React.createElement("g", {
-    id: pointsDescriptionId,
-    style: a11y.srOnly
-  }, srLinearGraphPoints), /*#__PURE__*/React.createElement("g", {
-    id: interceptDescriptionId,
-    style: a11y.srOnly
-  }, interceptString), /*#__PURE__*/React.createElement("g", {
-    id: slopeDescriptionId,
-    style: a11y.srOnly
+  }), /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: pointsDescriptionId
+  }, srLinearGraphPoints), /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: interceptDescriptionId
+  }, interceptString), /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: slopeDescriptionId
   }, slopeString));
 };
 function getLinearGraphDescription(state, i18n) {
@@ -31517,21 +31505,16 @@ const LinearSystemGraph = props => {
     pointsDescription,
     interceptDescription,
     slopeDescription
-  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("g", {
-    key: pointsDescriptionId,
-    id: pointsDescriptionId,
-    style: a11y.srOnly
-  }, pointsDescription), /*#__PURE__*/React.createElement("g", {
-    key: interceptDescriptionId,
-    id: interceptDescriptionId,
-    style: a11y.srOnly
-  }, interceptDescription), /*#__PURE__*/React.createElement("g", {
-    key: slopeDescriptionId,
-    id: slopeDescriptionId,
-    style: a11y.srOnly
-  }, slopeDescription))), /*#__PURE__*/React.createElement("g", {
-    id: intersectionId,
-    style: a11y.srOnly
+  }, i) => /*#__PURE__*/React.createElement("span", {
+    key: `line-descriptions-${i}`
+  }, /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: pointsDescriptionId
+  }, pointsDescription), /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: interceptDescriptionId
+  }, interceptDescription), /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: slopeDescriptionId
+  }, slopeDescription))), /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: intersectionId
   }, intersectionDescription));
 };
 
@@ -33086,23 +33069,21 @@ const LimitedPolygonGraph = statefulProps => {
         // point is "polite".
         setAriaLives(["off", ...newPointAriaLives]);
       }
-    }), angleDegree && /*#__PURE__*/React.createElement("g", {
+    }), angleDegree && /*#__PURE__*/React.createElement(SRDescInSVG, {
       id: angleId
     }, Number.isInteger(angleDegree) ? strings.srPolygonPointAngle({
       angle: angleDegree
     }) : strings.srPolygonPointAngleApprox({
       angle: srFormatNumber(angleDegree, locale, 1)
-    })), /*#__PURE__*/React.createElement("g", {
+    })), /*#__PURE__*/React.createElement(SRDescInSVG, {
       id: side1Id
-    }, getPolygonSideString(side1Length, point1Index, strings, locale)), /*#__PURE__*/React.createElement("g", {
+    }, getPolygonSideString(side1Length, point1Index, strings, locale)), /*#__PURE__*/React.createElement(SRDescInSVG, {
       id: side2Id
     }, getPolygonSideString(side2Length, point2Index, strings, locale)));
-  }), /*#__PURE__*/React.createElement("g", {
-    id: polygonPointsNumId,
-    style: a11y.srOnly
-  }, srPolygonGraphPointsNum), srPolygonGraphPoints && /*#__PURE__*/React.createElement("g", {
-    id: polygonPointsId,
-    style: a11y.srOnly
+  }), /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: polygonPointsNumId
+  }, srPolygonGraphPointsNum), srPolygonGraphPoints && /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: polygonPointsId
   }, srPolygonGraphPoints));
 };
 const UnlimitedPolygonGraph = statefulProps => {
@@ -33237,7 +33218,7 @@ const UnlimitedPolygonGraph = statefulProps => {
         }
         dispatch(actions.polygon.clickPoint(i));
       }
-    }), angleDegree && /*#__PURE__*/React.createElement("g", {
+    }), angleDegree && /*#__PURE__*/React.createElement(SRDescInSVG, {
       id: angleId
     }, Number.isInteger(angleDegree) ? strings.srPolygonPointAngle({
       angle: angleDegree
@@ -33246,16 +33227,14 @@ const UnlimitedPolygonGraph = statefulProps => {
     })), sidesArray.map(({
       pointIndex,
       sideLength
-    }, j) => /*#__PURE__*/React.createElement("g", {
+    }, j) => /*#__PURE__*/React.createElement(SRDescInSVG, {
       key: `${id}-point-${i}-side-${j}`,
       id: `${id}-point-${i}-side-${j}`
     }, getPolygonSideString(sideLength, pointIndex, strings, locale))));
-  }), coords.length > 0 && /*#__PURE__*/React.createElement("g", {
-    id: polygonPointsNumId,
-    style: a11y.srOnly
-  }, srPolygonGraphPointsNum), srPolygonGraphPoints && /*#__PURE__*/React.createElement("g", {
-    id: polygonPointsId,
-    style: a11y.srOnly
+  }), coords.length > 0 && /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: polygonPointsNumId
+  }, srPolygonGraphPointsNum), srPolygonGraphPoints && /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: polygonPointsId
   }, srPolygonGraphPoints));
 };
 function getLines(points) {
@@ -33512,15 +33491,12 @@ function QuadraticGraph(props) {
       constrain: getQuadraticKeyboardConstraint(coords, snapStep, i),
       onMove: destination => dispatch(actions.quadratic.movePoint(i, destination))
     });
-  }), srQuadraticDirection && /*#__PURE__*/React.createElement("g", {
-    id: quadraticDirectionId,
-    style: a11y.srOnly
-  }, srQuadraticDirection), srQuadraticVertex && /*#__PURE__*/React.createElement("g", {
-    id: quadraticVertexId,
-    style: a11y.srOnly
-  }, srQuadraticVertex), /*#__PURE__*/React.createElement("g", {
-    id: quadraticInterceptsId,
-    style: a11y.srOnly
+  }), srQuadraticDirection && /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: quadraticDirectionId
+  }, srQuadraticDirection), srQuadraticVertex && /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: quadraticVertexId
+  }, srQuadraticVertex), /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: quadraticInterceptsId
   }, srQuadraticXIntercepts ? `${srQuadraticXIntercepts} ${srQuadraticYIntercept}` : `${srQuadraticYIntercept}`));
 }
 
@@ -33708,9 +33684,8 @@ const RayGraph = props => {
       start: false,
       end: true
     }
-  }), /*#__PURE__*/React.createElement("g", {
-    id: pointsDescriptionId,
-    style: a11y.srOnly
+  }), /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: pointsDescriptionId
   }, srRayPoints));
 };
 function getRayGraphDescription(state, i18n) {
@@ -33848,13 +33823,11 @@ const SegmentGraph = ({
         point2Y: srFormatNumber(segment[1][Y], locale)
       })
     }
-  }), /*#__PURE__*/React.createElement("g", {
-    id: lengthDescriptionId,
-    style: a11y.srOnly
+  }), /*#__PURE__*/React.createElement(SRDescInSVG, {
+    id: lengthDescriptionId
   }, strings.srSegmentLength({
     length: srFormatNumber(getLengthOfSegment(segment), locale)
-  })))), /*#__PURE__*/React.createElement("g", {
-    style: a11y.srOnly,
+  })))), /*#__PURE__*/React.createElement(SRDescInSVG, {
     id: wholeGraphDescriptionId
   }, getWholeSegmentGraphAriaDescription()));
 };
@@ -33953,7 +33926,7 @@ function SinusoidGraph(props) {
     sequenceNumber: i + 1,
     constrain: getSinusoidKeyboardConstraint(coords, snapStep, i),
     onMove: destination => dispatch(actions.sinusoid.movePoint(i, destination))
-  })), /*#__PURE__*/React.createElement("g", {
+  })), /*#__PURE__*/React.createElement(SRDescInSVG, {
     id: descriptionId
   }, srSinusoidDescription));
 }
@@ -34227,7 +34200,6 @@ const MafsGraph = props => {
     state,
     dispatch,
     labels,
-    labelLocation,
     readOnly,
     fullGraphAriaLabel,
     fullGraphAriaDescription
@@ -34308,7 +34280,6 @@ const MafsGraph = props => {
       width,
       height,
       labels,
-      labelLocation,
       disableKeyboardInteraction: disableInteraction,
       // If the graph is read-only or static, we want to make it
       // visually clear that the graph is no longer interactive.
@@ -41420,7 +41391,7 @@ const addLibraryVersionToPerseusDebug = (libraryName, libraryVersion) => {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "57.0.0";
+const libVersion = "57.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {