@khanacademy/perseus 49.0.2 → 49.1.1

package/dist/es/index.js

@@ -281,7 +281,50 @@ 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.",
+  srAngleSideAtCoordinates: ({
+    point,
+    side,
+    x,
+    y
+  }) => `Point ${point}, ${side} at ${x} comma ${y}`,
+  srAngleVertexAtCoordinatesWithAngleMeasure: ({
+    x,
+    y,
+    angleMeasure
+  }) => `Point 2, vertex at ${x} comma ${y}. Angle ${angleMeasure} degrees`,
+  srAngleGraphAriaLabel: "An angle on a coordinate plane.",
+  srAngleGraphAriaDescription: ({
+    angleMeasure,
+    vertexX,
+    vertexY,
+    isX,
+    isY,
+    tsX,
+    tsY
+  }) => `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.
 };
 
@@ -27376,11 +27419,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 +27460,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 +33871,8 @@ const noop$1 = () => {};
 
 const MovableLine = props => {
   const {
+    ariaLabels,
+    ariaDescribedBy,
     onMoveLine = () => {},
     onMovePoint = () => {},
     color,
@@ -33839,6 +33895,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 +33906,8 @@ const MovableLine = props => {
     visiblePoint: visiblePoint2,
     focusableHandle: focusableHandle2
   } = useControlPoint({
+    ariaLabel: ariaLabels == null ? void 0 : ariaLabels.point2AriaLabel,
+    ariaDescribedBy: ariaDescribedBy,
     point: end,
     sequenceNumber: 2,
     color,
@@ -34026,23 +34086,78 @@ 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(_extends({
+      point: 1,
+      side: "terminal side"
+    }, formattedCoordinates)) : strings.srAngleSideAtCoordinates(_extends({
+      point: 3,
+      side: "initial side"
+    }, formattedCoordinates));
+    return label;
+  };
+  const formatVertexAriaLabel = newPoint => {
+    const formattedVertexCoordinates = formatCoordinates(newPoint[X], newPoint[Y]);
+    const label = showAngles ? strings.srAngleVertexAtCoordinatesWithAngleMeasure(_extends({}, formattedVertexCoordinates, {
+      angleMeasure: angleMeasure
+    })) : strings.srAngleSideAtCoordinates(_extends({
+      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.createElement(React.Fragment, null, svgLines, /*#__PURE__*/React.createElement(Angle, angleParams), /*#__PURE__*/React.createElement(MovablePoint$1, {
+  return /*#__PURE__*/React.createElement("g", {
+    "aria-label": wholeAngleAriaLabel,
+    "aria-describedby": "angle-description"
+  }, svgLines, /*#__PURE__*/React.createElement(Angle, angleParams), /*#__PURE__*/React.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.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.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.createElement("g", {
+    id: "angle-description",
+    style: {
+      display: "hidden"
+    }
+  }, wholeAngleDescription));
 }
 const positiveX = [1, 0];
 const negativeX = [-1, 0];
@@ -34387,12 +34502,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));
@@ -34403,7 +34573,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) {
@@ -45322,7 +45507,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.2";
+const libVersion = "49.1.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {