@khanacademy/perseus 49.1.1 → 49.1.2

package/dist/es/index.js

@@ -304,6 +304,12 @@ const mockStrings = {
     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.",
+  srLinearGrabHandle: ({
+    point1X,
+    point1Y,
+    point2X,
+    point2Y
+  }) => `Line from ${point1X} comma ${point1Y} to ${point2X} comma ${point2Y}.`,
   srAngleSideAtCoordinates: ({
     point,
     side,
@@ -33871,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
@@ -33897,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,
@@ -33908,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);
 };
@@ -33927,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 {
@@ -33959,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,
@@ -34518,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]);
@@ -34559,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 => {
@@ -45507,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.1.1";
+const libVersion = "49.1.2";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {