@khanacademy/perseus 49.0.1 → 49.0.3

package/dist/es/index.js

@@ -244,11 +244,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: ({
@@ -260,19 +260,19 @@ const mockStrings = {
     elements
   }) => `Interactive elements: ${elements}`,
   srNoInteractiveElements: "No interactive elements",
-  circleGraphAriaLabel: "A circle on a coordinate plane.",
-  circleShapeAriaLabel: ({
+  srCircleGraph: "A circle on a coordinate plane.",
+  srCircleShape: ({
     centerX,
     centerY
   }) => `Circle. The center point is at ${centerX} comma ${centerY}.`,
-  circleRadiusPointAriaLabel: ({
+  srCircleRadiusPoint: ({
     radiusPointX,
     radiusPointY
   }) => `Radius point at ${radiusPointX} comma ${radiusPointY}.`,
-  circleRadiusDescription: ({
+  srCircleRadius: ({
     radius
   }) => `Circle radius is ${radius}.`,
-  circleOuterPointsDescription: ({
+  srCircleOuterPoints: ({
     point1X,
     point1Y,
     point2X,
@@ -281,7 +281,29 @@ const mockStrings = {
     point3Y,
     point4X,
     point4Y
-  }) => `Points on the circle at ${point1X} comma ${point1Y}, ${point2X} comma ${point2Y}, ${point3X} comma ${point3Y}, ${point4X} comma ${point4Y}.`
+  }) => `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: ({
+    point1X,
+    point1Y,
+    point2X,
+    point2Y
+  }) => `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: ({
+    xIntercept
+  }) => `The line crosses the X-axis at ${xIntercept} comma 0.`,
+  srLinearGraphYOnlyIntercept: ({
+    yIntercept
+  }) => `The line crosses the Y-axis at 0 comma ${yIntercept}.`,
+  srLinearGraphBothIntercepts: ({
+    xIntercept,
+    yIntercept
+  }) => `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.
 };
 
@@ -27376,11 +27398,21 @@ class Dropdown extends React.Component {
       key: "placeholder",
       value: "0",
       disabled: true,
-      label: this.props.placeholder || " "
+      label: /*#__PURE__*/React.createElement(Renderer, {
+        content: this.props.placeholder,
+        strings: this.context.strings,
+        inline: true
+      }),
+      labelAsText: this.props.placeholder
     }), ...this.props.choices.map((choice, i) => /*#__PURE__*/React.createElement(OptionItem, {
       key: String(i + 1),
       value: String(i + 1),
-      label: choice
+      label: /*#__PURE__*/React.createElement(Renderer, {
+        content: choice,
+        strings: this.context.strings,
+        inline: true
+      }),
+      labelAsText: choice
     }))];
     return /*#__PURE__*/React.createElement(Id, null, dropdownId => /*#__PURE__*/React.createElement(View
     // NOTE(jared): These are required to prevent weird behavior
@@ -27407,7 +27439,8 @@ class Dropdown extends React.Component {
       // all dropdowns.
       // See https://khanacademy.atlassian.net/browse/WB-1671
       ,
-      role: "combobox"
+      role: "combobox",
+      showOpenerLabelAsText: false
     }, children)));
   }
 }
@@ -33817,6 +33850,8 @@ const noop$1 = () => {};
 
 const MovableLine = props => {
   const {
+    ariaLabels,
+    ariaDescribedBy,
     onMoveLine = () => {},
     onMovePoint = () => {},
     color,
@@ -33839,6 +33874,8 @@ const MovableLine = props => {
     visiblePoint: visiblePoint1,
     focusableHandle: focusableHandle1
   } = useControlPoint({
+    ariaLabel: ariaLabels == null ? void 0 : ariaLabels.point1AriaLabel,
+    ariaDescribedBy: ariaDescribedBy,
     point: start,
     sequenceNumber: 1,
     color,
@@ -33848,6 +33885,8 @@ const MovableLine = props => {
     visiblePoint: visiblePoint2,
     focusableHandle: focusableHandle2
   } = useControlPoint({
+    ariaLabel: ariaLabels == null ? void 0 : ariaLabels.point2AriaLabel,
+    ariaDescribedBy: ariaDescribedBy,
     point: end,
     sequenceNumber: 2,
     color,
@@ -34121,6 +34160,12 @@ 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 _extends({}, initialGraph, {
+        coords: null
+      });
+    }
     return _extends({}, initialGraph, {
       coords: state.coords
     });
@@ -34194,7 +34239,8 @@ function CircleGraph(props) {
     radiusPoint
   } = graphState;
   const {
-    strings
+    strings,
+    locale
   } = usePerseusI18n();
   const [radiusPointAriaLive, setRadiusPointAriaLive] = React.useState("off");
   const radius = getRadius(graphState);
@@ -34204,27 +34250,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.createElement("g", {
     // Outer circle minimal description
@@ -34380,12 +34426,67 @@ const LinearGraph = (props, key) => {
   const {
     coords: line
   } = props.graphState;
+  const {
+    strings,
+    locale
+  } = usePerseusI18n();
+  const id = React.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.createElement(MovableLine, {
+  return /*#__PURE__*/React.createElement("g", {
+    className: "linear-graph-container"
+    // Outer line minimal description
+    ,
+    "aria-label": strings.srLinearGraph,
+    "aria-describedby": `${pointsDescriptionId} ${interceptDescriptionId} ${slopeDescriptionId}`
+  }, /*#__PURE__*/React.createElement(MovableLine, {
     key: 0,
+    ariaDescribedBy: `${interceptDescriptionId} ${slopeDescriptionId}`,
     points: line,
     onMoveLine: delta => {
       dispatch(actions.linear.moveLine(delta));
@@ -34396,7 +34497,22 @@ const LinearGraph = (props, key) => {
     },
     onMovePoint: (endpointIndex, destination) => dispatch(actions.linear.movePoint(endpointIndex, destination)),
     color: "var(--movable-line-stroke-color)"
-  });
+  }), /*#__PURE__*/React.createElement("g", {
+    id: pointsDescriptionId,
+    style: {
+      display: "hidden"
+    }
+  }, linearGraphPointsDescription), /*#__PURE__*/React.createElement("g", {
+    id: interceptDescriptionId,
+    style: {
+      display: "hidden"
+    }
+  }, interceptString), /*#__PURE__*/React.createElement("g", {
+    id: slopeDescriptionId,
+    style: {
+      display: "hidden"
+    }
+  }, slopeString));
 };
 
 function renderLinearSystemGraph(state, dispatch) {
@@ -45315,7 +45431,7 @@ const init = function init() {
 
 // 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";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {