@khanacademy/perseus 57.0.0 → 57.0.1

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",
@@ -30197,6 +30197,7 @@ function useDraggable(args) {
       const {
         direction: yDownDirection,
         altKey,
+        ctrlKey,
         metaKey,
         shiftKey
       } = state;
@@ -30206,7 +30207,7 @@ function useDraggable(args) {
       if (altKey || metaKey) {
         divisions = 200;
       }
-      if (shiftKey) {
+      if (shiftKey && !ctrlKey) {
         divisions = 10;
       }
       const min = span / (divisions * 2);
@@ -30735,6 +30736,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 +30871,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 +31148,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 +31398,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 +31541,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 +33105,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 +33254,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 +33263,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 +33527,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 +33720,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 +33859,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 +33962,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));
 }
@@ -41420,7 +41429,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.0.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {