feat(LEMS-2484): add aria labels to sinusoid function graph

.changeset/olive-shoes-cross.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+add aria labels for sinusoid function graphs

packages/perseus/src/strings.ts

@@ -258,6 +258,9 @@ export type PerseusStrings = {
         endingSideX: string;
         endingSideY: string;
     }) => string;
+    srSinusoidGraphAriaLabel: string;
+    srSinusoidExtremumPoint: ({x, y}: {x: string; y: string}) => string;
+    srSinusoidMidlineIntersection: ({x, y}: {x: string; y: string}) => string;
     // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -478,6 +481,9 @@ export const strings: {
     srAngleGraphAriaLabel: "An angle on a coordinate plane.",
     srAngleGraphAriaDescription:
         "The angle measure is %(angleMeasure)s degrees with a vertex at %(vertexX)s comma %(vertexY)s, a point on the starting side at %(startingSideX)s comma %(startingSideY)s and a point on the ending side at %(endingSideX)s comma %(endingSideY)s",
+    srSinusoidGraphAriaLabel: "A sinusoid function on a coordinate plane.",
+    srSinusoidExtremumPoint: "Extremum Point at %(x)s comma %(y)s.",
+    srSinusoidMidlineIntersection: "Midline Intersection at %(x)s comma %(y)s.",
     // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -695,5 +701,9 @@ export const mockStrings: PerseusStrings = {
         endingSideY,
     }) =>
         `The angle measure is ${angleMeasure} degrees with a vertex at ${vertexX} comma ${vertexY}, a point on the starting side at ${startingSideX} comma ${startingSideY} and a point on the ending side at ${endingSideX} comma ${endingSideY}.`,
+    srSinusoidGraphAriaLabel: "A sinusoid function on a coordinate plane.",
+    srSinusoidExtremumPoint: ({x, y}) => `Extremum Point at ${x} comma ${y}.`,
+    srSinusoidMidlineIntersection: ({x, y}) =>
+        `Midline Intersection at ${x} comma ${y}.`,
     // The above strings are used for interactive graph SR descriptions.
 };

packages/perseus/src/widgets/interactive-graphs/graphs/sinusoid.tsx

@@ -1,11 +1,13 @@
 import {color} from "@khanacademy/wonder-blocks-tokens";
-import {Plot} from "mafs";
+import {Plot, type vec} from "mafs";
 import * as React from "react";
 
+import {usePerseusI18n} from "../../../components/i18n-context";
 import {X, Y} from "../math";
 import {actions} from "../reducer/interactive-graph-action";
 
 import {MovablePoint} from "./components/movable-point";
+import {srFormatNumber} from "./screenreader-text";
 
 import type {Coord} from "../../../interactive2/types";
 import type {
@@ -59,23 +61,40 @@ function SinusoidGraph(props: SinusoidGraphProps) {
         coeffRef.current = coeffs;
     }
 
+    const {strings, locale} = usePerseusI18n();
+
+    function getMoveablePointAriaLabel(
+        index: number,
+        coordinate: vec.Vector2,
+    ): string {
+        const coordsObj = {
+            x: srFormatNumber(coordinate[0], locale),
+            y: srFormatNumber(coordinate[1], locale),
+        };
+
+        return index === 1
+            ? strings.srSinusoidExtremumPoint(coordsObj)
+            : strings.srSinusoidMidlineIntersection(coordsObj);
+    }
+
     return (
-        <>
+        <g aria-label={strings.srSinusoidGraphAriaLabel}>
             <Plot.OfX
                 y={(x) => computeSine(x, coeffRef.current)}
                 color={color.blue}
             />
             {coords.map((coord, i) => (
                 <MovablePoint
                     key={"point-" + i}
+                    ariaLabel={getMoveablePointAriaLabel(i, coord)}
                     point={coord}
                     sequenceNumber={i + 1}
                     onMove={(destination) =>
                         dispatch(actions.sinusoid.movePoint(i, destination))
                     }
                 />
             ))}
-        </>
+        </g>
     );
 }
 

packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx

@@ -359,8 +359,8 @@ describe("MafsGraph", () => {
             />,
         );
 
-        expectLabelInDoc("Point 1 at -1 comma 1");
-        expectLabelInDoc("Point 2 at 0 comma 0");
+        expectLabelInDoc("Midline Intersection at -1 comma 1.");
+        expectLabelInDoc("Extremum Point at 0 comma 0.");
     });
 
     it("renders ARIA labels for each point (point)", () => {