@khanacademy/perseus 49.0.1 → 49.0.3

package/dist/index.js

@@ -365,11 +365,11 @@ const mockStrings = {
   tan: "tan",
   simulationLoadFail: "Sorry, this simulation cannot load.",
   simulationLocaleWarning: "Sorry, this simulation isn't available in your language.",
-  addPoint: "Add Point",
-  removePoint: "Remove Point",
-  graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
   selectAnAnswer: "Select an answer",
   // The following strings are used for interactive graph SR descriptions.
+  graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
+  addPoint: "Add Point",
+  removePoint: "Remove Point",
   closePolygon: "Close shape",
   openPolygon: "Re-open shape",
   srPointAtCoordinates: _ref27 => {
@@ -387,28 +387,28 @@ const mockStrings = {
     return `Interactive elements: ${elements}`;
   },
   srNoInteractiveElements: "No interactive elements",
-  circleGraphAriaLabel: "A circle on a coordinate plane.",
-  circleShapeAriaLabel: _ref29 => {
+  srCircleGraph: "A circle on a coordinate plane.",
+  srCircleShape: _ref29 => {
     let {
       centerX,
       centerY
     } = _ref29;
     return `Circle. The center point is at ${centerX} comma ${centerY}.`;
   },
-  circleRadiusPointAriaLabel: _ref30 => {
+  srCircleRadiusPoint: _ref30 => {
     let {
       radiusPointX,
       radiusPointY
     } = _ref30;
     return `Radius point at ${radiusPointX} comma ${radiusPointY}.`;
   },
-  circleRadiusDescription: _ref31 => {
+  srCircleRadius: _ref31 => {
     let {
       radius
     } = _ref31;
     return `Circle radius is ${radius}.`;
   },
-  circleOuterPointsDescription: _ref32 => {
+  srCircleOuterPoints: _ref32 => {
     let {
       point1X,
       point1Y,
@@ -420,7 +420,41 @@ const mockStrings = {
       point4Y
     } = _ref32;
     return `Points on the circle at ${point1X} comma ${point1Y}, ${point2X} comma ${point2Y}, ${point3X} comma ${point3Y}, ${point4X} comma ${point4Y}.`;
-  }
+  },
+  srLinearGraph: "A line on a coordinate plane.",
+  srLinearGraphPoints: _ref33 => {
+    let {
+      point1X,
+      point1Y,
+      point2X,
+      point2Y
+    } = _ref33;
+    return `The line has two points, point 1 at ${point1X} comma ${point1Y} and point 2 at ${point2X} comma ${point2Y}.`;
+  },
+  srLinearGraphSlopeIncreasing: "Its slope increases from left to right.",
+  srLinearGraphSlopeDecreasing: "Its slope decreases from left to right.",
+  srLinearGraphSlopeHorizontal: "Its slope is zero.",
+  srLinearGraphSlopeVertical: "Its slope is undefined.",
+  srLinearGraphXOnlyIntercept: _ref34 => {
+    let {
+      xIntercept
+    } = _ref34;
+    return `The line crosses the X-axis at ${xIntercept} comma 0.`;
+  },
+  srLinearGraphYOnlyIntercept: _ref35 => {
+    let {
+      yIntercept
+    } = _ref35;
+    return `The line crosses the Y-axis at 0 comma ${yIntercept}.`;
+  },
+  srLinearGraphBothIntercepts: _ref36 => {
+    let {
+      xIntercept,
+      yIntercept
+    } = _ref36;
+    return `The line crosses the X-axis at ${xIntercept} comma 0 and the Y-axis at 0 comma ${yIntercept}.`;
+  },
+  srLinearGraphOriginIntercept: "The line crosses the x and y axes at the graph's origin."
   // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -27629,11 +27663,21 @@ class Dropdown extends React__namespace.Component {
       key: "placeholder",
       value: "0",
       disabled: true,
-      label: this.props.placeholder || " "
+      label: /*#__PURE__*/React__namespace.createElement(Renderer, {
+        content: this.props.placeholder,
+        strings: this.context.strings,
+        inline: true
+      }),
+      labelAsText: this.props.placeholder
     }), ...this.props.choices.map((choice, i) => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       key: String(i + 1),
       value: String(i + 1),
-      label: choice
+      label: /*#__PURE__*/React__namespace.createElement(Renderer, {
+        content: choice,
+        strings: this.context.strings,
+        inline: true
+      }),
+      labelAsText: choice
     }))];
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.Id, null, dropdownId => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View
     // NOTE(jared): These are required to prevent weird behavior
@@ -27660,7 +27704,8 @@ class Dropdown extends React__namespace.Component {
       // all dropdowns.
       // See https://khanacademy.atlassian.net/browse/WB-1671
       ,
-      role: "combobox"
+      role: "combobox",
+      showOpenerLabelAsText: false
     }, children)));
   }
 }
@@ -34119,6 +34164,8 @@ const noop$1 = () => {};
 
 const MovableLine = props => {
   const {
+    ariaLabels,
+    ariaDescribedBy,
     onMoveLine = () => {},
     onMovePoint = () => {},
     color,
@@ -34141,6 +34188,8 @@ const MovableLine = props => {
     visiblePoint: visiblePoint1,
     focusableHandle: focusableHandle1
   } = useControlPoint({
+    ariaLabel: ariaLabels?.point1AriaLabel,
+    ariaDescribedBy: ariaDescribedBy,
     point: start,
     sequenceNumber: 1,
     color,
@@ -34150,6 +34199,8 @@ const MovableLine = props => {
     visiblePoint: visiblePoint2,
     focusableHandle: focusableHandle2
   } = useControlPoint({
+    ariaLabel: ariaLabels?.point2AriaLabel,
+    ariaDescribedBy: ariaDescribedBy,
     point: end,
     sequenceNumber: 2,
     color,
@@ -34432,6 +34483,13 @@ function getGradableGraph(state, initialGraph) {
     };
   }
   if (state.type === "point" && initialGraph.type === "point") {
+    // The unlimited point graph must have at least 1 coordinate or else it is not considered score-able.
+    if (state.numPoints === "unlimited" && state.coords.length === 0) {
+      return {
+        ...initialGraph,
+        coords: null
+      };
+    }
     return {
       ...initialGraph,
       coords: state.coords
@@ -34510,7 +34568,8 @@ function CircleGraph(props) {
     radiusPoint
   } = graphState;
   const {
-    strings
+    strings,
+    locale
   } = usePerseusI18n();
   const [radiusPointAriaLive, setRadiusPointAriaLive] = React__namespace.useState("off");
   const radius = getRadius(graphState);
@@ -34520,27 +34579,27 @@ function CircleGraph(props) {
   const outerPointsId = id + "-outer-points";
 
   // Aria label strings
-  const circleGraphAriaLabel = strings.circleGraphAriaLabel;
-  const circleShapeAriaLabel = strings.circleShapeAriaLabel({
-    centerX: center[0],
-    centerY: center[1]
+  const circleGraphAriaLabel = strings.srCircleGraph;
+  const circleShapeAriaLabel = strings.srCircleShape({
+    centerX: srFormatNumber(center[0], locale),
+    centerY: srFormatNumber(center[1], locale)
   });
-  const circleRadiusPointAriaLabel = strings.circleRadiusPointAriaLabel({
-    radiusPointX: radiusPoint[0],
-    radiusPointY: radiusPoint[1]
+  const circleRadiusPointAriaLabel = strings.srCircleRadiusPoint({
+    radiusPointX: srFormatNumber(radiusPoint[0], locale),
+    radiusPointY: srFormatNumber(radiusPoint[1], locale)
   });
-  const circleRadiusDescription = strings.circleRadiusDescription({
+  const circleRadiusDescription = strings.srCircleRadius({
     radius
   });
-  const circleOuterPointsDescription = strings.circleOuterPointsDescription({
-    point1X: center[0] + radius,
-    point1Y: center[1],
-    point2X: center[0],
-    point2Y: center[1] + radius,
-    point3X: center[0] - radius,
-    point3Y: center[1],
-    point4X: center[0],
-    point4Y: center[1] - radius
+  const circleOuterPointsDescription = strings.srCircleOuterPoints({
+    point1X: srFormatNumber(center[0] + radius, locale),
+    point1Y: srFormatNumber(center[1], locale),
+    point2X: srFormatNumber(center[0], locale),
+    point2Y: srFormatNumber(center[1] + radius, locale),
+    point3X: srFormatNumber(center[0] - radius, locale),
+    point3Y: srFormatNumber(center[1], locale),
+    point4X: srFormatNumber(center[0], locale),
+    point4Y: srFormatNumber(center[1] - radius, locale)
   });
   return /*#__PURE__*/React__namespace.createElement("g", {
     // Outer circle minimal description
@@ -34696,12 +34755,67 @@ const LinearGraph = (props, key) => {
   const {
     coords: line
   } = props.graphState;
+  const {
+    strings,
+    locale
+  } = usePerseusI18n();
+  const id = React__namespace.useId();
+  const pointsDescriptionId = id + "-points";
+  const interceptDescriptionId = id + "-intercept";
+  const slopeDescriptionId = id + "-slope";
+
+  // Aria label strings
+  const linearGraphPointsDescription = strings.srLinearGraphPoints({
+    point1X: srFormatNumber(line[0][0], locale),
+    point1Y: srFormatNumber(line[0][1], locale),
+    point2X: srFormatNumber(line[1][0], locale),
+    point2Y: srFormatNumber(line[1][1], locale)
+  });
+
+  // Slope description
+  const slope = (line[1][1] - line[0][1]) / (line[1][0] - line[0][0]);
+  let slopeString = "";
+  if (slope === Infinity || slope === -Infinity) {
+    slopeString = strings.srLinearGraphSlopeVertical;
+  } else if (slope === 0) {
+    slopeString = strings.srLinearGraphSlopeHorizontal;
+  } else {
+    slopeString = slope > 0 ? strings.srLinearGraphSlopeIncreasing : strings.srLinearGraphSlopeDecreasing;
+  }
+
+  // Intersection description
+  const xIntercept = (0 - line[0][1]) / slope + line[0][0];
+  const yIntercept = line[0][1] - slope * line[0][0];
+  const hasXIntercept = xIntercept !== Infinity && xIntercept !== -Infinity;
+  const hasYIntercept = yIntercept !== Infinity && yIntercept !== -Infinity;
+  let interceptString;
+  if (hasXIntercept && hasYIntercept) {
+    // Describe both intercepts in the same sentence.
+    interceptString = xIntercept === 0 && yIntercept === 0 ? strings.srLinearGraphOriginIntercept : strings.srLinearGraphBothIntercepts({
+      xIntercept: srFormatNumber(xIntercept, locale),
+      yIntercept: srFormatNumber(yIntercept, locale)
+    });
+  } else {
+    // Describe only one intercept.
+    interceptString = hasXIntercept ? strings.srLinearGraphXOnlyIntercept({
+      xIntercept: srFormatNumber(xIntercept, locale)
+    }) : strings.srLinearGraphYOnlyIntercept({
+      yIntercept: srFormatNumber(yIntercept, locale)
+    });
+  }
 
   // Linear graphs only have one line
   // (LEMS-2050): Update the reducer so that we have a separate action for moving one line
   // and another action for moving multiple lines
-  return /*#__PURE__*/React__namespace.createElement(MovableLine, {
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    className: "linear-graph-container"
+    // Outer line minimal description
+    ,
+    "aria-label": strings.srLinearGraph,
+    "aria-describedby": `${pointsDescriptionId} ${interceptDescriptionId} ${slopeDescriptionId}`
+  }, /*#__PURE__*/React__namespace.createElement(MovableLine, {
     key: 0,
+    ariaDescribedBy: `${interceptDescriptionId} ${slopeDescriptionId}`,
     points: line,
     onMoveLine: delta => {
       dispatch(actions.linear.moveLine(delta));
@@ -34712,7 +34826,22 @@ const LinearGraph = (props, key) => {
     },
     onMovePoint: (endpointIndex, destination) => dispatch(actions.linear.movePoint(endpointIndex, destination)),
     color: "var(--movable-line-stroke-color)"
-  });
+  }), /*#__PURE__*/React__namespace.createElement("g", {
+    id: pointsDescriptionId,
+    style: {
+      display: "hidden"
+    }
+  }, linearGraphPointsDescription), /*#__PURE__*/React__namespace.createElement("g", {
+    id: interceptDescriptionId,
+    style: {
+      display: "hidden"
+    }
+  }, interceptString), /*#__PURE__*/React__namespace.createElement("g", {
+    id: slopeDescriptionId,
+    style: {
+      display: "hidden"
+    }
+  }, slopeString));
 };
 
 function renderLinearSystemGraph(state, dispatch) {
@@ -45670,7 +45799,7 @@ const init = function () {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "49.0.1";
+const libVersion = "49.0.3";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {