Merge branch 'sr-ray' into sr-linear-interactive-elements

packages/perseus/src/strings.ts

@@ -283,19 +283,6 @@ export type PerseusStrings = {
         x: string;
         y: string;
     }): string;
-    srLinearSystemGrabHandle: ({
-        lineNumber,
-        point1X,
-        point1Y,
-        point2X,
-        point2Y,
-    }: {
-        lineNumber: number;
-        point1X: string;
-        point1Y: string;
-        point2X: string;
-        point2Y: string;
-    }) => string;
     srRayGraph: string;
     srRayPoints: ({
         point1X,
@@ -546,15 +533,13 @@ export const strings: {
         "Line %(lineNumber)s has two points, point 1 at %(point1X)s comma %(point1Y)s and point 2 at %(point2X)s comma %(point2Y)s.",
     srLinearSystemPoint:
         "Point %(pointSequence)s on line %(lineNumber)s at %(x)s comma %(y)s.",
-    srLinearSystemGrabHandle:
-        "Line %(lineNumber)s from %(point1X)s comma %(point1Y)s to %(point2X)s comma %(point2Y)s.",
     srRayGraph: "A ray on a coordinate plane.",
     srRayPoints:
-        "The endpoint is at %(point1X)s comma %(point1Y)s and the terminal point is at %(point2X)s comma %(point2Y)s.",
+        "The endpoint is at %(point1X)s comma %(point1Y)s and the ray goes through point %(point2X)s comma %(point2Y)s.",
     srRayGrabHandle:
-        "Ray from endpoint %(point1X)s comma %(point1Y)s to terminal point %(point2X)s comma %(point2Y)s.",
+        "Ray with endpoint %(point1X)s comma %(point1Y)s going through point %(point2X)s comma %(point2Y)s.",
     srRayEndpoint: "Endpoint at %(point1X)s comma %(point1Y)s.",
-    srRayTerminalPoint: "Terminal point at %(point2X)s comma %(point2Y)s.",
+    srRayTerminalPoint: "Through point at %(point2X)s comma %(point2Y)s.",
     // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -777,20 +762,12 @@ export const mockStrings: PerseusStrings = {
         `Line ${lineNumber} has two points, point 1 at ${point1X} comma ${point1Y} and point 2 at ${point2X} comma ${point2Y}.`,
     srLinearSystemPoint: ({lineNumber, pointSequence, x, y}) =>
         `Point ${pointSequence} on line ${lineNumber} at ${x} comma ${y}.`,
-    srLinearSystemGrabHandle: ({
-        lineNumber,
-        point1X,
-        point1Y,
-        point2X,
-        point2Y,
-    }) =>
-        `Line ${lineNumber} from ${point1X} comma ${point1Y} to ${point2X} comma ${point2Y}.`,
     srRayGraph: "A ray on a coordinate plane.",
     srRayPoints: ({point1X, point1Y, point2X, point2Y}) =>
-        `The endpoint is at ${point1X} comma ${point1Y} and the terminal point is at ${point2X} comma ${point2Y}.`,
+        `The endpoint is at ${point1X} comma ${point1Y} and the ray goes through point ${point2X} comma ${point2Y}.`,
     srRayGrabHandle: ({point1X, point1Y, point2X, point2Y}) =>
-        `Ray from endpoint ${point1X} comma ${point1Y} to terminal point ${point2X} comma ${point2Y}.`,
+        `Ray with endpoint ${point1X} comma ${point1Y} going through point ${point2X} comma ${point2Y}.`,
     srRayEndpoint: ({x, y}) => `Endpoint at ${x} comma ${y}.`,
-    srRayTerminalPoint: ({x, y}) => `Terminal point at ${x} comma ${y}.`,
+    srRayTerminalPoint: ({x, y}) => `Through point at ${x} comma ${y}.`,
     // The above strings are used for interactive graph SR descriptions.
 };

packages/perseus/src/widgets/interactive-graphs/graphs/linear-system.test.tsx

@@ -177,7 +177,7 @@ describe("Linear System graph screen reader", () => {
             );
             expect(grabHandle).toHaveAttribute(
                 "aria-label",
-                `Line ${lineNumber} from -2 comma 3 to 3 comma 3.`,
+                `The line crosses the Y-axis at 0 comma 3. Its slope is zero.`,
             );
             expect(point2).toHaveAttribute(
                 "aria-label",

packages/perseus/src/widgets/interactive-graphs/graphs/linear-system.tsx

@@ -90,13 +90,7 @@ const LinearSystemGraph = (props: LinearSystemGraphProps) => {
                             x: srFormatNumber(line[1][0], locale),
                             y: srFormatNumber(line[1][1], locale),
                         }),
-                        grabHandleAriaLabel: strings.srLinearSystemGrabHandle({
-                            lineNumber: i + 1,
-                            point1X: srFormatNumber(line[0][0], locale),
-                            point1Y: srFormatNumber(line[0][1], locale),
-                            point2X: srFormatNumber(line[1][0], locale),
-                            point2Y: srFormatNumber(line[1][1], locale),
-                        }),
+                        grabHandleAriaLabel: `${linesAriaInfo[i].interceptDescription} ${linesAriaInfo[i].slopeDescription}`,
                     }}
                     ariaDescribedBy={`${linesAriaInfo[i].interceptDescriptionId} ${linesAriaInfo[i].slopeDescriptionId}`}
                     onMoveLine={(delta: vec.Vector2) => {

packages/perseus/src/widgets/interactive-graphs/graphs/ray.test.tsx

@@ -54,15 +54,15 @@ describe("Linear graph screen reader", () => {
         // Assert
         expect(linearGraph).toBeInTheDocument();
         expect(linearGraph).toHaveAccessibleDescription(
-            "The endpoint is at -5 comma 5 and the terminal point is at 5 comma 5.",
+            "The endpoint is at -5 comma 5 and the ray goes through point 5 comma 5.",
         );
     });
 
     test.each`
         element         | index | expectedValue
         ${"point1"}     | ${0}  | ${"Endpoint at -5 comma 5."}
-        ${"grabHandle"} | ${1}  | ${"Ray from endpoint -5 comma 5 to terminal point 5 comma 5."}
-        ${"point2"}     | ${2}  | ${"Terminal point at 5 comma 5."}
+        ${"grabHandle"} | ${1}  | ${"Ray with endpoint -5 comma 5 going through point 5 comma 5."}
+        ${"point2"}     | ${2}  | ${"Through point at 5 comma 5."}
     `(
         "should have aria label for $element on the line",
         ({index, expectedValue}) => {
@@ -88,7 +88,7 @@ describe("Linear graph screen reader", () => {
 
         // Assert
         expect(linearGraph).toHaveTextContent(
-            "The endpoint is at -5 comma 5 and the terminal point is at 5 comma 5.",
+            "The endpoint is at -5 comma 5 and the ray goes through point 5 comma 5.",
         );
     });
 
@@ -118,11 +118,11 @@ describe("Linear graph screen reader", () => {
         expect(point1).toHaveAttribute("aria-label", "Endpoint at -2 comma 3.");
         expect(grabHandle).toHaveAttribute(
             "aria-label",
-            "Ray from endpoint -2 comma 3 to terminal point 3 comma 3.",
+            "Ray with endpoint -2 comma 3 going through point 3 comma 3.",
         );
         expect(point2).toHaveAttribute(
             "aria-label",
-            "Terminal point at 3 comma 3.",
+            "Through point at 3 comma 3.",
         );
     });
 
@@ -168,15 +168,15 @@ describe("describeRayGraph", () => {
         // Assert
         expect(strings.srRayGraph).toBe("A ray on a coordinate plane.");
         expect(strings.srRayPoints).toBe(
-            "The endpoint is at -5 comma 5 and the terminal point is at 5 comma 5.",
+            "The endpoint is at -5 comma 5 and the ray goes through point 5 comma 5.",
         );
         expect(strings.srRayEndpoint).toBe("Endpoint at -5 comma 5.");
-        expect(strings.srRayTerminalPoint).toBe("Terminal point at 5 comma 5.");
+        expect(strings.srRayTerminalPoint).toBe("Through point at 5 comma 5.");
         expect(strings.srRayGrabHandle).toBe(
-            "Ray from endpoint -5 comma 5 to terminal point 5 comma 5.",
+            "Ray with endpoint -5 comma 5 going through point 5 comma 5.",
         );
         expect(strings.srRayInteractiveElement).toBe(
-            "Interactive elements: A ray on a coordinate plane. The endpoint is at -5 comma 5 and the terminal point is at 5 comma 5.",
+            "Interactive elements: A ray on a coordinate plane. The endpoint is at -5 comma 5 and the ray goes through point 5 comma 5.",
         );
     });
 
@@ -198,15 +198,15 @@ describe("describeRayGraph", () => {
         // Assert
         expect(strings.srRayGraph).toBe("A ray on a coordinate plane.");
         expect(strings.srRayPoints).toBe(
-            "The endpoint is at -1 comma 2 and the terminal point is at 3 comma 4.",
+            "The endpoint is at -1 comma 2 and the ray goes through point 3 comma 4.",
         );
         expect(strings.srRayEndpoint).toBe("Endpoint at -1 comma 2.");
-        expect(strings.srRayTerminalPoint).toBe("Terminal point at 3 comma 4.");
+        expect(strings.srRayTerminalPoint).toBe("Through point at 3 comma 4.");
         expect(strings.srRayGrabHandle).toBe(
-            "Ray from endpoint -1 comma 2 to terminal point 3 comma 4.",
+            "Ray with endpoint -1 comma 2 going through point 3 comma 4.",
         );
         expect(strings.srRayInteractiveElement).toBe(
-            "Interactive elements: A ray on a coordinate plane. The endpoint is at -1 comma 2 and the terminal point is at 3 comma 4.",
+            "Interactive elements: A ray on a coordinate plane. The endpoint is at -1 comma 2 and the ray goes through point 3 comma 4.",
         );
     });
 });

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

@@ -279,7 +279,7 @@ describe("MafsGraph", () => {
         );
 
         expectLabelInDoc("Endpoint at 0 comma 0.");
-        expectLabelInDoc("Terminal point at -7 comma 0.5.");
+        expectLabelInDoc("Through point at -7 comma 0.5.");
     });
 
     it("renders ARIA labels for each point (circle)", () => {