@khanacademy/perseus 49.0.2 → 49.0.3

package/dist/es/index.js

@@ -281,7 +281,29 @@ const mockStrings = {
     point3Y,
     point4X,
     point4Y
-  }) => `Points on the circle at ${point1X} comma ${point1Y}, ${point2X} comma ${point2Y}, ${point3X} comma ${point3Y}, ${point4X} comma ${point4Y}.`
+  }) => `Points on the circle at ${point1X} comma ${point1Y}, ${point2X} comma ${point2Y}, ${point3X} comma ${point3Y}, ${point4X} comma ${point4Y}.`,
+  srLinearGraph: "A line on a coordinate plane.",
+  srLinearGraphPoints: ({
+    point1X,
+    point1Y,
+    point2X,
+    point2Y
+  }) => `The line has two points, point 1 at ${point1X} comma ${point1Y} and point 2 at ${point2X} comma ${point2Y}.`,
+  srLinearGraphSlopeIncreasing: "Its slope increases from left to right.",
+  srLinearGraphSlopeDecreasing: "Its slope decreases from left to right.",
+  srLinearGraphSlopeHorizontal: "Its slope is zero.",
+  srLinearGraphSlopeVertical: "Its slope is undefined.",
+  srLinearGraphXOnlyIntercept: ({
+    xIntercept
+  }) => `The line crosses the X-axis at ${xIntercept} comma 0.`,
+  srLinearGraphYOnlyIntercept: ({
+    yIntercept
+  }) => `The line crosses the Y-axis at 0 comma ${yIntercept}.`,
+  srLinearGraphBothIntercepts: ({
+    xIntercept,
+    yIntercept
+  }) => `The line crosses the X-axis at ${xIntercept} comma 0 and the Y-axis at 0 comma ${yIntercept}.`,
+  srLinearGraphOriginIntercept: "The line crosses the x and y axes at the graph's origin."
   // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -27376,11 +27398,21 @@ class Dropdown extends React.Component {
       key: "placeholder",
       value: "0",
       disabled: true,
-      label: this.props.placeholder || " "
+      label: /*#__PURE__*/React.createElement(Renderer, {
+        content: this.props.placeholder,
+        strings: this.context.strings,
+        inline: true
+      }),
+      labelAsText: this.props.placeholder
     }), ...this.props.choices.map((choice, i) => /*#__PURE__*/React.createElement(OptionItem, {
       key: String(i + 1),
       value: String(i + 1),
-      label: choice
+      label: /*#__PURE__*/React.createElement(Renderer, {
+        content: choice,
+        strings: this.context.strings,
+        inline: true
+      }),
+      labelAsText: choice
     }))];
     return /*#__PURE__*/React.createElement(Id, null, dropdownId => /*#__PURE__*/React.createElement(View
     // NOTE(jared): These are required to prevent weird behavior
@@ -27407,7 +27439,8 @@ class Dropdown extends React.Component {
       // all dropdowns.
       // See https://khanacademy.atlassian.net/browse/WB-1671
       ,
-      role: "combobox"
+      role: "combobox",
+      showOpenerLabelAsText: false
     }, children)));
   }
 }
@@ -33817,6 +33850,8 @@ const noop$1 = () => {};
 
 const MovableLine = props => {
   const {
+    ariaLabels,
+    ariaDescribedBy,
     onMoveLine = () => {},
     onMovePoint = () => {},
     color,
@@ -33839,6 +33874,8 @@ const MovableLine = props => {
     visiblePoint: visiblePoint1,
     focusableHandle: focusableHandle1
   } = useControlPoint({
+    ariaLabel: ariaLabels == null ? void 0 : ariaLabels.point1AriaLabel,
+    ariaDescribedBy: ariaDescribedBy,
     point: start,
     sequenceNumber: 1,
     color,
@@ -33848,6 +33885,8 @@ const MovableLine = props => {
     visiblePoint: visiblePoint2,
     focusableHandle: focusableHandle2
   } = useControlPoint({
+    ariaLabel: ariaLabels == null ? void 0 : ariaLabels.point2AriaLabel,
+    ariaDescribedBy: ariaDescribedBy,
     point: end,
     sequenceNumber: 2,
     color,
@@ -34387,12 +34426,67 @@ const LinearGraph = (props, key) => {
   const {
     coords: line
   } = props.graphState;
+  const {
+    strings,
+    locale
+  } = usePerseusI18n();
+  const id = React.useId();
+  const pointsDescriptionId = id + "-points";
+  const interceptDescriptionId = id + "-intercept";
+  const slopeDescriptionId = id + "-slope";
+
+  // Aria label strings
+  const linearGraphPointsDescription = strings.srLinearGraphPoints({
+    point1X: srFormatNumber(line[0][0], locale),
+    point1Y: srFormatNumber(line[0][1], locale),
+    point2X: srFormatNumber(line[1][0], locale),
+    point2Y: srFormatNumber(line[1][1], locale)
+  });
+
+  // Slope description
+  const slope = (line[1][1] - line[0][1]) / (line[1][0] - line[0][0]);
+  let slopeString = "";
+  if (slope === Infinity || slope === -Infinity) {
+    slopeString = strings.srLinearGraphSlopeVertical;
+  } else if (slope === 0) {
+    slopeString = strings.srLinearGraphSlopeHorizontal;
+  } else {
+    slopeString = slope > 0 ? strings.srLinearGraphSlopeIncreasing : strings.srLinearGraphSlopeDecreasing;
+  }
+
+  // Intersection description
+  const xIntercept = (0 - line[0][1]) / slope + line[0][0];
+  const yIntercept = line[0][1] - slope * line[0][0];
+  const hasXIntercept = xIntercept !== Infinity && xIntercept !== -Infinity;
+  const hasYIntercept = yIntercept !== Infinity && yIntercept !== -Infinity;
+  let interceptString;
+  if (hasXIntercept && hasYIntercept) {
+    // Describe both intercepts in the same sentence.
+    interceptString = xIntercept === 0 && yIntercept === 0 ? strings.srLinearGraphOriginIntercept : strings.srLinearGraphBothIntercepts({
+      xIntercept: srFormatNumber(xIntercept, locale),
+      yIntercept: srFormatNumber(yIntercept, locale)
+    });
+  } else {
+    // Describe only one intercept.
+    interceptString = hasXIntercept ? strings.srLinearGraphXOnlyIntercept({
+      xIntercept: srFormatNumber(xIntercept, locale)
+    }) : strings.srLinearGraphYOnlyIntercept({
+      yIntercept: srFormatNumber(yIntercept, locale)
+    });
+  }
 
   // Linear graphs only have one line
   // (LEMS-2050): Update the reducer so that we have a separate action for moving one line
   // and another action for moving multiple lines
-  return /*#__PURE__*/React.createElement(MovableLine, {
+  return /*#__PURE__*/React.createElement("g", {
+    className: "linear-graph-container"
+    // Outer line minimal description
+    ,
+    "aria-label": strings.srLinearGraph,
+    "aria-describedby": `${pointsDescriptionId} ${interceptDescriptionId} ${slopeDescriptionId}`
+  }, /*#__PURE__*/React.createElement(MovableLine, {
     key: 0,
+    ariaDescribedBy: `${interceptDescriptionId} ${slopeDescriptionId}`,
     points: line,
     onMoveLine: delta => {
       dispatch(actions.linear.moveLine(delta));
@@ -34403,7 +34497,22 @@ const LinearGraph = (props, key) => {
     },
     onMovePoint: (endpointIndex, destination) => dispatch(actions.linear.movePoint(endpointIndex, destination)),
     color: "var(--movable-line-stroke-color)"
-  });
+  }), /*#__PURE__*/React.createElement("g", {
+    id: pointsDescriptionId,
+    style: {
+      display: "hidden"
+    }
+  }, linearGraphPointsDescription), /*#__PURE__*/React.createElement("g", {
+    id: interceptDescriptionId,
+    style: {
+      display: "hidden"
+    }
+  }, interceptString), /*#__PURE__*/React.createElement("g", {
+    id: slopeDescriptionId,
+    style: {
+      display: "hidden"
+    }
+  }, slopeString));
 };
 
 function renderLinearSystemGraph(state, dispatch) {
@@ -45322,7 +45431,7 @@ const init = function init() {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "49.0.2";
+const libVersion = "49.0.3";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {