@khanacademy/perseus 49.0.2 → 49.1.1

package/dist/index.js

@@ -420,6 +420,70 @@ 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.",
+  srAngleSideAtCoordinates: _ref37 => {
+    let {
+      point,
+      side,
+      x,
+      y
+    } = _ref37;
+    return `Point ${point}, ${side} at ${x} comma ${y}`;
+  },
+  srAngleVertexAtCoordinatesWithAngleMeasure: _ref38 => {
+    let {
+      x,
+      y,
+      angleMeasure
+    } = _ref38;
+    return `Point 2, vertex at ${x} comma ${y}. Angle ${angleMeasure} degrees`;
+  },
+  srAngleGraphAriaLabel: "An angle on a coordinate plane.",
+  srAngleGraphAriaDescription: _ref39 => {
+    let {
+      angleMeasure,
+      vertexX,
+      vertexY,
+      isX,
+      isY,
+      tsX,
+      tsY
+    } = _ref39;
+    return `The angle measure is ${angleMeasure} degrees with a vertex at ${vertexX} comma ${vertexY}, a point on the initial side at ${isX} comma ${isY} and a point on the terminal side at ${tsX} comma ${tsY}.`;
   }
   // The above strings are used for interactive graph SR descriptions.
 };
@@ -27629,11 +27693,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 +27734,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 +34194,8 @@ const noop$1 = () => {};
 
 const MovableLine = props => {
   const {
+    ariaLabels,
+    ariaDescribedBy,
     onMoveLine = () => {},
     onMovePoint = () => {},
     color,
@@ -34141,6 +34218,8 @@ const MovableLine = props => {
     visiblePoint: visiblePoint1,
     focusableHandle: focusableHandle1
   } = useControlPoint({
+    ariaLabel: ariaLabels?.point1AriaLabel,
+    ariaDescribedBy: ariaDescribedBy,
     point: start,
     sequenceNumber: 1,
     color,
@@ -34150,6 +34229,8 @@ const MovableLine = props => {
     visiblePoint: visiblePoint2,
     focusableHandle: focusableHandle2
   } = useControlPoint({
+    ariaLabel: ariaLabels?.point2AriaLabel,
+    ariaDescribedBy: ariaDescribedBy,
     point: end,
     sequenceNumber: 2,
     color,
@@ -34330,23 +34411,82 @@ function AngleGraph(props) {
     showAngles: showAngles || false // Whether to show the angle or not
   };
 
+  const {
+    strings,
+    locale
+  } = usePerseusI18n();
+  const angleMeasure = srFormatNumber(getClockwiseAngle([endPoints[0], centerPoint, endPoints[1]], allowReflexAngles), locale);
+  const wholeAngleAriaLabel = strings.srAngleGraphAriaLabel;
+  const wholeAngleDescription = strings.srAngleGraphAriaDescription({
+    angleMeasure,
+    vertexX: srFormatNumber(coords[1][X], locale),
+    vertexY: srFormatNumber(coords[1][Y], locale),
+    isX: srFormatNumber(coords[2][X], locale),
+    isY: srFormatNumber(coords[2][Y], locale),
+    tsX: srFormatNumber(coords[0][X], locale),
+    tsY: srFormatNumber(coords[0][Y], locale)
+  });
+  const formatCoordinates = (x, y) => ({
+    x: srFormatNumber(x, locale),
+    y: srFormatNumber(y, locale)
+  });
+  const formatSideAriaLabel = (side, newPoint) => {
+    const formattedCoordinates = formatCoordinates(newPoint[X], newPoint[Y]);
+    const label = side === "terminal" ? strings.srAngleSideAtCoordinates({
+      point: 1,
+      side: "terminal side",
+      ...formattedCoordinates
+    }) : strings.srAngleSideAtCoordinates({
+      point: 3,
+      side: "initial side",
+      ...formattedCoordinates
+    });
+    return label;
+  };
+  const formatVertexAriaLabel = newPoint => {
+    const formattedVertexCoordinates = formatCoordinates(newPoint[X], newPoint[Y]);
+    const label = showAngles ? strings.srAngleVertexAtCoordinatesWithAngleMeasure({
+      ...formattedVertexCoordinates,
+      angleMeasure: angleMeasure
+    }) : strings.srAngleSideAtCoordinates({
+      point: 2,
+      side: "vertex",
+      ...formattedVertexCoordinates
+    });
+    return label;
+  };
+  const initialSideAriaLabel = formatSideAriaLabel("initial", coords[2]);
+  const terminalSideAriaLabel = formatSideAriaLabel("terminal", coords[0]);
+  const vertexAriaLabel = formatVertexAriaLabel(coords[1]);
+
   // Render the lines, angle, and then movable points
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, svgLines, /*#__PURE__*/React__namespace.createElement(Angle, angleParams), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    "aria-label": wholeAngleAriaLabel,
+    "aria-describedby": "angle-description"
+  }, svgLines, /*#__PURE__*/React__namespace.createElement(Angle, angleParams), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: coords[1],
     sequenceNumber: 1,
     constrain: p => p,
-    onMove: destination => dispatch(actions.angle.movePoint(1, destination))
+    onMove: destination => dispatch(actions.angle.movePoint(1, destination)),
+    ariaLabel: vertexAriaLabel
   }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: coords[0],
     sequenceNumber: 2,
     constrain: getAngleSideConstraint(coords[0], coords[1], snapDegrees || 1),
-    onMove: destination => dispatch(actions.angle.movePoint(0, destination))
+    onMove: destination => dispatch(actions.angle.movePoint(0, destination)),
+    ariaLabel: terminalSideAriaLabel
   }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: coords[2],
     sequenceNumber: 3,
     constrain: getAngleSideConstraint(coords[2], coords[1], snapDegrees || 1),
-    onMove: destination => dispatch(actions.angle.movePoint(2, destination))
-  }));
+    onMove: destination => dispatch(actions.angle.movePoint(2, destination)),
+    ariaLabel: initialSideAriaLabel
+  }), /*#__PURE__*/React__namespace.createElement("g", {
+    id: "angle-description",
+    style: {
+      display: "hidden"
+    }
+  }, wholeAngleDescription));
 }
 const positiveX = [1, 0];
 const negativeX = [-1, 0];
@@ -34704,12 +34844,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));
@@ -34720,7 +34915,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) {
@@ -45678,7 +45888,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.2";
+const libVersion = "49.1.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {