@khanacademy/perseus 48.1.0 → 48.2.0

package/dist/es/index.js

@@ -239,6 +239,8 @@ const mockStrings = {
   addPoint: "Add Point",
   removePoint: "Remove Point",
   graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
+  selectAnAnswer: "Select an answer",
+  // The following strings are used for interactive graph SR descriptions.
   closePolygon: "Close shape",
   openPolygon: "Re-open shape",
   srPointAtCoordinates: ({
@@ -250,7 +252,29 @@ const mockStrings = {
     elements
   }) => `Interactive elements: ${elements}`,
   srNoInteractiveElements: "No interactive elements",
-  selectAnAnswer: "Select an answer"
+  circleGraphAriaLabel: "A circle on a coordinate plane.",
+  circleShapeAriaLabel: ({
+    centerX,
+    centerY
+  }) => `Circle. The center point is at ${centerX} comma ${centerY}.`,
+  circleRadiusPointAriaLabel: ({
+    radiusPointX,
+    radiusPointY
+  }) => `Radius point at ${radiusPointX} comma ${radiusPointY}.`,
+  circleRadiusDescription: ({
+    radius
+  }) => `Circle radius is ${radius}.`,
+  circleOuterPointsDescription: ({
+    point1X,
+    point1Y,
+    point2X,
+    point2Y,
+    point3X,
+    point3Y,
+    point4X,
+    point4Y
+  }) => `Points on the circle at ${point1X} comma ${point1Y}, ${point2X} comma ${point2Y}, ${point3X} comma ${point3Y}, ${point4X} comma ${point4Y}.`
+  // The above strings are used for interactive graph SR descriptions.
 };
 
 /**
@@ -3520,9 +3544,9 @@ function loadGraphie(url, onDataLoaded) {
     };
     if (shouldUseLocalizedData()) {
       cacheData.localized = false;
-      // If there is isn't any localized data, fall back to
-      // the original, unlocalized data
-      retrieveData(getLocalizedDataUrl(url), dataLoadErrorHandler);
+      // If there is isn't any localized data, use the error callback to try to
+      // load the non-localized data. If that fails too, then we will throw an error.
+      retrieveData(getLocalizedDataUrl(url), () => retrieveData(Util.getDataUrl(url), dataLoadErrorHandler));
     } else {
       retrieveData(Util.getDataUrl(url), dataLoadErrorHandler);
     }
@@ -34145,21 +34169,96 @@ function CircleGraph(props) {
     center,
     radiusPoint
   } = graphState;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableCircle, {
+  const {
+    strings
+  } = usePerseusI18n();
+  const [radiusPointAriaLive, setRadiusPointAriaLive] = React.useState("off");
+  const radius = getRadius(graphState);
+  const id = React.useId();
+  const circleId = id + "-circle";
+  const radiusId = id + "-radius";
+  const outerPointsId = id + "-outer-points";
+
+  // Aria label strings
+  const circleGraphAriaLabel = strings.circleGraphAriaLabel;
+  const circleShapeAriaLabel = strings.circleShapeAriaLabel({
+    centerX: center[0],
+    centerY: center[1]
+  });
+  const circleRadiusPointAriaLabel = strings.circleRadiusPointAriaLabel({
+    radiusPointX: radiusPoint[0],
+    radiusPointY: radiusPoint[1]
+  });
+  const circleRadiusDescription = strings.circleRadiusDescription({
+    radius
+  });
+  const circleOuterPointsDescription = strings.circleOuterPointsDescription({
+    point1X: center[0] + radius,
+    point1Y: center[1],
+    point2X: center[0],
+    point2Y: center[1] + radius,
+    point3X: center[0] - radius,
+    point3Y: center[1],
+    point4X: center[0],
+    point4Y: center[1] - radius
+  });
+  return /*#__PURE__*/React.createElement("g", {
+    // Outer circle minimal description
+    "aria-label": circleGraphAriaLabel,
+    "aria-describedby": `${circleId} ${radiusId} ${outerPointsId}`
+  }, /*#__PURE__*/React.createElement(MovableCircle, {
+    id: circleId
+    // Focusable circle aria label reads with every update
+    // because of the aria-live property in the circle <g>.
+    ,
+    ariaLabel: circleShapeAriaLabel
+    // Aria-describedby describes additional info on focus.
+    ,
+    ariaDescribedBy: `${radiusId} ${outerPointsId}`,
     center: center,
-    radius: getRadius(graphState),
-    onMove: c => dispatch(actions.circle.moveCenter(c))
-  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
+    radius: radius,
+    onMove: c => {
+      setRadiusPointAriaLive("off");
+      dispatch(actions.circle.moveCenter(c));
+    }
+  }), /*#__PURE__*/React.createElement(MovablePoint$1
+  // Radius point aria label reads with every update.
+  , {
+    ariaLabel: `${circleRadiusPointAriaLabel} ${circleRadiusDescription}`
+    // Aria-describedby describes additional info on focus.
+    ,
+    ariaDescribedBy: `${outerPointsId}`
+    // The radius point's aria-live property is set to "off" when
+    // the circle is moved, so that it doesn't override the circle's
+    // aria-live (since the point is moved along with the circle).
+    // When the radius point is moved, the aria-live is set to
+    // "polite" so that the radius is read out.
+    ,
+    ariaLive: radiusPointAriaLive,
     point: radiusPoint,
     sequenceNumber: 1,
     cursor: "ew-resize",
     onMove: newRadiusPoint => {
+      setRadiusPointAriaLive("polite");
       dispatch(actions.circle.moveRadiusPoint(newRadiusPoint));
     }
-  }));
+  }), /*#__PURE__*/React.createElement("g", {
+    id: radiusId,
+    style: {
+      display: "hidden"
+    }
+  }, circleRadiusDescription), /*#__PURE__*/React.createElement("g", {
+    id: outerPointsId,
+    style: {
+      display: "hidden"
+    }
+  }, circleOuterPointsDescription));
 }
 function MovableCircle(props) {
   const {
+    id,
+    ariaLabel,
+    ariaDescribedBy,
     center,
     radius,
     onMove
@@ -34180,7 +34279,11 @@ function MovableCircle(props) {
   const [centerPx] = useTransformVectorsToPixels(center);
   const [radiiPx] = useTransformDimensionsToPixels([radius, radius]);
   return /*#__PURE__*/React.createElement("g", {
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-live": "polite",
     ref: draggableRef,
+    role: "button",
     tabIndex: disableKeyboardInteraction ? -1 : 0,
     className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`
   }, /*#__PURE__*/React.createElement("ellipse", {
@@ -34190,6 +34293,7 @@ function MovableCircle(props) {
     rx: radiiPx[X] + 3,
     ry: radiiPx[Y] + 3
   }), /*#__PURE__*/React.createElement("ellipse", {
+    id: id,
     className: "circle",
     cx: centerPx[X],
     cy: centerPx[Y],
@@ -45172,7 +45276,7 @@ const init = function init() {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "48.1.0";
+const libVersion = "48.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {