@khanacademy/perseus 53.0.0 → 53.1.0

package/dist/es/index.js

@@ -1,6 +1,6 @@
 import * as KAS from '@khanacademy/kas';
 import { MathInputI18nContext, CursorContext, getKeyTranslator, createMathField, getCursorContext, DesktopKeypad, convertDotToTimesByLocale, mathQuillInstance, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
-import { PerseusError, Errors, expressionLogic, getExpressionPublicWidgetOptions, getDecimalSeparator, approximateDeepEqual, pluck, CoreWidgetRegistry, getUpgradedWidgetOptions, mapObject, getNumericInputPublicWidgetOptions, passageRefLogic, radioLogic, getCategorizerPublicWidgetOptions, getCSProgramPublicWidgetOptions, getDropdownPublicWidgetOptions, GrapherUtil as GrapherUtil$1, lockedFigureColors, lockedFigureFillStyles, approximateEqual, getLabelImagePublicWidgetOptions, getMatrixSize, measurerLogic, getNumberLinePublicWidgetOptions, getOrdererPublicWidgetOptions, getSorterPublicWidgetOptions, addLibraryVersionToPerseusDebug, upgradeWidgetInfoToLatestVersion, getWidgetIdsFromContentByType } from '@khanacademy/perseus-core';
+import { PerseusError, Errors, expressionLogic, getExpressionPublicWidgetOptions, getDecimalSeparator, approximateDeepEqual, pluck, CoreWidgetRegistry, getUpgradedWidgetOptions, mapObject, getNumericInputPublicWidgetOptions, passageRefLogic, radioLogic, getRadioPublicWidgetOptions, getCategorizerPublicWidgetOptions, getCSProgramPublicWidgetOptions, getDropdownPublicWidgetOptions, GrapherUtil as GrapherUtil$1, getGrapherPublicWidgetOptions, getIFramePublicWidgetOptions, lockedFigureColors, lockedFigureFillStyles, approximateEqual, getInteractiveGraphPublicWidgetOptions, getLabelImagePublicWidgetOptions, getMatrixPublicWidgetOptions, getMatrixSize, measurerLogic, getNumberLinePublicWidgetOptions, getOrdererPublicWidgetOptions, getPlotterPublicWidgetOptions, getSorterPublicWidgetOptions, getTablePublicWidgetOptions, addLibraryVersionToPerseusDebug, upgradeWidgetInfoToLatestVersion, getWidgetIdsFromContentByType } from '@khanacademy/perseus-core';
 export { isFailure, isSuccess, parseAndMigratePerseusArticle, parseAndMigratePerseusItem, parsePerseusItem } from '@khanacademy/perseus-core';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule } from '@khanacademy/perseus-linter';
@@ -249,7 +249,7 @@ const mockStrings = {
     num,
     x,
     y
-  }) => `Point ${num} at ${x} comma ${y}`,
+  }) => `Point ${num} at ${x} comma ${y}.`,
   srInteractiveElements: ({
     elements
   }) => `Interactive elements: ${elements}`,
@@ -437,7 +437,32 @@ const mockStrings = {
     point2Y,
     point3X,
     point3Y
-  }) => `Parabola with points at ${point1X} comma ${point1Y}, ${point2X} comma ${point2Y}, and ${point3X} comma ${point3Y}.`
+  }) => `Parabola with points at ${point1X} comma ${point1Y}, ${point2X} comma ${point2Y}, and ${point3X} comma ${point3Y}.`,
+  srPolygonGraph: "A polygon.",
+  srPolygonGraphCoordinatePlane: "A polygon on a coordinate plane.",
+  srPolygonGraphPointsNum: ({
+    num
+  }) => `The polygon has ${num} points.`,
+  srPolygonGraphPointsOne: "The polygon has 1 point.",
+  srPolygonElementsNum: ({
+    num
+  }) => `A polygon with ${num} points.`,
+  srPolygonElementsOne: "A polygon with 1 point.",
+  srPolygonPointAngleApprox: ({
+    angle
+  }) => `Angle approximately equal to ${angle} degrees.`,
+  srPolygonPointAngle: ({
+    angle
+  }) => `Angle equal to ${angle} degrees.`,
+  srPolygonSideLength: ({
+    pointNum,
+    length
+  }) => `A line segment, length equal to ${length} units, connects to point ${pointNum}.`,
+  srPolygonSideLengthApprox: ({
+    pointNum,
+    length
+  }) => `A line segment, length approximately equal to ${length} units, connects to point ${pointNum}.`,
+  srUnlimitedPolygonEmpty: "An empty coordinate plane."
   // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -9838,7 +9863,7 @@ class WrappedLine extends WrappedDrawing {
 
 /* eslint-disable @babel/no-invalid-this */
 const {
-  clockwise: clockwise$3,
+  clockwise: clockwise$2,
   reverseVector: reverseVector$1
 } = geometry;
 function scaledDistanceFromAngle(angle) {
@@ -11076,7 +11101,7 @@ _.extend(GraphUtils.Graphie.prototype, {
       // Temporary objects
       _.invoke(polygon.temp, "remove");
       polygon.temp = [];
-      const isClockwise = clockwise$3(polygon.coords);
+      const isClockwise = clockwise$2(polygon.coords);
 
       // Update angle labels
       if (polygon.angleLabels.length || polygon.showRightAngleMarkers.length) {
@@ -14467,7 +14492,7 @@ function sum(array) {
     return memo + arg;
   }, 0);
 }
-function clockwise$2(points) {
+function clockwise$1(points) {
   const segments = _.zip(points, points.slice(1).concat(points.slice(0, 1)));
   const areas = _.map(segments, function (segment) {
     const p1 = segment[0];
@@ -14533,7 +14558,7 @@ const draw$1 = {
     const graphie = this.graphie;
     const self = this;
     const coords = _.invoke(state.points, "coord");
-    const isClockwise = clockwise$2(coords);
+    const isClockwise = clockwise$1(coords);
     const n = coords.length;
 
     // graphie.labelAngle and similar methods attempt to re-use the label
@@ -16270,9 +16295,29 @@ class Zoomable extends React.Component {
     if (!this._isMounted) {
       return;
     }
+
+    // When a zoomable item is contained within a collapsed parent (such as an Explanation widget),
+    //      the parent node has zero width, which causes the scale to be miscalculated.
+    // Therefore, we check to see if the node has a valid width, and if it doesn't,
+    //      then we traverse up the DOM tree and look for the closest "perseus-renderer"
+    //      (which should have a width).
+    // To be cautious, we also account for the possibility that we can't find any parents with a valid width
+    //      (not that they don't exist, just that we can't find them).
+    let parentNode = this._node;
+    let currentNode = parentNode;
+    while (currentNode && currentNode.offsetWidth === 0) {
+      var _currentNode$parentEl, _currentNode$parentEl2;
+      // When traversing up the DOM tree, we need to start at the "parentElement"
+      //      because "closest()" can match the current element,
+      //      and if it does so, then we are stuck in an infinite loop.
+      currentNode = (_currentNode$parentEl = (_currentNode$parentEl2 = currentNode.parentElement) == null ? void 0 : _currentNode$parentEl2.closest(".perseus-renderer")) != null ? _currentNode$parentEl : null;
+    }
+    if (currentNode) {
+      parentNode = currentNode;
+    }
     const parentBounds = {
-      width: this._node.offsetWidth,
-      height: this._node.offsetHeight
+      width: parentNode.offsetWidth,
+      height: parentNode.offsetHeight
     };
     const childBounds = this.props.computeChildBounds(this._node, parentBounds);
 
@@ -19292,7 +19337,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -23061,8 +23106,8 @@ const styles$s = StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
-    top: `0px`,
-    left: `0px`
+    top: `2px`,
+    left: `2px`
   }
 });
 
@@ -23089,43 +23134,6 @@ function ChoiceInner(props) {
   }
   return /*#__PURE__*/React.createElement(InlineIcon, iconMinus);
 }
-
-// Handle dynamic styling of the multiple choice icon. Most
-// MC icon styles are constant, but we do allow the caller
-// to specify the selected color, and thus must control styles
-// related to the selected state dynamically.
-function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct) {
-  let backgroundColor;
-  let borderColor;
-  let color$1;
-  if (!showCorrectness && pressed) {
-    borderColor = color.blue;
-    color$1 = color.blue;
-    backgroundColor = "transparent";
-  } else if (checked) {
-    const bg = showCorrectness && correct ? color.green : color.blue;
-    color$1 = white;
-    backgroundColor = bg;
-    borderColor = bg;
-  } else {
-    borderColor = color.offBlack64;
-    color$1 = color.offBlack64;
-  }
-
-  // define shape
-  let borderRadius;
-  if (multipleSelect) {
-    borderRadius = 3;
-  } else {
-    borderRadius = CHOICE_ICON_SIZE;
-  }
-  return {
-    backgroundColor,
-    borderColor,
-    color: color$1,
-    borderRadius
-  };
-}
 const ChoiceIcon = function ChoiceIcon(props) {
   const {
     checked,
@@ -23137,9 +23145,41 @@ const ChoiceIcon = function ChoiceIcon(props) {
     multipleSelect,
     pos,
     previouslyAnswered,
+    // Used in "review mode"/"show rationale" to show that option was previously chosen
     pressed
   } = props;
-  const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
+
+  // Accounts for incorrect choice still displaying as learner tries again
+  const choiceIsChecked = checked || showCorrectness && !correct && previouslyAnswered;
+
+  // Core styling
+  const choiceStyling = [styles$r.choiceBase, multipleSelect ? styles$r.multiSelectShape : styles$r.singleSelectShape, showCorrectness ? styles$r.choiceHasIcon : styles$r.choiceHasLetter, choiceIsChecked ? styles$r.choiceIsChecked : styles$r.choiceIsUnchecked];
+
+  // Color styling
+  // Handle dynamic styling of the multiple choice icon. Most
+  // MC icon styles are constant, but we do allow the caller
+  // to specify the selected color, and thus must control styles
+  // related to the selected state dynamically.
+  let crossOutColor;
+  if (showCorrectness && correct && checked) {
+    choiceStyling.push(styles$r.choiceCorrect);
+    crossOutColor = color.green;
+  } else if (showCorrectness && !correct && (checked || previouslyAnswered)) {
+    choiceStyling.push(styles$r.choiceIncorrect);
+    crossOutColor = color.red;
+  } else if (checked) {
+    // Show filled neutral blue color (showCorrectness is false)
+    choiceStyling.push(styles$r.choiceNeutral);
+    crossOutColor = color.blue;
+  } else if (pressed) {
+    // Show outlined neutral blue color (showCorrectness is false)
+    choiceStyling.push(styles$r.activeNeutral);
+    crossOutColor = color.blue;
+  } else {
+    // choice is not checked
+    choiceStyling.push(styles$r.uncheckedColors);
+    crossOutColor = color.offBlack64;
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: css(styles$t.iconWrapper)
   }, /*#__PURE__*/React.createElement(FocusRing, {
@@ -23147,9 +23187,8 @@ const ChoiceIcon = function ChoiceIcon(props) {
     visible: focused || hovered,
     multipleSelect: multipleSelect
   }, /*#__PURE__*/React.createElement("div", {
-    style: dynamicStyles,
     "data-testid": "choice-icon__library-choice-icon",
-    className: css(styles$r.circle, showCorrectness && correct && styles$r.circleCorrect, showCorrectness && !correct && styles$r.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$r.circleIncorrectAnswered)
+    className: css(...choiceStyling)
     // used in BaseRadio editMode to check
     // if we actually clicked on the radio icon
     ,
@@ -23161,7 +23200,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
     showCorrectness: showCorrectness,
     correct: correct
   })))), crossedOut && /*#__PURE__*/React.createElement(CrossOutLine, {
-    color: dynamicStyles.borderColor
+    color: crossOutColor
   }));
 };
 const styles$r = StyleSheet.create({
@@ -23173,8 +23212,7 @@ const styles$r = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  circle: {
-    // Make the circle
+  choiceBase: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
     boxSizing: "border-box",
@@ -23186,30 +23224,48 @@ const styles$r = StyleSheet.create({
     // "bold font family" so that characters which fall back to the default
     // font get bolded too.
     fontWeight: "bold",
-    fontSize: 12,
     // Center the icon wrapper.
     display: "flex",
     alignItems: "center",
-    justifyContent: "center",
-    // HACK(emily): I don't know why adding this line height makes the text
-    // appear centered better than any other value, but it does. In
-    // particular, at large zoom levels this line height does almost
-    // nothing, but at the default size this shifts the letter down one
-    // pixel so it is much better centered.
-    lineHeight: "1px"
-  },
-  circleCorrect: {
+    justifyContent: "center"
+  },
+  choiceHasLetter: {
+    fontSize: 12
+  },
+  choiceHasIcon: {
     fontSize: CHOICE_ICON_SIZE
   },
-  circleIncorrect: {
-    fontSize: CHOICE_ICON_SIZE,
-    borderColor: gray68,
-    color: gray68
+  choiceIsChecked: {
+    color: color.white
+  },
+  choiceIsUnchecked: {
+    color: color.offBlack64
   },
-  circleIncorrectAnswered: {
+  choiceCorrect: {
+    backgroundColor: color.green,
+    borderColor: color.green
+  },
+  choiceIncorrect: {
     backgroundColor: color.red,
-    borderColor: color.red,
-    color: color.white
+    borderColor: color.red
+  },
+  choiceNeutral: {
+    backgroundColor: color.blue,
+    borderColor: color.blue
+  },
+  activeNeutral: {
+    color: color.blue,
+    borderColor: color.blue,
+    backgroundColor: "transparent"
+  },
+  multiSelectShape: {
+    borderRadius: 3
+  },
+  singleSelectShape: {
+    borderRadius: CHOICE_ICON_SIZE
+  },
+  uncheckedColors: {
+    borderColor: color.offBlack64
   }
 });
 
@@ -24335,7 +24391,8 @@ var Radio = {
   staticTransform: transform,
   version: radioLogic.version,
   propUpgrades: radioLogic.widgetOptionsUpgrades,
-  isLintable: true
+  isLintable: true,
+  getPublicWidgetOptions: getRadioPublicWidgetOptions
 };
 
 /* eslint-disable import/no-named-as-default */
@@ -26522,7 +26579,8 @@ var Grapher$1 = {
   hidden: true,
   widget: Grapher,
   transform: propTransform$2,
-  staticTransform: staticTransform$4
+  staticTransform: staticTransform$4,
+  getPublicWidgetOptions: getGrapherPublicWidgetOptions
 };
 
 const getPromptJSON$f = rendererJSON => {
@@ -26827,7 +26885,8 @@ var Iframe$1 = {
   displayName: "Iframe (deprecated)",
   widget: Iframe,
   // Let's not expose it to all content creators yet
-  hidden: true
+  hidden: true,
+  getPublicWidgetOptions: getIFramePublicWidgetOptions
 };
 
 const getPromptJSON$d = renderProps => {
@@ -29534,10 +29593,10 @@ function Vector(props) {
   }));
 }
 
-function srFormatNumber(a, locale) {
+function srFormatNumber(a, locale, maximumFractionDigits) {
   // adding zero here converts negative zero to positive zero.
   return (0 + a).toLocaleString(locale, {
-    maximumFractionDigits: 3,
+    maximumFractionDigits: maximumFractionDigits != null ? maximumFractionDigits : 3,
     useGrouping: false // no thousands separators
   });
 }
@@ -29713,6 +29772,95 @@ a, b, c) {
   return [x1, x2];
 }
 
+/**
+ * Given a list of points, return the angle made by the point at index i
+ * with the points at indices i - 1 and i + 1.
+ */
+function getAngleFromPoints(points, i) {
+  // Make sure the index is valid.
+  if (i < 0 || i >= points.length || !Number.isInteger(i)) {
+    return null;
+  }
+
+  // If there are fewer than 3 points, there is no angle.
+  if (points.length < 3) {
+    return null;
+  }
+
+  // Get the points at the current index and the two adjacent points.
+  const point = points.at(i);
+  const pt1 = points.at(i - 1);
+  const pt2 = points[(i + 1) % points.length];
+  if (!point || !pt1 || !pt2) {
+    return null;
+  }
+
+  // Get the lengths of adjacent sides, making a triangle
+  // we can use to calculate the angle.
+  const a = vec.dist(point, pt1);
+  const b = vec.dist(point, pt2);
+  const c = vec.dist(pt1, pt2);
+
+  // Law of cosines
+  const angle = Math.acos((a ** 2 + b ** 2 - c ** 2) / (2 * a * b));
+  return angle;
+}
+function getSideLengthsFromPoints(points, i, isPolygonOpen) {
+  if (i < 0 || i >= points.length || !Number.isInteger(i)) {
+    return [];
+  }
+  if (points.length < 2) {
+    return [];
+  }
+  const returnArray = [];
+  const point = points[i];
+  // If this point is the first point, then side 1 is the
+  // last point in the list.
+  const point1Index = i === 0 ? points.length - 1 : i - 1;
+  const point1 = points[point1Index];
+  // Make sure the previous point is not the same
+  // as the current point.
+  const side1 = i !== point1Index ? vec.dist(point, point1) : null;
+  // The first side of the first point does not exist if
+  // the polygon is open.
+  if (side1 && !(isPolygonOpen && i === 0)) {
+    returnArray.push({
+      pointIndex: point1Index,
+      sideLength: side1
+    });
+  }
+
+  // See if there is a side 2.
+  const point2Index = (i + 1) % points.length;
+  const point2 = points[point2Index];
+  // Make sure that the next point is not the same as the
+  // current point, and don't repeat the first point.
+  const side2 = i !== point2Index && point2Index !== point1Index ? vec.dist(point, point2) : null;
+  // The second side of the last point does not exist if
+  // the polygon is open.
+  if (side2 && !(isPolygonOpen && i === points.length - 1)) {
+    returnArray.push({
+      pointIndex: point2Index,
+      sideLength: side2
+    });
+  }
+  return returnArray;
+}
+
+/**
+ * Determine whether to determine the string with the
+ * exact side length or the approximate side length.
+ */
+function getPolygonSideString(sideLength, pointIndex, strings, locale) {
+  return Number.isInteger(sideLength) ? strings.srPolygonSideLength({
+    pointNum: pointIndex + 1,
+    length: `${sideLength}`
+  }) : strings.srPolygonSideLengthApprox({
+    pointNum: pointIndex + 1,
+    length: srFormatNumber(sideLength, locale, 1)
+  });
+}
+
 const {
   calculateAngleInDegrees: calculateAngleInDegrees$2
 } = angles;
@@ -30158,7 +30306,7 @@ const SvgDefs = () => /*#__PURE__*/React__default.createElement("defs", null, /*
 })));
 
 const {
-  clockwise: clockwise$1
+  clockwise
 } = geometry;
 const {
   getAngleFromVertex: getAngleFromVertex$1
@@ -30172,7 +30320,7 @@ const PolygonAngle = ({
   snapTo
 }) => {
   const [centerX, centerY] = centerPoint;
-  const areClockwise = clockwise$1([centerPoint, ...endPoints]);
+  const areClockwise = clockwise([centerPoint, ...endPoints]);
   const [[startX, startY], [endX, endY]] = areClockwise ? endPoints : endPoints.reverse();
   const radius = 0.3;
   const a = vec.dist(centerPoint, endPoints[0]);
@@ -30244,7 +30392,7 @@ const Angle = ({
   range
 }) => {
   // Check if the points are clockwise or not, depending on whether we allow reflex angles
-  const areClockwise = clockwise$1([...coords, vertex]);
+  const areClockwise = clockwise([...coords, vertex]);
   const shouldReverseCoords = areClockwise && !allowReflexAngles;
 
   // Reverse the coordinates accordingly to ensure the angle is calculated correctly
@@ -31177,9 +31325,6 @@ function getAngleSideConstraint(sidePoint, vertex, snapDegrees) {
   };
 }
 
-const {
-  clockwise
-} = geometry;
 function getGradableGraph(state, initialGraph) {
   if (!state.hasBeenInteractedWith) {
     return _extends({}, initialGraph);
@@ -31243,16 +31388,8 @@ function getGradableGraph(state, initialGraph) {
     });
   }
   if (state.type === "angle" && initialGraph.type === "angle") {
-    // We're going to reverse the coords for scoring if the angle is clockwise and
-    // we don't allow reflex angles. This is because the angle is largely defined
-    // by the order of the points in the coords array, and we want to maintain
-    // the same angle scoring with the legacy graph (which had a bug).
-    // (LEMS-2190): When we remove the legacy graph, move this logic to the scoring function.
-    const areClockwise = clockwise([state.coords[0], state.coords[2], state.coords[1]]);
-    const shouldReverseCoords = areClockwise && !state.allowReflexAngles;
-    const coords = shouldReverseCoords ? state.coords.slice().reverse() : state.coords;
     return _extends({}, initialGraph, {
-      coords,
+      coords: state.coords,
       allowReflexAngles: state.allowReflexAngles
     });
   }
@@ -31891,17 +32028,20 @@ function describePointGraph(state, i18n) {
     y: srFormatNumber(y, locale)
   }));
   return strings.srInteractiveElements({
-    elements: pointDescriptions.join(", ")
+    elements: pointDescriptions.join(" ")
   });
 }
 
-function renderPolygonGraph(state, dispatch) {
+const {
+  convertRadiansToDegrees
+} = angles;
+function renderPolygonGraph(state, dispatch, i18n, markings) {
   return {
     graph: /*#__PURE__*/React.createElement(PolygonGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: null
+    interactiveElementsDescription: getPolygonGraphDescription(state, i18n, markings)
   };
 }
 const PolygonGraph = props => {
@@ -31986,7 +32126,7 @@ const PolygonGraph = props => {
     focusVisible,
     setFocusVisible
   });
-  return numSides === "unlimited" ? UnlimitedPolygonGraph(statefulProps) : LimitedPolygonGraph(statefulProps);
+  return numSides === "unlimited" ? /*#__PURE__*/React.createElement(UnlimitedPolygonGraph, statefulProps) : /*#__PURE__*/React.createElement(LimitedPolygonGraph, statefulProps);
 };
 const LimitedPolygonGraph = statefulProps => {
   const {
@@ -32011,8 +32151,39 @@ const LimitedPolygonGraph = statefulProps => {
   const {
     disableKeyboardInteraction
   } = graphConfig;
+  const {
+    strings,
+    locale
+  } = usePerseusI18n();
+  const id = React.useId();
+  const pointsOffArray = Array(points.length).fill("off");
+  // When moving an element, set its aria-live to "polite" and the others
+  // to "off". Otherwise, other connected elements that move at the same
+  // time might override the currently focused element's aria live.
+  const [ariaLives, setAriaLives] = React.useState([
+  // First one represents the aria-live value for the polygon itself.
+  "off",
+  // The rest represent the points.
+  ...pointsOffArray]);
   const lines = getLines(points);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Polygon, {
+  const polygonPointsNumId = id + "-points-num";
+  const polygonPointsId = id + "-points";
+
+  // Aria label srings
+  const {
+    srPolygonGraph,
+    srPolygonGraphPointsNum,
+    srPolygonGraphPoints,
+    srPolygonElementsNum
+  } = describePolygonGraph(statefulProps.graphState, {
+    strings,
+    locale
+  }, statefulProps.graphConfig.markings);
+  return /*#__PURE__*/React.createElement("g", {
+    // Outer graph minimal description
+    "aria-label": srPolygonGraph,
+    "aria-describedby": `${polygonPointsNumId} ${polygonPointsId}`
+  }, /*#__PURE__*/React.createElement(Polygon, {
     points: [...points],
     color: "var(--movable-line-stroke-color)",
     svgPolygonProps: {
@@ -32037,13 +32208,17 @@ const LimitedPolygonGraph = statefulProps => {
       snapTo: snapTo
     });
   }), showSides && lines.map(([start, end], i) => {
+    // Use x and y to find the position of the label
     const [x, y] = vec.midpoint(start, end);
-    const length = parseFloat(vec.dist(start, end).toFixed(snapTo === "sides" ? 0 : 1));
+    const length = vec.dist(start, end);
+    // Check if the length needs to indicate
+    // that it's an approximation.
+    const isApprox = !Number.isInteger(length);
     return /*#__PURE__*/React.createElement(TextLabel, {
       key: "side-" + i,
       x: x,
       y: y
-    }, !Number.isInteger(length) && "≈ ", length);
+    }, isApprox ? `≈ ${length.toFixed(snapTo === "sides" ? 0 : 1)}` : length);
   }), /*#__PURE__*/React.createElement(Polygon, {
     points: [...points],
     color: "transparent",
@@ -32063,27 +32238,80 @@ const LimitedPolygonGraph = statefulProps => {
         setFocusVisible(hasFocusVisible(polygonRef.current));
       },
       // Required for lines to darken on focus
-      onFocus: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
+      onFocus: () => {
+        setFocusVisible(hasFocusVisible(polygonRef.current));
+        setAriaLives(() => ["polite", ...pointsOffArray]);
+      },
       // Required for line weighting to update on blur. Without this,
       // the user has to hover over the shape for it to update
       onBlur: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
-      className: "movable-polygon"
-    }
-  }), points.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
-    key: "point-" + i,
-    constrain: constrain,
-    point: point,
-    sequenceNumber: i + 1,
-    onMove: destination => {
-      const now = Date.now();
-      const targetFPS = 40;
-      const moveThresholdTime = 1000 / targetFPS;
-      if (now - lastMoveTimeRef.current > moveThresholdTime) {
-        dispatch(actions.polygon.movePoint(i, destination));
-        lastMoveTimeRef.current = now;
-      }
+      className: "movable-polygon",
+      // Accessibility-related fields
+      role: "button",
+      "aria-label": srPolygonGraphPoints ? `${srPolygonElementsNum} ${srPolygonGraphPoints}` : srPolygonElementsNum,
+      "aria-live": ariaLives[0]
     }
-  })));
+  }), points.map((point, i) => {
+    const angleId = `${id}-angle-${i}`;
+    const side1Id = `${id}-point-${i}-side-1`;
+    const side2Id = `${id}-point-${i}-side-2`;
+
+    // Limited polygons always have an angle at each vertex.
+    const angle = getAngleFromPoints(points, i);
+    const angleDegree = angle ? convertRadiansToDegrees(angle) : null;
+
+    // Limited polygons always two sides attached to each vertex.
+    const sidesArray = getSideLengthsFromPoints(points, i);
+    const {
+      pointIndex: point1Index,
+      sideLength: side1Length
+    } = sidesArray[0];
+    const {
+      pointIndex: point2Index,
+      sideLength: side2Length
+    } = sidesArray[1];
+    return /*#__PURE__*/React.createElement("g", {
+      key: "point-" + i
+    }, /*#__PURE__*/React.createElement(MovablePoint$1, {
+      ariaDescribedBy: `${angleId} ${side1Id} ${side2Id}`,
+      ariaLive: ariaLives[i + 1],
+      constrain: constrain,
+      point: point,
+      sequenceNumber: i + 1,
+      onMove: destination => {
+        const now = Date.now();
+        const targetFPS = 40;
+        const moveThresholdTime = 1000 / targetFPS;
+        if (now - lastMoveTimeRef.current > moveThresholdTime) {
+          dispatch(actions.polygon.movePoint(i, destination));
+          lastMoveTimeRef.current = now;
+        }
+      },
+      onFocus: () => {
+        const newPointAriaLives = [...pointsOffArray];
+        newPointAriaLives[i] = "polite";
+        // Whole polygon is "off", and the current
+        // point is "polite".
+        setAriaLives(["off", ...newPointAriaLives]);
+      }
+    }), angleDegree && /*#__PURE__*/React.createElement("g", {
+      id: angleId
+    }, Number.isInteger(angleDegree) ? strings.srPolygonPointAngle({
+      angle: angleDegree
+    }) : strings.srPolygonPointAngleApprox({
+      angle: srFormatNumber(angleDegree, locale, 1)
+    })), /*#__PURE__*/React.createElement("g", {
+      id: side1Id
+    }, getPolygonSideString(side1Length, point1Index, strings, locale)), /*#__PURE__*/React.createElement("g", {
+      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
+  }, srPolygonGraphPoints));
 };
 const UnlimitedPolygonGraph = statefulProps => {
   const {
@@ -32098,6 +32326,19 @@ const UnlimitedPolygonGraph = statefulProps => {
     coords,
     closedPolygon
   } = statefulProps.graphState;
+  const {
+    strings,
+    locale
+  } = usePerseusI18n();
+  const id = React.useId();
+  const polygonPointsNumId = id + "-points-num";
+  const polygonPointsId = id + "-points";
+
+  // When moving an element, set its aria-live to "polite" and the others
+  // to "off". Otherwise, other connected elements that move at the same
+  // time might override the currently focused element's aria live.
+  const pointsOffArray = Array(points.length).fill("off");
+  const [ariaLives, setAriaLives] = React.useState(pointsOffArray);
 
   // If the polygon is closed, return a LimitedPolygon component.
   if (closedPolygon) {
@@ -32111,7 +32352,22 @@ const UnlimitedPolygonGraph = statefulProps => {
   } = graphConfig;
   const widthPx = graphDimensionsInPixels[0];
   const heightPx = graphDimensionsInPixels[1];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Polyline, {
+
+  // Aria label srings
+  const emptyGraph = coords.length === 0;
+  const {
+    srPolygonGraph,
+    srPolygonGraphPointsNum,
+    srPolygonGraphPoints
+  } = describePolygonGraph(statefulProps.graphState, {
+    strings,
+    locale
+  }, statefulProps.graphConfig.markings);
+  return /*#__PURE__*/React.createElement("g", {
+    // Outer graph minimal description
+    "aria-label": emptyGraph ? strings.srUnlimitedPolygonEmpty : srPolygonGraph,
+    "aria-describedby": `${polygonPointsNumId} ${polygonPointsId}`
+  }, /*#__PURE__*/React.createElement(Polyline, {
     points: [...points],
     color: "var(--movable-line-stroke-color)",
     svgPolylineProps: {
@@ -32136,28 +32392,68 @@ const UnlimitedPolygonGraph = statefulProps => {
       const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
       dispatch(actions.polygon.addPoint(graphCoordinates[0]));
     }
-  }), coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
-    key: i,
-    point: point,
-    sequenceNumber: i + 1,
-    onMove: destination => dispatch(actions.polygon.movePoint(i, destination)),
-    ref: ref => {
-      pointsRef.current[i] = ref;
-    },
-    onFocus: () => {
-      dispatch(actions.polygon.focusPoint(i));
-    },
-    onClick: () => {
-      // If the point being clicked is the first point and
-      // there's enough non-duplicated points to form
-      // a polygon (3 or more), close the shape before
-      // setting focus.
-      if (i === 0 && getArrayWithoutDuplicates(coords).length >= 3) {
-        dispatch(actions.polygon.closePolygon());
-      }
-      dispatch(actions.polygon.clickPoint(i));
+  }), coords.map((point, i) => {
+    const angleId = `${id}-angle-${i}`;
+    let sideIds = "";
+
+    // This point only has an angle if it's not the first
+    // or last point in this open polygon.
+    const hasAngle = i > 0 && i < coords.length - 1;
+    const angle = hasAngle ? getAngleFromPoints(points, i) : null;
+    const angleDegree = angle ? convertRadiansToDegrees(angle) : null;
+    const sidesArray = getSideLengthsFromPoints(points, i, true);
+    for (let sideIndex = 0; sideIndex < sidesArray.length; sideIndex++) {
+      sideIds += `${id}-point-${i}-side-${sideIndex} `;
     }
-  })));
+    return /*#__PURE__*/React.createElement("g", {
+      key: "point-" + i
+    }, /*#__PURE__*/React.createElement(MovablePoint$1, {
+      ariaDescribedBy: `${angleId} ${sideIds}`,
+      ariaLive: ariaLives[i],
+      point: point,
+      sequenceNumber: i + 1,
+      onMove: destination => dispatch(actions.polygon.movePoint(i, destination)),
+      ref: ref => {
+        pointsRef.current[i] = ref;
+      },
+      onFocus: () => {
+        dispatch(actions.polygon.focusPoint(i));
+        const newPointAriaLives = [...pointsOffArray];
+        newPointAriaLives[i] = "polite";
+        // Whole polygon is "off", and the current
+        // point is "polite".
+        setAriaLives([...newPointAriaLives]);
+      },
+      onClick: () => {
+        // If the point being clicked is the first point and
+        // there's enough non-duplicated points to form
+        // a polygon (3 or more), close the shape before
+        // setting focus.
+        if (i === 0 && getArrayWithoutDuplicates(coords).length >= 3) {
+          dispatch(actions.polygon.closePolygon());
+        }
+        dispatch(actions.polygon.clickPoint(i));
+      }
+    }), angleDegree && /*#__PURE__*/React.createElement("g", {
+      id: angleId
+    }, Number.isInteger(angleDegree) ? strings.srPolygonPointAngle({
+      angle: angleDegree
+    }) : strings.srPolygonPointAngleApprox({
+      angle: srFormatNumber(angleDegree, locale, 1)
+    })), sidesArray.map(({
+      pointIndex,
+      sideLength
+    }, j) => /*#__PURE__*/React.createElement("g", {
+      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
+  }, srPolygonGraphPoints));
 };
 function getLines(points) {
   return points.map((point, i) => {
@@ -32179,6 +32475,54 @@ const hasFocusVisible = element => {
     return matches(":focus");
   }
 };
+function getPolygonGraphDescription(state, i18n, markings) {
+  const strings = describePolygonGraph(state, i18n, markings);
+  return strings.srPolygonInteractiveElements;
+}
+function describePolygonGraph(state, i18n, markings) {
+  const {
+    strings,
+    locale
+  } = i18n;
+  const {
+    coords
+  } = state;
+  const isCoordinatePlane = markings === "axes" || markings === "graph";
+  const hasOnePoint = coords.length === 1;
+
+  // Figure out graph aria label based on markings.
+  const srPolygonGraph = isCoordinatePlane ? strings.srPolygonGraphCoordinatePlane : strings.srPolygonGraph;
+  const srPolygonGraphPointsNum = hasOnePoint ? strings.srPolygonGraphPointsOne : strings.srPolygonGraphPointsNum({
+    num: coords.length
+  });
+  let srPolygonGraphPoints;
+  // Figure out graph description based on markings.
+  // If the graph is not on a coordinate plane, we should not include
+  // the points' coordinates in the description.
+  if (isCoordinatePlane) {
+    const pointsString = coords.map((coord, i) => {
+      return strings.srPointAtCoordinates({
+        num: i + 1,
+        x: srFormatNumber(coord[0], locale),
+        y: srFormatNumber(coord[1], locale)
+      });
+    });
+    srPolygonGraphPoints = pointsString.join(" ");
+  }
+  const srPolygonElementsNum = hasOnePoint ? strings.srPolygonElementsOne : strings.srPolygonElementsNum({
+    num: coords.length
+  });
+  const srPolygonInteractiveElements = coords.length > 0 ? strings.srInteractiveElements({
+    elements: [srPolygonElementsNum, srPolygonGraphPoints].join(" ")
+  }) : null;
+  return {
+    srPolygonGraph,
+    srPolygonGraphPointsNum,
+    srPolygonGraphPoints,
+    srPolygonElementsNum,
+    srPolygonInteractiveElements
+  };
+}
 
 function renderQuadraticGraph(state, dispatch, i18n) {
   return {
@@ -32878,7 +33222,8 @@ const MafsGraph = props => {
   } = renderGraphElements({
     state,
     dispatch,
-    i18n
+    i18n,
+    markings: props.markings
   });
   return /*#__PURE__*/React.createElement(GraphConfigContext.Provider, {
     value: {
@@ -32913,7 +33258,7 @@ const MafsGraph = props => {
       handleKeyboardEvent(event, state, dispatch);
     },
     "aria-label": fullGraphAriaLabel,
-    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId, isUnlimitedGraphState(state) && "unlimited-graph-keyboard-prompt"),
+    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId, isUnlimitedGraphState(state) && unlimitedGraphKeyboardPromptId),
     ref: graphRef,
     tabIndex: 0,
     onFocus: event => {
@@ -32939,7 +33284,19 @@ const MafsGraph = props => {
       bottom: 0,
       left: 0
     }
-  }, (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisLabels, null)), /*#__PURE__*/React.createElement(Mafs, {
+  }, (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisLabels, null)), /*#__PURE__*/React.createElement(View
+  // If we have locked figures, we set aria-hidden
+  // to false so that screen readers can read the
+  // locked figures. If we don't have any locked
+  // figures, we need to set aria-hidden to true so
+  // that screen readers don't read this Mafs element
+  // as an empty image.
+  // Note: Adding this in a wrapping View element
+  // so that `aria-hidden` is a valid property.
+  // It does not work on `Mafs` or svg elements.
+  , {
+    "aria-hidden": props.lockedFigures && props.lockedFigures.length > 0 ? false : true
+  }, /*#__PURE__*/React.createElement(Mafs, {
     preserveAspectRatio: false,
     viewBox: {
       x: state.range[X],
@@ -32959,10 +33316,10 @@ const MafsGraph = props => {
     height: height
   })),
   // Only render the axis ticks and arrows if the markings are set to a full "graph"
-  (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisTicks, null), /*#__PURE__*/React.createElement(AxisArrows, null)), /*#__PURE__*/React.createElement("svg", nestedSVGAttributes, props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
+  (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisTicks, null), /*#__PURE__*/React.createElement(AxisArrows, null)), props.lockedFigures && props.lockedFigures.length > 0 && /*#__PURE__*/React.createElement("svg", nestedSVGAttributes, /*#__PURE__*/React.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures,
     range: state.range
-  }))), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLabelsLayer, {
+  })))), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLabelsLayer, {
     lockedFigures: props.lockedFigures
   }), /*#__PURE__*/React.createElement(View, {
     style: {
@@ -33257,7 +33614,8 @@ const renderGraphElements = props => {
   const {
     state,
     dispatch,
-    i18n
+    i18n,
+    markings
   } = props;
   const {
     type
@@ -33274,7 +33632,7 @@ const renderGraphElements = props => {
     case "ray":
       return renderRayGraph(state, dispatch);
     case "polygon":
-      return renderPolygonGraph(state, dispatch);
+      return renderPolygonGraph(state, dispatch, i18n, markings);
     case "point":
       return renderPointGraph(state, dispatch);
     case "circle":
@@ -35911,26 +36269,17 @@ class InteractiveGraph extends React.Component {
   }
   render() {
     var _this$props$apiOption;
-    // Mafs shim
-    const mafsFlags = (_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null ? void 0 : _this$props$apiOption["mafs"];
-    if (shouldUseMafs(mafsFlags, this.props.graph)) {
-      var _this$props$apiOption2, _this$props$apiOption3;
-      const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
-      const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
-      const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
-      return /*#__PURE__*/React.createElement(StatefulMafsGraph, _extends({}, this.props, {
-        flags: (_this$props$apiOption2 = this.props.apiOptions) == null ? void 0 : _this$props$apiOption2.flags,
-        ref: this.mafsRef,
-        gridStep: gridStep,
-        snapStep: snapStep,
-        box: box,
-        showTooltips: !!this.props.showTooltips,
-        readOnly: (_this$props$apiOption3 = this.props.apiOptions) == null ? void 0 : _this$props$apiOption3.readOnly
-      }));
-    }
-    return /*#__PURE__*/React.createElement(LegacyInteractiveGraph, _extends({
-      ref: this.legacyGraphRef
-    }, this.props));
+    const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
+    const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
+    const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
+    return /*#__PURE__*/React.createElement(StatefulMafsGraph, _extends({}, this.props, {
+      ref: this.mafsRef,
+      gridStep: gridStep,
+      snapStep: snapStep,
+      box: box,
+      showTooltips: !!this.props.showTooltips,
+      readOnly: (_this$props$apiOption = this.props.apiOptions) == null ? void 0 : _this$props$apiOption.readOnly
+    }));
   }
 
   /**
@@ -36246,7 +36595,7 @@ class InteractiveGraph extends React.Component {
   }
 }
 
-// exported for testing
+// We don't need to change any of the original props for static mode
 InteractiveGraph.defaultProps = {
   labels: ["x", "y"],
   range: [[-10, 10], [-10, 10]],
@@ -36259,34 +36608,13 @@ InteractiveGraph.defaultProps = {
     type: "linear"
   }
 };
-function shouldUseMafs(mafsFlags, graph) {
-  if (typeof mafsFlags === "boolean" || typeof mafsFlags === "undefined") {
-    return false;
-  }
-  switch (graph.type) {
-    case "none":
-      return true;
-    case "point":
-      if (graph.numPoints === UNLIMITED) {
-        return Boolean(mafsFlags["unlimited-point"]);
-      }
-      return Boolean(mafsFlags["point"]);
-    case "polygon":
-      if (graph.numSides === UNLIMITED) {
-        return Boolean(mafsFlags["unlimited-polygon"]);
-      }
-      return Boolean(mafsFlags["polygon"]);
-    default:
-      return Boolean(mafsFlags[graph.type]);
-  }
-}
-// We don't need to change any of the original props for static mode
 const staticTransform$3 = _.identity;
 var InteractiveGraph$1 = {
   name: "interactive-graph",
   displayName: "Interactive graph (Assessments only)",
   widget: InteractiveGraph,
-  staticTransform: staticTransform$3
+  staticTransform: staticTransform$3,
+  getPublicWidgetOptions: getInteractiveGraphPublicWidgetOptions
 };
 
 // TODO: can we use WB typography?
@@ -38566,7 +38894,8 @@ var Matrix$1 = {
   widget: Matrix,
   transform: propTransform$1,
   staticTransform: staticTransform$2,
-  isLintable: true
+  isLintable: true,
+  getPublicWidgetOptions: getMatrixPublicWidgetOptions
 };
 
 const getPromptJSON$7 = () => {
@@ -41761,7 +42090,8 @@ var Plotter$1 = {
   displayName: "Plotter",
   hidden: true,
   widget: Plotter,
-  staticTransform: staticTransform
+  staticTransform: staticTransform,
+  getPublicWidgetOptions: getPlotterPublicWidgetOptions
 };
 
 const getPromptJSON$2 = () => {
@@ -42143,7 +42473,8 @@ var Table$1 = {
   widget: Table,
   transform: propTransform,
   hidden: true,
-  isLintable: true
+  isLintable: true,
+  getPublicWidgetOptions: getTablePublicWidgetOptions
 };
 
 const getPromptJSON = () => {
@@ -42322,7 +42653,7 @@ const init = function init() {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "53.0.0";
+const libVersion = "53.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {