@khanacademy/perseus 48.1.0 → 49.0.0

package/dist/es/index.js

@@ -44,13 +44,21 @@ import cornersOutIcon from '@phosphor-icons/core/regular/corners-out.svg';
 import Link from '@khanacademy/wonder-blocks-link';
 
 function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
-    return n;
-  }, _extends.apply(null, arguments);
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
 }
 
 /**
@@ -239,6 +247,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 +260,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 +3552,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);
     }
@@ -4421,14 +4453,17 @@ const InteractiveUtil = {
   }
 };
 
-function _classPrivateFieldBase(e, t) {
-  if (!{}.hasOwnProperty.call(e, t)) throw new TypeError("attempted to use private field on non-instance");
-  return e;
+function _classPrivateFieldBase(receiver, privateKey) {
+  if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
+    throw new TypeError("attempted to use private field on non-instance");
+  }
+
+  return receiver;
 }
 
 var id = 0;
-function _classPrivateFieldKey(e) {
-  return "__private_" + id++ + "_" + e;
+function _classPrivateFieldKey(name) {
+  return "__private_" + id++ + "_" + name;
 }
 
 /*!
@@ -21057,14 +21092,19 @@ TextInput.defaultProps = {
   disabled: false
 };
 
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
-    t[n] = r[n];
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
   }
-  return t;
+
+  return target;
 }
 
 const _excluded$7 = ["position", "visibility", "left", "top"];
@@ -27345,36 +27385,41 @@ class Dropdown extends React.Component {
       value: String(i + 1),
       label: choice
     }))];
-    return /*#__PURE__*/React.createElement(UniqueIDProvider, {
-      scope: "dropdown-widget",
-      mockOnFirstRender: true
-    }, ids => /*#__PURE__*/React.createElement(View
-    // NOTE(jared): These are required to prevent weird behavior
-    // When there's a dropdown in a zoomable table.
-    , {
-      onClick: e => {
-        e.stopPropagation();
-      },
-      onTouchStart: e => {
-        e.stopPropagation();
-      }
-    }, this.props.visibleLabel && /*#__PURE__*/React.createElement(LabelLarge, {
-      tag: "label",
-      htmlFor: ids.get("dropdown")
-    }, this.props.visibleLabel), /*#__PURE__*/React.createElement(SingleSelect, {
-      id: ids.get("dropdown"),
-      placeholder: "",
-      onChange: value => this._handleChange(parseInt(value)),
-      selectedValue: String(this.props.selected),
-      disabled: this.props.apiOptions.readOnly,
-      "aria-label": this.props.ariaLabel || this.props.visibleLabel || this.context.strings.selectAnAnswer
-      // This is currently necessary for SRs to read the labels properly.
-      // However, WB is working on a change to add the "combobox" role to
-      // all dropdowns.
-      // See https://khanacademy.atlassian.net/browse/WB-1671
-      ,
-      role: "combobox"
-    }, children)));
+    return (
+      /*#__PURE__*/
+      // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
+      // eslint-disable-next-line no-restricted-syntax
+      React.createElement(UniqueIDProvider, {
+        scope: "dropdown-widget",
+        mockOnFirstRender: true
+      }, ids => /*#__PURE__*/React.createElement(View
+      // NOTE(jared): These are required to prevent weird behavior
+      // When there's a dropdown in a zoomable table.
+      , {
+        onClick: e => {
+          e.stopPropagation();
+        },
+        onTouchStart: e => {
+          e.stopPropagation();
+        }
+      }, this.props.visibleLabel && /*#__PURE__*/React.createElement(LabelLarge, {
+        tag: "label",
+        htmlFor: ids.get("dropdown")
+      }, this.props.visibleLabel), /*#__PURE__*/React.createElement(SingleSelect, {
+        id: ids.get("dropdown"),
+        placeholder: "",
+        onChange: value => this._handleChange(parseInt(value)),
+        selectedValue: String(this.props.selected),
+        disabled: this.props.apiOptions.readOnly,
+        "aria-label": this.props.ariaLabel || this.props.visibleLabel || this.context.strings.selectAnAnswer
+        // This is currently necessary for SRs to read the labels properly.
+        // However, WB is working on a change to add the "combobox" role to
+        // all dropdowns.
+        // See https://khanacademy.atlassian.net/browse/WB-1671
+        ,
+        role: "combobox"
+      }, children)))
+    );
   }
 }
 Dropdown.contextType = PerseusI18nContext;
@@ -27477,32 +27522,37 @@ class Explanation extends React.Component {
       "white-space": "normal"
     };
     const contentStyling = [styles$k.content, this.state.expanded ? styles$k.contentExpanded : styles$k.contentCollapsed, allowTransition && (this.state.expanded ? styles$k.transitionExpanded : styles$k.transitionCollapsed)];
-    return /*#__PURE__*/React.createElement(UniqueIDProvider, {
-      mockOnFirstRender: true,
-      scope: "explanation-widget"
-    }, ids => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-      "aria-expanded": this.state.expanded,
-      "aria-controls": ids.get("content"),
-      endIcon: caretIcon,
-      kind: "tertiary",
-      labelStyle: labelStyle,
-      onClick: this._onClick,
-      size: "small",
-      style: buttonStyleOverrides
-    }, promptText), /*#__PURE__*/React.createElement(View, {
-      id: ids.get("content"),
-      style: contentStyling,
-      "aria-hidden": !this.state.expanded,
-      testId: "content-container"
-    }, /*#__PURE__*/React.createElement(View, {
-      style: styles$k.contentWrapper
-    }, /*#__PURE__*/React.createElement(Renderer, {
-      apiOptions: this.props.apiOptions,
-      content: this.props.explanation,
-      widgets: this.props.widgets,
-      linterContext: this.props.linterContext,
-      strings: this.context.strings
-    })))));
+    return (
+      /*#__PURE__*/
+      // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
+      // eslint-disable-next-line no-restricted-syntax
+      React.createElement(UniqueIDProvider, {
+        mockOnFirstRender: true,
+        scope: "explanation-widget"
+      }, ids => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+        "aria-expanded": this.state.expanded,
+        "aria-controls": ids.get("content"),
+        endIcon: caretIcon,
+        kind: "tertiary",
+        labelStyle: labelStyle,
+        onClick: this._onClick,
+        size: "small",
+        style: buttonStyleOverrides
+      }, promptText), /*#__PURE__*/React.createElement(View, {
+        id: ids.get("content"),
+        style: contentStyling,
+        "aria-hidden": !this.state.expanded,
+        testId: "content-container"
+      }, /*#__PURE__*/React.createElement(View, {
+        style: styles$k.contentWrapper
+      }, /*#__PURE__*/React.createElement(Renderer, {
+        apiOptions: this.props.apiOptions,
+        content: this.props.explanation,
+        widgets: this.props.widgets,
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
+      })))))
+    );
   }
 }
 Explanation.contextType = PerseusI18nContext;
@@ -34145,21 +34195,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 +34305,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 +34319,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],
@@ -38784,6 +38914,8 @@ const AnswerChoices = props => {
 };
 
 const HideAnswersToggle = props => {
+  // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
+  // eslint-disable-next-line no-restricted-syntax
   const idFactory = useUniqueIdWithMock();
   const switchId = idFactory.get("hide-answers-toggle");
   const labelId = idFactory.get("hide-answers-label");
@@ -38829,6 +38961,9 @@ const AnswerPill = props => {
     focused,
     hovered
   } = props;
+
+  // TODO(WB-1812, somewhatabstract): Migrate to Id or useId
+  // eslint-disable-next-line no-restricted-syntax
   const idFactory = useUniqueIdWithMock();
   const {
     strings
@@ -45172,7 +45307,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 = "49.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {