@khanacademy/perseus 49.0.3 → 49.1.1

package/dist/es/index.js

@@ -303,7 +303,28 @@ const mockStrings = {
     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."
+  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.
 };
 
@@ -34065,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];
@@ -45431,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.3";
+const libVersion = "49.1.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {