@khanacademy/perseus-editor 14.5.0 → 14.6.1

package/dist/index.js

@@ -29,6 +29,7 @@ var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var Banner = require('@khanacademy/wonder-blocks-banner');
 var plusCircle = require('@phosphor-icons/core/regular/plus-circle.svg');
 var wonderBlocksAccordion = require('@khanacademy/wonder-blocks-accordion');
+var pencilCircle = require('@phosphor-icons/core/regular/pencil-circle.svg');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 var caretDoubleDownIcon = require('@phosphor-icons/core/bold/caret-double-down-bold.svg');
 var caretDoubleUpIcon = require('@phosphor-icons/core/bold/caret-double-up-bold.svg');
@@ -79,6 +80,7 @@ var KAS__namespace = /*#__PURE__*/_interopNamespace(KAS);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
 var plusCircle__default = /*#__PURE__*/_interopDefaultLegacy(plusCircle);
+var pencilCircle__default = /*#__PURE__*/_interopDefaultLegacy(pencilCircle);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 var caretDoubleDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretDoubleDownIcon);
 var caretDoubleUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretDoubleUpIcon);
@@ -96,7 +98,7 @@ var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCou
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "14.5.0";
+const libVersion = "14.6.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -291,13 +293,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$T.button
+      style: styles$U.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$b, icon);
     });
   }
 }
-const styles$T = aphrodite.StyleSheet.create({
+const styles$U = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
@@ -20678,11 +20680,11 @@ class Spring extends React__namespace.Component {
     } = this.props;
     return React__namespace.createElement(wonderBlocksCore.View, {
       "aria-hidden": "true",
-      style: [styles$S.grow, style]
+      style: [styles$T.grow, style]
     });
   }
 }
-const styles$S = aphrodite.StyleSheet.create({
+const styles$T = aphrodite.StyleSheet.create({
   grow: {
     flexGrow: 1
   }
@@ -20925,13 +20927,13 @@ class WidgetSelect extends React__namespace.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$R.expanded : styles$R.collapsed;
+  const iconStyle = props.isExpanded ? styles$S.expanded : styles$S.collapsed;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: caretRight__default["default"],
     style: iconStyle
   });
 }
-const styles$R = aphrodite.StyleSheet.create({
+const styles$S = aphrodite.StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20961,16 +20963,16 @@ class TexErrorView extends React__namespace.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$Q.errorContainer
+      style: styles$R.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$Q.title,
+      style: styles$R.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$Q.errorExplanation
+      style: styles$R.errorExplanation
     }, "If your math doesn't display correctly, these errors might help you troubleshoot. Message #content-kitchen for help."), showErrors && errorList.map((e, index) => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$Q.error,
+      style: styles$R.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20979,7 +20981,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$Q = aphrodite.StyleSheet.create({
+const styles$R = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -23616,7 +23618,7 @@ class StructuredItemDiff extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$m,
+  InfoTip: InfoTip$n,
   InlineIcon: InlineIcon$7
 } = perseus.components;
 const {
@@ -23690,7 +23692,7 @@ class HintEditor extends React__namespace.Component {
       type: "button",
       className: this.props.isFirst ? "hidden" : "",
       onClick: ___default["default"].partial(this.props.onMove, -1)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, /*#__PURE__*/React__namespace.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React__namespace.createElement("input", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React__namespace.createElement(InfoTip$n, null, /*#__PURE__*/React__namespace.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox"
       // @ts-expect-error - TS2322 - Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
       ,
@@ -23918,7 +23920,7 @@ class CombinedHintsEditor extends React__namespace.Component {
 }
 
 const {
-  InfoTip: InfoTip$l
+  InfoTip: InfoTip$m
 } = perseus.components;
 class ItemExtrasEditor extends React__namespace.Component {
   static defaultProps = {
@@ -24056,17 +24058,17 @@ class ItemExtrasEditor extends React__namespace.Component {
   }
 }
 const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-  style: [styles$P.checkbox, props.indent ? styles$P.indented : undefined]
+  style: [styles$Q.checkbox, props.indent ? styles$Q.indented : undefined]
 }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
   label: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
       flexDirection: "row"
     }
-  }, props.label, " ", /*#__PURE__*/React__namespace.createElement(InfoTip$l, null, props.infoTip)),
+  }, props.label, " ", /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, props.infoTip)),
   checked: props.checked,
   onChange: newCheckedState => props.onChange(newCheckedState)
 }));
-const styles$P = aphrodite.StyleSheet.create({
+const styles$Q = aphrodite.StyleSheet.create({
   indented: {
     marginInlineStart: wonderBlocksTokens.spacing.large_24
   }
@@ -24732,12 +24734,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$O.baseButton, color === "green" && styles$O.green, color === "orange" && styles$O.orange),
+      className: aphrodite.css(styles$P.baseButton, color === "green" && styles$P.green, color === "orange" && styles$P.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$O = aphrodite.StyleSheet.create({
+const styles$P = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24950,23 +24952,23 @@ const LeafContainer = _ref2 => {
   } = _ref2;
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.containerHeader)
+    className: aphrodite.css(styles$O.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$N.containerTitle)
+    className: aphrodite.css(styles$O.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.container)
+    className: aphrodite.css(styles$O.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$N.row, styles$N.rowHeading)
+    className: aphrodite.css(styles$O.row, styles$O.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$O.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$N.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$O.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.containerTitle)
+    className: aphrodite.css(styles$O.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnRight)
+    className: aphrodite.css(styles$O.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24979,11 +24981,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.container)
+    className: aphrodite.css(styles$O.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft, styles$N.containerHeader)
+    className: aphrodite.css(styles$O.columnLeft, styles$O.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$O.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24997,28 +24999,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.containerHeader)
+    className: aphrodite.css(styles$O.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$N.containerTitle)
+    className: aphrodite.css(styles$O.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.containerHeader, styles$N.previewCollectionHeader)
+    className: aphrodite.css(styles$O.containerHeader, styles$O.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$N.containerTitle)
+    className: aphrodite.css(styles$O.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.container)
+    className: aphrodite.css(styles$O.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$N.row)
+    className: aphrodite.css(styles$O.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$O.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnRight)
+    className: aphrodite.css(styles$O.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$N.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$O.contentIndent)
   }, children));
 };
 
@@ -25138,11 +25140,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.row)
+    className: aphrodite.css(styles$O.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$O.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$N.sticky)
+    className: aphrodite.css(sticky && styles$O.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25150,9 +25152,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnRight)
+    className: aphrodite.css(styles$O.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$N.sticky)
+    className: aphrodite.css(sticky && styles$O.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25168,13 +25170,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.row)
+    className: aphrodite.css(styles$O.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$O.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$N.sticky)
+    className: aphrodite.css(sticky && styles$O.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$N.hintEditor),
+    className: aphrodite.css(styles$O.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25189,9 +25191,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnRight)
+    className: aphrodite.css(styles$O.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$N.sticky)
+    className: aphrodite.css(sticky && styles$O.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25208,9 +25210,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$O.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.tagsEditor)
+    className: aphrodite.css(styles$O.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25241,23 +25243,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$N.control)
+      className: aphrodite.css(styles$O.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$N.verticalFlip)
+      className: aphrodite.css(styles$O.verticalFlip)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$N.control)
+      className: aphrodite.css(styles$O.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
       key: "removeArrayElement",
-      className: aphrodite.css(styles$N.control)
+      className: aphrodite.css(styles$O.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25265,7 +25267,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$N.arrayElement, !elementIsLeaf && styles$N.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$O.arrayElement, !elementIsLeaf && styles$O.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25291,7 +25293,7 @@ const ObjectNodeContent = props => {
   // made sense to the shape's author is the order in which we'll iterate :)
   const children = Object.keys(shape.shape).map(subkey => /*#__PURE__*/React__namespace.createElement("div", {
     key: subkey,
-    className: aphrodite.css(styles$N.objectElement)
+    className: aphrodite.css(styles$O.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25461,7 +25463,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$N = aphrodite.StyleSheet.create({
+const styles$O = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25760,7 +25762,7 @@ class BlurInput extends React__namespace.Component {
 
 /* eslint-disable no-useless-escape */
 const {
-  InfoTip: InfoTip$k
+  InfoTip: InfoTip$l
 } = perseus.components;
 const DEFAULT_WIDTH = 400;
 const DEFAULT_HEIGHT = 400;
@@ -25951,7 +25953,7 @@ class CSProgramEditor extends React__namespace.Component {
           showEditor: value
         });
       }
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$l, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Show Buttons",
       checked: this.props.showButtons,
       onChange: value => {
@@ -25963,7 +25965,7 @@ class CSProgramEditor extends React__namespace.Component {
       name: "settings",
       pairs: this.props.settings,
       onChange: this._handleSettingsChange
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React__namespace.createElement("code", null, "Program.settings()"))));
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$l, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React__namespace.createElement("code", null, "Program.settings()"))));
   }
 }
 
@@ -26040,7 +26042,7 @@ class DeprecatedStandinEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$j,
+  InfoTip: InfoTip$k,
   InlineIcon: InlineIcon$5
 } = perseus.components;
 const {
@@ -26121,14 +26123,14 @@ class DropdownEditor extends React__namespace.Component {
       className: "perseus-widget-dropdown"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "dropdown-info"
-    }, "Dropdown", /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.createElement("p", null, "The drop down is useful for making inequalities in a custom format. We normally use the symbols ", "<", ",", " ", ">", ", \u2264, \u2265 (in that order) which you can copy into the choices. When possible, use the \"multiple choice\" answer type instead."))), /*#__PURE__*/React__namespace.createElement("div", {
+    }, "Dropdown", /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.createElement("p", null, "The drop down is useful for making inequalities in a custom format. We normally use the symbols ", "<", ",", " ", ">", ", \u2264, \u2265 (in that order) which you can copy into the choices. When possible, use the \"multiple choice\" answer type instead."))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "dropdown-placeholder"
     }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
       placeholder: "Placeholder value",
       value: this.props.placeholder,
       onChange: this.onPlaceholderChange
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.createElement("p", null, "This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."))), /*#__PURE__*/React__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.createElement("p", null, "This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "clearfix"
     }), /*#__PURE__*/React__namespace.createElement("ul", {
       className: "dropdown-choices"
@@ -26431,7 +26433,7 @@ const SortableItem = createReactClass__default["default"]({
     }
     return /*#__PURE__*/React__namespace.createElement("li", {
       draggable: this.props.draggable,
-      className: [dragState, aphrodite.css(styles$M.sortableListItem)].join(" "),
+      className: [dragState, aphrodite.css(styles$N.sortableListItem)].join(" "),
       onDragStart: this.handleDragStart,
       onDrop: this.handleDrop,
       onDragEnter: this.handleDragEnter,
@@ -26439,14 +26441,14 @@ const SortableItem = createReactClass__default["default"]({
     }, this.props.component);
   }
 });
-const styles$M = aphrodite.StyleSheet.create({
+const styles$N = aphrodite.StyleSheet.create({
   sortableListItem: {
     margin: "5px 0"
   }
 });
 
 const {
-  InfoTip: InfoTip$i
+  InfoTip: InfoTip$j
 } = perseus.components;
 
 // types for iterables
@@ -26699,28 +26701,28 @@ class ExpressionEditor extends React__namespace.Component {
       onChange: this.handleToggleDiv
     }));
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingSmall, null, "Global Options"), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.paddedY)
+      className: aphrodite.css(styles$M.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
       label: "Visible label",
       value: this.props.visibleLabel || "",
       onChange: this.change("visibleLabel")
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "Optional visible text; strongly encouraged to help learners using dictation software, but can be omitted if the surrounding content provides enough context."))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.paddedY)
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.createElement("p", null, "Optional visible text; strongly encouraged to help learners using dictation software, but can be omitted if the surrounding content provides enough context."))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$M.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
       label: "Aria label",
       value: this.props.ariaLabel || "",
       onChange: this.change("ariaLabel")
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "Label text that's read by screen readers. Highly recommend adding a label here to ensure your exercise is accessible. For more information on writting accessible labels, please see", " ", /*#__PURE__*/React__namespace.createElement("a", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.createElement("p", null, "Label text that's read by screen readers. Highly recommend adding a label here to ensure your exercise is accessible. For more information on writting accessible labels, please see", " ", /*#__PURE__*/React__namespace.createElement("a", {
       href: "https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",
       target: "_blank"
     }, "this article.")))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.paddedY)
+      className: aphrodite.css(styles$M.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
       label: "Function variables",
       value: this.state.functionsInternal,
       onChange: this.handleFunctions
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.paddedY)
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$M.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Use \xD7 instead of \u22C5 for multiplication",
       checked: this.props.times,
@@ -26729,8 +26731,8 @@ class ExpressionEditor extends React__namespace.Component {
           times: value
         });
       }
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.paddedY)
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$M.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingXSmall, null, "Button Sets"), buttonSetChoices), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingSmall, null, "Answers"), /*#__PURE__*/React__namespace.createElement("p", {
       style: {
         margin: "4px 0"
@@ -26797,18 +26799,18 @@ class AnswerOption extends React__namespace.Component {
       color: "destructive",
       light: true
     }, "Delete");
-    const answerStatusCss = aphrodite.css(styles$L.answerStatus, this.props.considered === "wrong" && styles$L.answerStatusWrong, this.props.considered === "correct" && styles$L.answerStatusCorrect, this.props.considered === "ungraded" && styles$L.answerStatusUngraded);
+    const answerStatusCss = aphrodite.css(styles$M.answerStatus, this.props.considered === "wrong" && styles$M.answerStatusWrong, this.props.considered === "correct" && styles$M.answerStatusCorrect, this.props.considered === "ungraded" && styles$M.answerStatusUngraded);
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.answerOption)
+      className: aphrodite.css(styles$M.answerOption)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.answerHandle)
+      className: aphrodite.css(styles$M.answerHandle)
     }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.answerBody)
+      className: aphrodite.css(styles$M.answerBody)
     }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       onClick: this.toggleConsidered,
       className: answerStatusCss
     }, this.props.considered), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(perseus.Expression, this.props.expressionProps))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.paddedY, styles$L.paddedX)
+      className: aphrodite.css(styles$M.paddedY, styles$M.paddedX)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Answer expression must have the same form.",
       checked: this.props.form,
@@ -26817,8 +26819,8 @@ class AnswerOption extends React__namespace.Component {
           form: value
         });
       }
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.paddedY, styles$L.paddedX)
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$M.paddedY, styles$M.paddedX)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Answer expression must be fully expanded and simplified.",
       checked: this.props.simplify,
@@ -26827,12 +26829,12 @@ class AnswerOption extends React__namespace.Component {
           simplify: value
         });
       }
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.buttonRow, styles$L.paddedY)
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$M.buttonRow, styles$M.paddedY)
     }, removeButton)));
   }
 }
-const styles$L = aphrodite.StyleSheet.create({
+const styles$M = aphrodite.StyleSheet.create({
   paddedX: {
     paddingLeft: wonderBlocksTokens.spacing.xSmall_8,
     paddingRight: wonderBlocksTokens.spacing.xSmall_8
@@ -26944,10 +26946,10 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", {
-      className: aphrodite.css(styles$K.title)
+      className: aphrodite.css(styles$L.title)
     }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$5, {
       value: this.props.title,
-      className: aphrodite.css(styles$K.input)
+      className: aphrodite.css(styles$L.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -26972,7 +26974,7 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$K.hintsTitle)
+      className: aphrodite.css(styles$L.hintsTitle)
     }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -26994,7 +26996,7 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconTrash$2), " Remove this hint")));
   }
 }
-const styles$K = aphrodite.StyleSheet.create({
+const styles$L = aphrodite.StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -27081,7 +27083,7 @@ const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.sl
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
 const {
   ButtonGroup: ButtonGroup$7,
-  InfoTip: InfoTip$h,
+  InfoTip: InfoTip$i,
   RangeInput: RangeInput$6
 } = perseus.components;
 const defaultBackgroundImage$3 = {
@@ -27545,7 +27547,7 @@ const GraphSettings = createReactClass__default["default"]({
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$h, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), ___default["default"].contains(this.props.editableSettings, "measure") && /*#__PURE__*/React__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), ___default["default"].contains(this.props.editableSettings, "measure") && /*#__PURE__*/React__namespace.createElement("div", {
       className: "misc-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
@@ -27591,7 +27593,7 @@ const GraphSettings = createReactClass__default["default"]({
 });
 
 const {
-  InfoTip: InfoTip$g,
+  InfoTip: InfoTip$h,
   MultiButtonGroup: MultiButtonGroup$1
 } = perseus.components;
 const {
@@ -27685,7 +27687,7 @@ class GrapherEditor extends React__namespace.Component {
         className: "perseus-error"
       }, this.props.graph.valid);
     }
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$g, null, /*#__PURE__*/React__namespace.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.")), " ", ": ", equationString), /*#__PURE__*/React__namespace.createElement(GraphSettings, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$h, null, /*#__PURE__*/React__namespace.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.")), " ", ": ", equationString), /*#__PURE__*/React__namespace.createElement(GraphSettings, {
       editableSettings: ["graph", "snap", "image"],
       box: getInteractiveBoxFromSizeClass$1(sizeClass),
       range: this.props.graph.range,
@@ -27945,7 +27947,7 @@ class IframeEditor extends React__namespace.Component {
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
 const {
-  InfoTip: InfoTip$f,
+  InfoTip: InfoTip$g,
   InlineIcon: InlineIcon$3,
   RangeInput: RangeInput$5
 } = perseus.components;
@@ -28146,7 +28148,7 @@ class ImageEditor extends React__namespace.Component {
       style: {
         width: "100%"
       }
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Dimensions:"), /*#__PURE__*/React__namespace.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Alt text:", /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React__namespace.createElement(Editor, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Dimensions:"), /*#__PURE__*/React__namespace.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Alt text:", /*#__PURE__*/React__namespace.createElement(InfoTip$g, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React__namespace.createElement(Editor, {
       apiOptions: this.props.apiOptions,
       content: this.props.alt,
       onChange: props => {
@@ -28170,7 +28172,7 @@ class ImageEditor extends React__namespace.Component {
     }, this.state.backgroundImageError);
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-image-editor"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Image url:", /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React__namespace.createElement(BlurInput, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Image url:", /*#__PURE__*/React__namespace.createElement(InfoTip$g, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React__namespace.createElement(BlurInput, {
       value: backgroundImage.url || "",
       style: {
         width: 332
@@ -28181,7 +28183,7 @@ class ImageEditor extends React__namespace.Component {
 }
 
 const {
-  InfoTip: InfoTip$e
+  InfoTip: InfoTip$f
 } = perseus.components;
 const answerTypes = {
   number: {
@@ -28274,7 +28276,7 @@ class InputNumberEditor extends React__namespace.Component {
       value: "optional"
     }, "will be accepted"), /*#__PURE__*/React__namespace.createElement("option", {
       value: "enforced"
-    }, "will be marked wrong"))), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.createElement("p", null, "Normally select \"will not be graded\". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and anything after)"), /*#__PURE__*/React__namespace.createElement("p", null, "Select \"will be accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React__namespace.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
+    }, "will be marked wrong"))), /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, /*#__PURE__*/React__namespace.createElement("p", null, "Normally select \"will not be graded\". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and anything after)"), /*#__PURE__*/React__namespace.createElement("p", null, "Select \"will be accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React__namespace.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox",
       checked: this.props.inexact,
       onChange: e => {
@@ -28310,7 +28312,7 @@ class InputNumberEditor extends React__namespace.Component {
         });
       },
       "aria-label": "Answer type"
-    }, answerTypeOptions), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.createElement("p", null, "Use the default \"Numbers\" unless the answer must be in a specific form (e.g., question is about converting decimals to fractions)."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Width", " ", /*#__PURE__*/React__namespace.createElement("select", {
+    }, answerTypeOptions), /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, /*#__PURE__*/React__namespace.createElement("p", null, "Use the default \"Numbers\" unless the answer must be in a specific form (e.g., question is about converting decimals to fractions)."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Width", " ", /*#__PURE__*/React__namespace.createElement("select", {
       value: this.props.size,
       onChange: e => {
         // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"small" | "normal" | undefined'.
@@ -28322,7 +28324,7 @@ class InputNumberEditor extends React__namespace.Component {
       value: "normal"
     }, "Normal (80px)"), /*#__PURE__*/React__namespace.createElement("option", {
       value: "small"
-    }, "Small (40px)"))), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
+    }, "Small (40px)"))), /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, /*#__PURE__*/React__namespace.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox",
       checked: this.props.rightAlign,
       onChange: e => {
@@ -28485,13 +28487,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$J.outerWrapper
+    style: styles$K.outerWrapper
   }, /*#__PURE__*/React__namespace.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$J = aphrodite.StyleSheet.create({
+const styles$K = aphrodite.StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29620,7 +29622,7 @@ const GraphPointsCountSelector = _ref => {
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$I.singleSelectShort
+    style: styles$J.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
@@ -29631,7 +29633,7 @@ const GraphPointsCountSelector = _ref => {
     label: "unlimited"
   })]);
 };
-const styles$I = aphrodite.StyleSheet.create({
+const styles$J = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29644,7 +29646,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select an answer type",
-    style: styles$H.singleSelectShort
+    style: styles$I.singleSelectShort
   }, props.showNoneOption && /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "none",
     label: "None"
@@ -29680,7 +29682,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$H = aphrodite.StyleSheet.create({
+const styles$I = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29696,11 +29698,11 @@ function Heading(_ref) {
     onToggle
   } = _ref;
   return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
-    style: [styles$G.container, !isCollapsible && styles$G.notClickable],
+    style: [styles$H.container, !isCollapsible && styles$H.notClickable],
     disabled: !isCollapsible,
     onClick: () => isCollapsible && onToggle?.(!isOpen)
   }, () => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$G.heading
+    style: styles$H.heading
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
     style: {
       fontSize: 14,
@@ -29710,7 +29712,7 @@ function Heading(_ref) {
     isExpanded: isOpen
   })));
 }
-const styles$G = aphrodite.StyleSheet.create({
+const styles$H = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.small_12,
     // NOTE(jeremy): This is the inverse of the @editorPadding CSS
@@ -29770,8 +29772,8 @@ function InteractiveGraphDescription(props) {
     isOpen: isOpen,
     onToggle: setIsOpen
   }), isOpen && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelXSmall, {
-    style: styles$F.caption
-  }, "Use these fields to describe the graph as a whole. These are used by screen readers to describe content to users who are visually impaired."), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
+    style: styles$G.caption
+  }, "Use these fields to describe the graph as a whole. These are used by screen readers to describe content to users who may be visually impaired."), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
     tag: "label"
   }, "Title", /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     value: ariaLabelValue,
@@ -29781,7 +29783,7 @@ function InteractiveGraphDescription(props) {
       // is an empty string.
       newValue || undefined
     }),
-    style: styles$F.spaceAbove
+    style: styles$G.spaceAbove
   })), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
@@ -29796,10 +29798,10 @@ function InteractiveGraphDescription(props) {
       // is an empty string.
       newValue || undefined
     }),
-    style: styles$F.spaceAbove
+    style: styles$G.spaceAbove
   }))));
 }
-const styles$F = aphrodite.StyleSheet.create({
+const styles$G = aphrodite.StyleSheet.create({
   caption: {
     color: wonderBlocksTokens.color.offBlack64,
     paddingTop: wonderBlocksTokens.spacing.xxSmall_6,
@@ -29819,16 +29821,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React__namespace.createElement("label", {
-    className: aphrodite.css(styles$E.label)
+    className: aphrodite.css(styles$F.label)
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$E.row, style]
+    style: [styles$F.row, style]
   }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$E.spaceEnd
+    style: styles$F.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$E.spaceStart
+    style: styles$F.spaceStart
   }, label)));
 };
-const styles$E = aphrodite.StyleSheet.create({
+const styles$F = aphrodite.StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29849,7 +29851,7 @@ const styles$E = aphrodite.StyleSheet.create({
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
 const {
   ButtonGroup: ButtonGroup$2,
-  InfoTip: InfoTip$d,
+  InfoTip: InfoTip$e,
   RangeInput: RangeInput$4
 } = perseus.components;
 const defaultBackgroundImage$1 = {
@@ -30247,10 +30249,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
       }
     }))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$D.resetSpaceTop
+      style: styles$E.resetSpaceTop
     }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
-      className: aphrodite.css(styles$D.backgroundUrlInput),
+      className: aphrodite.css(styles$E.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -30265,10 +30267,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$D.protractorSection
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$E.protractorSection
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$D.checkboxRow
+      style: styles$E.checkboxRow
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Show protractor",
       checked: this.props.showProtractor,
@@ -30277,7 +30279,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
           showProtractor: value
         });
       },
-      style: styles$D.resetSpaceTop
+      style: styles$E.resetSpaceTop
     })), this.props.showProtractor && /*#__PURE__*/React__namespace.createElement(Banner__default["default"], {
       layout: "floating",
       text: "The protractor is not accessible. Please consider an alternate approach.",
@@ -30285,7 +30287,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
     }))));
   }
 }
-const styles$D = aphrodite.StyleSheet.create({
+const styles$E = aphrodite.StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -30324,14 +30326,14 @@ const SegmentCountSelector = _ref => {
       const num = +newValue;
       onChange(num);
     },
-    style: styles$C.singleSelectShort
+    style: styles$D.singleSelectShort
   }, ___default["default"].range(1, 7).map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
     label: `${n} segment${n > 1 ? "s" : ""}`
   })));
 };
-const styles$C = aphrodite.StyleSheet.create({
+const styles$D = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -30356,17 +30358,17 @@ const LockedFigureSelect = props => {
     figureTypes.push("label");
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$B.container
+    style: styles$C.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$B.addElementSelect
+    style: styles$C.addElementSelect
   }, figureTypes.map(figureType => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
   }))));
 };
-const styles$B = aphrodite.StyleSheet.create({
+const styles$C = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8
   },
@@ -30483,18 +30485,18 @@ const AngleInput = props => {
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$A.row
+    style: styles$B.row
   }, "angle (degrees)", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(ScrolllessNumberTextField, {
     value: angleInput,
     onChange: handleAngleChange,
-    style: styles$A.textField
+    style: styles$B.textField
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }));
 };
-const styles$A = aphrodite.StyleSheet.create({
+const styles$B = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30543,30 +30545,30 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$z.row, style]
+    style: [styles$A.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$z.row
+    style: styles$A.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(ScrolllessNumberTextField, {
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
-    style: [styles$z.textField, error ? styles$z.errorField : undefined]
+    style: [styles$A.textField, error ? styles$A.errorField : undefined]
   })), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$z.row
+    style: styles$A.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(ScrolllessNumberTextField, {
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
-    style: [styles$z.textField, error ? styles$z.errorField : undefined]
+    style: [styles$A.textField, error ? styles$A.errorField : undefined]
   })));
 };
-const styles$z = aphrodite.StyleSheet.create({
+const styles$A = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30599,14 +30601,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.AccordionSection, {
     expanded: expanded,
     onToggle: onToggle,
-    style: [styles$y.container, containerStyle],
-    headerStyle: styles$y.accordionHeader,
+    style: [styles$z.container, containerStyle],
+    headerStyle: styles$z.accordionHeader,
     header: header
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$y.accordionPanel, panelStyle]
+    style: [styles$z.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$y = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     marginTop: wonderBlocksTokens.spacing.xSmall_8
@@ -30637,13 +30639,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$x.colorSwatch, {
+    style: [styles$y.colorSwatch, {
       border: `4px solid ${perseus.lockedFigureColors[color]}`,
       backgroundColor: filled ? perseus.lockedFigureColors[color] : wonderBlocksTokens.color.white
     }]
   });
 };
-const styles$x = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30662,10 +30664,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$w.row, style]
+    style: [styles$x.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$w.row
+    style: styles$x.row
   }, "color", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30684,7 +30686,7 @@ const ColorSelect = props => {
     })
   })))));
 };
-const styles$w = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30703,17 +30705,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$v.container, {
+    style: [styles$w.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$v.innerCircle, {
+    style: [styles$w.innerCircle, {
       backgroundColor: perseus.lockedFigureColors[color],
       opacity: fillStyle === "white" ? 0 : perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$v = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30739,7 +30741,7 @@ const LineStrokeSelect = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$u.lineStrokeSelect
+    style: styles$v.lineStrokeSelect
   }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30756,7 +30758,7 @@ const LineStrokeSelect = props => {
     label: "dashed"
   })));
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   lineStrokeSelect: {
     display: "flex",
     flexDirection: "row",
@@ -30766,6 +30768,66 @@ const styles$u = aphrodite.StyleSheet.create({
   }
 });
 
+const {
+  InfoTip: InfoTip$d
+} = perseus.components;
+function LockedFigureAria(props) {
+  const {
+    ariaLabel,
+    prePopulatedAriaLabel,
+    onChangeProps
+  } = props;
+  const id = React__namespace.useId();
+  const ariaLabelId = `aria-label-${id}`;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xSmall_8
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$u.row
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    tag: "label",
+    htmlFor: ariaLabelId
+  }, "Aria label"), /*#__PURE__*/React__namespace.createElement(Spring, null), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, "Aria label is used by screen readers to describe content to users who may be visually impaired. ", /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("br", null), "Populating this field will make it so that users can use a screen reader to navigate to this point and hear the description.", /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("br", null), "If you leave this field blank, the point will be hidden from screen readers. Users will not be able to navigate to this point using a screen reader.")), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxSmall_6
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelXSmall, {
+    style: styles$u.caption
+  }, "The figure is hidden from screen readers if this field is left blank."), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxSmall_6
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextArea, {
+    id: ariaLabelId,
+    value: ariaLabel ?? "",
+    onChange: newValue => {
+      onChangeProps({
+        // Save as undefined if the field is empty.
+        ariaLabel: newValue || undefined
+      });
+    },
+    placeholder: "Ex. Point at (x, y)",
+    rows: 1,
+    resizeType: "vertical"
+  }), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+    kind: "tertiary",
+    startIcon: pencilCircle__default["default"],
+    style: styles$u.button,
+    onClick: () => {
+      onChangeProps({
+        ariaLabel: prePopulatedAriaLabel
+      });
+    }
+  }, "Auto-generate"));
+}
+const styles$u = aphrodite.StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  button: {
+    alignSelf: "start"
+  },
+  caption: {
+    color: wonderBlocksTokens.color.offBlack64
+  }
+});
+
 /**
  * The part of a locked figure settings panel that contains actions
  * for this panel and its associated locked figure, including
@@ -30885,7 +30947,7 @@ function LockedLabelSettings(props) {
     })
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: styles$s.row
-  }, onMove && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
+  }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: newColor => {
       onChangeProps({
@@ -30895,7 +30957,7 @@ function LockedLabelSettings(props) {
     style: styles$s.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
-  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
     style: styles$s.row
   }, "size", /*#__PURE__*/React__namespace.createElement(Strut, {
@@ -31028,6 +31090,7 @@ const LockedEllipseSettings = props => {
     angle,
     color,
     labels,
+    ariaLabel,
     fillStyle,
     strokeStyle,
     expanded,
@@ -31036,6 +31099,31 @@ const LockedEllipseSettings = props => {
     onMove,
     onRemove
   } = props;
+  function getPrepopulatedAriaLabel() {
+    const isCircle = radius[0] === radius[1];
+    let str = "";
+    if (isCircle) {
+      str += `Circle with radius ${radius[0]}`;
+    } else {
+      str += `Ellipse with x radius ${radius[0]} and y radius ${radius[1]}`;
+    }
+    str += `, centered at (${center[0]}, ${center[1]})`;
+    if (!isCircle && angle !== 0) {
+      str += `, rotated by ${radianToDegree(angle)} degrees`;
+    }
+    if (labels && labels.length > 0) {
+      str += ", with label";
+      // Make it "with labels" instead of "with label" if there are
+      // multiple labels.
+      if (labels.length > 1) {
+        str += "s";
+      }
+
+      // Separate additional labels with commas.
+      str += ` ${labels.map(l => l.text).join(", ")}`;
+    }
+    return str;
+  }
   function handleCenterChange(newCoord) {
     const xOffset = newCoord[0] - center[0];
     const yOffset = newCoord[1] - center[1];
@@ -31150,7 +31238,23 @@ const LockedEllipseSettings = props => {
     onChange: value => onChangeProps({
       strokeStyle: value
     })
-  }), flags?.["mafs"]?.["locked-ellipse-labels"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
+  }), flags?.["mafs"]?.["locked-figures-aria"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$r.horizontalRule
+  }), /*#__PURE__*/React__namespace.createElement(LockedFigureAria, {
+    ariaLabel: ariaLabel,
+    prePopulatedAriaLabel: getPrepopulatedAriaLabel(),
+    onChangeProps: newProps => {
+      onChangeProps(newProps);
+    }
+  })), flags?.["mafs"]?.["locked-ellipse-labels"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxxSmall_4
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$r.horizontalRule
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, "Visible labels"), labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
     expanded: true,
     onChangeProps: newLabel => {
       handleLabelChange(newLabel, labelIndex);
@@ -31201,6 +31305,10 @@ const styles$r = aphrodite.StyleSheet.create({
   },
   labelContainer: {
     backgroundColor: wonderBlocksTokens.color.white
+  },
+  horizontalRule: {
+    height: 1,
+    backgroundColor: wonderBlocksTokens.color.offBlack16
   }
 });
 
@@ -31245,12 +31353,12 @@ const LockedFunctionSettings = props => {
     directionalAxis,
     domain,
     labels,
+    ariaLabel,
     onChangeProps,
     onMove,
     onRemove
   } = props;
   const equationPrefix = directionalAxis === "x" ? "y=" : "x=";
-  const domainRangeText = directionalAxis === "x" ? "domain" : "range";
   const lineLabel = `Function (${equationPrefix}${equation})`;
 
   // Tracking the string value of domain/range constraints to handle interim state of
@@ -31262,6 +31370,27 @@ const LockedFunctionSettings = props => {
     // "useEffect" used to maintain parity between domain/range constraints and their string representation.
     setDomainEntries([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
   }, [domain]);
+  function getPrepopulatedAriaLabel() {
+    let str = `Function with equation ${equationPrefix}${equation}`;
+
+    // Add the domain/range constraints to the aria label
+    // if they are not the default values.
+    if (domain && !(domain[0] === -Infinity && domain[1] === Infinity)) {
+      str += `, domain from ${domain[0]} to ${domain[1]}`;
+    }
+    if (labels && labels.length > 0) {
+      str += ", with label";
+      // Make it "with labels" instead of "with label" if there are
+      // multiple labels.
+      if (labels.length > 1) {
+        str += "s";
+      }
+
+      // Separate additional labels with commas.
+      str += ` ${labels.map(l => l.text).join(", ")}`;
+    }
+    return str;
+  }
 
   // Generic function for handling property changes (except for 'domain/range')
   function handlePropChange(property, newValue) {
@@ -31387,7 +31516,7 @@ const LockedFunctionSettings = props => {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
     style: [styles$p.dropdownLabel, styles$p.domainMin]
-  }, `${domainRangeText} min`, /*#__PURE__*/React__namespace.createElement(Strut, {
+  }, "domain min", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
@@ -31400,7 +31529,7 @@ const LockedFunctionSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    "aria-label": `${domainRangeText} max`,
+    "aria-label": "domain max",
     style: [styles$p.dropdownLabel, styles$p.domainMax]
   }, "max", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
@@ -31434,13 +31563,30 @@ const LockedFunctionSettings = props => {
   }))), exampleCategorySelected && /*#__PURE__*/React__namespace.createElement("ul", {
     className: aphrodite.css(styles$p.exampleContainer)
   }, exampleContent.map((example, index) => /*#__PURE__*/React__namespace.createElement(ExampleItem, {
+    key: index,
     category: exampleCategory,
     example: example,
     index: index,
     pasteEquationFn: handlePropChange
-  })))), flags?.["mafs"]?.["locked-function-labels"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+  })))), flags?.["mafs"]?.["locked-figures-aria"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: styles$p.horizontalRule
-  }), labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
+  }), /*#__PURE__*/React__namespace.createElement(LockedFigureAria, {
+    ariaLabel: ariaLabel,
+    prePopulatedAriaLabel: getPrepopulatedAriaLabel(),
+    onChangeProps: newProps => {
+      onChangeProps(newProps);
+    }
+  })), flags?.["mafs"]?.["locked-function-labels"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxxSmall_4
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$p.horizontalRule
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, "Visible labels"), labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({
+    key: labelIndex
+  }, label, {
     expanded: true,
     onChangeProps: newLabel => {
       handleLabelChange(newLabel, labelIndex);
@@ -31601,8 +31747,6 @@ const styles$p = aphrodite.StyleSheet.create({
     alignSelf: "start"
   },
   horizontalRule: {
-    marginTop: wonderBlocksTokens.spacing.small_12,
-    marginBottom: wonderBlocksTokens.spacing.xxxSmall_4,
     height: 1,
     backgroundColor: wonderBlocksTokens.color.offBlack16
   },
@@ -31648,6 +31792,7 @@ const LockedPointSettings = props => {
     color: pointColor,
     filled = true,
     labels,
+    ariaLabel,
     onChangeProps,
     onMove,
     onRemove,
@@ -31658,6 +31803,31 @@ const LockedPointSettings = props => {
     onToggle
   } = props;
   const isDefiningPoint = !onMove && !onRemove;
+
+  /**
+   * Get a prepopulated aria label for the point.
+   *
+   * If the point has no labels, the aria label will just be
+   * "Point at (x, y)".
+   *
+   * If the point has labels, the aria label will be
+   * "Point at (x, y) with label1, label2, label3".
+   */
+  function getPrepopulatedAriaLabel() {
+    let str = `Point at (${coord[0]}, ${coord[1]})`;
+    if (labels && labels.length > 0) {
+      str += " with label";
+      // Make it "with labels" instead of "with label" if there are
+      // multiple labels.
+      if (labels.length > 1) {
+        str += "s";
+      }
+
+      // Separate additional labels with commas.
+      str += ` ${labels.map(l => l.text).join(", ")}`;
+    }
+    return str;
+  }
   function handleColorChange(newValue) {
     const newProps = {
       color: newValue
@@ -31747,7 +31917,23 @@ const LockedPointSettings = props => {
         filled: !newValue
       });
     }
-  })), (!isDefiningPoint && flags?.["mafs"]?.["locked-point-labels"] || isDefiningPoint && flags?.["mafs"]?.["locked-line-labels"]) && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
+  })), !isDefiningPoint && flags?.["mafs"]?.["locked-figures-aria"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$n.horizontalRule
+  }), /*#__PURE__*/React__namespace.createElement(LockedFigureAria, {
+    ariaLabel: ariaLabel,
+    prePopulatedAriaLabel: getPrepopulatedAriaLabel(),
+    onChangeProps: newProps => {
+      onChangeProps(newProps);
+    }
+  })), (!isDefiningPoint && flags?.["mafs"]?.["locked-point-labels"] || isDefiningPoint && flags?.["mafs"]?.["locked-line-labels"]) && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxxSmall_4
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$n.horizontalRule
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, "Visible labels"), labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
     containerStyle: !isDefiningPoint && styles$n.lockedPointLabelContainer,
     expanded: true,
     onChangeProps: newLabel => {
@@ -31809,6 +31995,10 @@ const styles$n = aphrodite.StyleSheet.create({
   },
   addButton: {
     alignSelf: "start"
+  },
+  horizontalRule: {
+    height: 1,
+    backgroundColor: wonderBlocksTokens.color.offBlack16
   }
 });
 
@@ -31823,6 +32013,7 @@ const LockedLineSettings = props => {
     showPoint1,
     showPoint2,
     labels,
+    ariaLabel,
     onChangeProps,
     onMove,
     onRemove
@@ -31834,6 +32025,21 @@ const LockedLineSettings = props => {
 
   // Check if the line has length 0.
   const isInvalid = kmath.vector.equal(point1.coord, point2.coord);
+  function getPrepopulatedAriaLabel() {
+    let str = `${capitalizeKind} from (${point1.coord[0]}, ${point1.coord[1]}) to (${point2.coord[0]}, ${point2.coord[1]})`;
+    if (labels && labels.length > 0) {
+      str += " with label";
+      // Make it "with labels" instead of "with label" if there are
+      // multiple labels.
+      if (labels.length > 1) {
+        str += "s";
+      }
+
+      // Separate additional labels with commas.
+      str += ` ${labels.map(l => l.text).join(", ")}`;
+    }
+    return str;
+  }
   function handleChangePoint(newPointProps, index) {
     const newPoints = [...points];
     newPoints[index] = {
@@ -31973,9 +32179,23 @@ const LockedLineSettings = props => {
       showPoint2: newValue
     }),
     onChangeProps: newProps => handleChangePoint(newProps, 1)
-  })), flags?.["mafs"]?.["locked-line-labels"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+  })), flags?.["mafs"]?.["locked-figures-aria"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: styles$m.horizontalRule
-  }), labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
+  }), /*#__PURE__*/React__namespace.createElement(LockedFigureAria, {
+    ariaLabel: ariaLabel,
+    prePopulatedAriaLabel: getPrepopulatedAriaLabel(),
+    onChangeProps: newProps => {
+      onChangeProps(newProps);
+    }
+  })), flags?.["mafs"]?.["locked-line-labels"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxxSmall_4
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$m.horizontalRule
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, "Visible labels"), labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
     expanded: true,
     onChangeProps: newLabel => {
       handleLabelChange(newLabel, labelIndex);
@@ -32025,8 +32245,6 @@ const styles$m = aphrodite.StyleSheet.create({
     alignSelf: "start"
   },
   horizontalRule: {
-    marginTop: wonderBlocksTokens.spacing.small_12,
-    marginBottom: wonderBlocksTokens.spacing.xxxSmall_4,
     height: 1,
     backgroundColor: wonderBlocksTokens.color.offBlack16
   },
@@ -32072,58 +32290,127 @@ const styles$l = aphrodite.StyleSheet.create({
 
 const LockedPolygonSettings = props => {
   const {
+    flags,
     points,
     color,
     showVertices,
     fillStyle,
     strokeStyle,
+    labels,
+    ariaLabel,
     expanded,
     onToggle,
     onChangeProps,
     onMove,
     onRemove
   } = props;
+  function getPrepopulatedAriaLabel() {
+    let str = `Polygon with ${points.length} sides, vertices at `;
+
+    // Add the coordinates of each point to the aria label
+    str += points.map(_ref => {
+      let [x, y] = _ref;
+      return `(${x}, ${y})`;
+    }).join(", ");
+    if (labels && labels.length > 0) {
+      str += ", with label";
+      // Make it "with labels" instead of "with label" if there are
+      // multiple labels.
+      if (labels.length > 1) {
+        str += "s";
+      }
+
+      // Separate additional labels with commas.
+      str += ` ${labels.map(l => l.text).join(", ")}`;
+    }
+    return str;
+  }
   function handleColorChange(newValue) {
-    onChangeProps({
+    const newProps = {
       color: newValue
-    });
+    };
+
+    // Update the color of the all labels to match the point
+    newProps.labels = labels?.map(label => ({
+      ...label,
+      color: newValue
+    }));
+    onChangeProps(newProps);
   }
   function handlePolygonMove(movement) {
     switch (movement) {
       case "up":
         onChangeProps({
-          points: points.map(_ref => {
-            let [x, y] = _ref;
+          points: points.map(_ref2 => {
+            let [x, y] = _ref2;
             return [x, y + 1];
-          })
+          }),
+          labels: labels?.map(label => ({
+            ...label,
+            coord: [label.coord[0], label.coord[1] + 1]
+          }))
         });
         break;
       case "down":
         onChangeProps({
-          points: points.map(_ref2 => {
-            let [x, y] = _ref2;
+          points: points.map(_ref3 => {
+            let [x, y] = _ref3;
             return [x, y - 1];
-          })
+          }),
+          labels: labels?.map(label => ({
+            ...label,
+            coord: [label.coord[0], label.coord[1] - 1]
+          }))
         });
         break;
       case "left":
         onChangeProps({
-          points: points.map(_ref3 => {
-            let [x, y] = _ref3;
+          points: points.map(_ref4 => {
+            let [x, y] = _ref4;
             return [x - 1, y];
-          })
+          }),
+          labels: labels?.map(label => ({
+            ...label,
+            coord: [label.coord[0] - 1, label.coord[1]]
+          }))
         });
         break;
       case "right":
         onChangeProps({
-          points: points.map(_ref4 => {
-            let [x, y] = _ref4;
+          points: points.map(_ref5 => {
+            let [x, y] = _ref5;
             return [x + 1, y];
-          })
+          }),
+          labels: labels?.map(label => ({
+            ...label,
+            coord: [label.coord[0] + 1, label.coord[1]]
+          }))
         });
         break;
     }
   }
+  function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = [...labels];
+    updatedLabels[labelIndex] = {
+      ...labels[labelIndex],
+      ...updatedLabel
+    };
+    onChangeProps({
+      labels: updatedLabels
+    });
+  }
+  function handleLabelRemove(labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = labels.filter((_, index) => index !== labelIndex);
+    onChangeProps({
+      labels: updatedLabels
+    });
+  }
   return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
@@ -32252,7 +32539,50 @@ const LockedPolygonSettings = props => {
     size: "small",
     icon: arrowFatRight__default["default"],
     onClick: () => handlePolygonMove("right")
-  }))))), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
+  }))))), flags?.["mafs"]?.["locked-figures-aria"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$k.horizontalRule
+  }), /*#__PURE__*/React__namespace.createElement(LockedFigureAria, {
+    ariaLabel: ariaLabel,
+    prePopulatedAriaLabel: getPrepopulatedAriaLabel(),
+    onChangeProps: newProps => {
+      onChangeProps(newProps);
+    }
+  })), flags?.["mafs"]?.["locked-polygon-labels"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxxSmall_4
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$k.horizontalRule
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, "Visible labels"), labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
+    expanded: true,
+    onChangeProps: newLabel => {
+      handleLabelChange(newLabel, labelIndex);
+    },
+    onRemove: () => {
+      handleLabelRemove(labelIndex);
+    },
+    containerStyle: styles$k.labelContainer
+  }))), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+    kind: "tertiary",
+    startIcon: plusCircle__default["default"],
+    onClick: () => {
+      const newLabel = {
+        ...getDefaultFigureForType("label"),
+        coord: [points[0][0],
+        // Additional vertical offset for each
+        // label so they don't overlap.
+        points[0][1] - (labels?.length ?? 0)],
+        // Default to the same color as the ellipse
+        color: color
+      };
+      onChangeProps({
+        labels: [...(labels ?? []), newLabel]
+      });
+    },
+    style: styles$k.addButton
+  }, "Add visible label")), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
@@ -32291,6 +32621,17 @@ const styles$k = aphrodite.StyleSheet.create({
   truncatedWidth: {
     // Allow truncation, stop bleeding over the edge.
     minWidth: 0
+  },
+  // Styles for the visible labels section
+  addButton: {
+    alignSelf: "start"
+  },
+  labelContainer: {
+    backgroundColor: wonderBlocksTokens.color.white
+  },
+  horizontalRule: {
+    height: 1,
+    backgroundColor: wonderBlocksTokens.color.offBlack16
   }
 });
 
@@ -32301,6 +32642,7 @@ const LockedVectorSettings = props => {
     points,
     color: lineColor,
     labels,
+    ariaLabel,
     onChangeProps,
     onMove,
     onRemove
@@ -32310,6 +32652,21 @@ const LockedVectorSettings = props => {
 
   // Check if the line has length 0.
   const isInvalid = kmath.vector.equal(tail, tip);
+  function getPrepopulatedAriaLabel() {
+    let str = `Vector from (${tail[0]}, ${tail[1]}) to (${tip[0]}, ${tip[1]})`;
+    if (labels && labels.length > 0) {
+      str += " with label";
+      // Make it "with labels" instead of "with label" if there are
+      // multiple labels.
+      if (labels.length > 1) {
+        str += "s";
+      }
+
+      // Separate additional labels with commas.
+      str += ` ${labels.map(l => l.text).join(", ")}`;
+    }
+    return str;
+  }
   function handleChangePoint(newCoord, index) {
     if (typeof newCoord !== "undefined") {
       const newPoints = [...points];
@@ -32409,9 +32766,23 @@ const LockedVectorSettings = props => {
     onChange: newProps => {
       handleChangePoint(newProps, 1);
     }
-  })), flags?.["mafs"]?.["locked-vector-labels"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+  })), flags?.["mafs"]?.["locked-figures-aria"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$j.horizontalRule
+  }), /*#__PURE__*/React__namespace.createElement(LockedFigureAria, {
+    ariaLabel: ariaLabel,
+    prePopulatedAriaLabel: getPrepopulatedAriaLabel(),
+    onChangeProps: newProps => {
+      onChangeProps(newProps);
+    }
+  })), flags?.["mafs"]?.["locked-vector-labels"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxxSmall_4
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: styles$j.horizontalRule
-  }), labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, "Visible labels"), labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
     expanded: true,
     onChangeProps: newLabel => {
       handleLabelChange(newLabel, labelIndex);
@@ -32468,8 +32839,6 @@ const styles$j = aphrodite.StyleSheet.create({
     alignSelf: "start"
   },
   horizontalRule: {
-    marginTop: wonderBlocksTokens.spacing.small_12,
-    marginBottom: wonderBlocksTokens.spacing.xxxSmall_4,
     height: 1,
     backgroundColor: wonderBlocksTokens.color.offBlack16
   },