@khanacademy/perseus 49.0.3 → 49.1.2

package/dist/es/index.js

@@ -303,7 +303,34 @@ 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.",
+  srLinearGrabHandle: ({
+    point1X,
+    point1Y,
+    point2X,
+    point2Y
+  }) => `Line from ${point1X} comma ${point1Y} to ${point2X} comma ${point2Y}.`,
+  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.
 };
 
@@ -33850,15 +33877,21 @@ const noop$1 = () => {};
 
 const MovableLine = props => {
   const {
+    points: [start, end],
     ariaLabels,
     ariaDescribedBy,
-    onMoveLine = () => {},
-    onMovePoint = () => {},
     color,
-    points: [start, end],
-    extend
+    extend,
+    onMoveLine = () => {},
+    onMovePoint = () => {}
   } = props;
 
+  // Aria live states for (0) point 1, (1) point 2, and (2) grab handle.
+  // When moving an element, set its aria live to "polite" and the others
+  // to "off". Otherwise, other connected elements that move at the same
+  // time might override the currently focused element's aria live.
+  const [ariaLives, setAriaLives] = React.useState(["off", "off", "off"]);
+
   // We use separate focusableHandle elements, instead of letting the movable
   // points themselves be focusable, to allow the tab order of the points to
   // be different from the rendering order. We had to solve for the following
@@ -33876,10 +33909,14 @@ const MovableLine = props => {
   } = useControlPoint({
     ariaLabel: ariaLabels == null ? void 0 : ariaLabels.point1AriaLabel,
     ariaDescribedBy: ariaDescribedBy,
+    ariaLive: ariaLives[0],
     point: start,
     sequenceNumber: 1,
     color,
-    onMove: p => onMovePoint(0, p)
+    onMove: p => {
+      setAriaLives(["polite", "off", "off"]);
+      onMovePoint(0, p);
+    }
   });
   const {
     visiblePoint: visiblePoint2,
@@ -33887,17 +33924,27 @@ const MovableLine = props => {
   } = useControlPoint({
     ariaLabel: ariaLabels == null ? void 0 : ariaLabels.point2AriaLabel,
     ariaDescribedBy: ariaDescribedBy,
+    ariaLive: ariaLives[1],
     point: end,
     sequenceNumber: 2,
     color,
-    onMove: p => onMovePoint(1, p)
+    onMove: p => {
+      setAriaLives(["off", "polite", "off"]);
+      onMovePoint(1, p);
+    }
   });
   const line = /*#__PURE__*/React.createElement(Line$1, {
+    ariaLabel: ariaLabels == null ? void 0 : ariaLabels.grabHandleAriaLabel,
+    ariaDescribedBy: ariaDescribedBy,
+    ariaLive: ariaLives[2],
     start: start,
     end: end,
     stroke: color,
     extend: extend,
-    onMove: onMoveLine
+    onMove: delta => {
+      setAriaLives(["off", "off", "polite"]);
+      onMoveLine(delta);
+    }
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, focusableHandle1, line, focusableHandle2, visiblePoint1, visiblePoint2);
 };
@@ -33906,9 +33953,12 @@ const Line$1 = props => {
   const {
     start,
     end,
-    onMove,
+    ariaLabel,
+    ariaDescribedBy,
+    ariaLive,
     extend,
-    stroke = defaultStroke
+    stroke = defaultStroke,
+    onMove
   } = props;
   const [startPtPx, endPtPx] = useTransformVectorsToPixels(start, end);
   const {
@@ -33938,11 +33988,19 @@ const Line$1 = props => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("g", {
     ref: line,
     tabIndex: disableKeyboardInteraction ? -1 : 0,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-live": ariaLive,
     className: "movable-line",
     "data-testid": "movable-line",
     style: {
       cursor: dragging ? "grabbing" : "grab"
     }
+    // Indicate that this element is interactive.
+    // As a bonus, giving this group a non-group role makes
+    // the screen reader skip over its empty children.
+    ,
+    role: "button"
   }, /*#__PURE__*/React.createElement(SVGLine, {
     start: startPtPx,
     end: endPtPx,
@@ -34065,23 +34123,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];
@@ -34442,6 +34555,12 @@ const LinearGraph = (props, key) => {
     point2X: srFormatNumber(line[1][0], locale),
     point2Y: srFormatNumber(line[1][1], locale)
   });
+  const grabHandleAriaLabel = strings.srLinearGrabHandle({
+    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]);
@@ -34483,9 +34602,13 @@ const LinearGraph = (props, key) => {
     // Outer line minimal description
     ,
     "aria-label": strings.srLinearGraph,
-    "aria-describedby": `${pointsDescriptionId} ${interceptDescriptionId} ${slopeDescriptionId}`
+    "aria-describedby": `${pointsDescriptionId} ${interceptDescriptionId} ${slopeDescriptionId}`,
+    role: "figure"
   }, /*#__PURE__*/React.createElement(MovableLine, {
     key: 0,
+    ariaLabels: {
+      grabHandleAriaLabel: grabHandleAriaLabel
+    },
     ariaDescribedBy: `${interceptDescriptionId} ${slopeDescriptionId}`,
     points: line,
     onMoveLine: delta => {
@@ -45431,7 +45554,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.2";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {