fix(LEMS-2745): update terminology for angle graphs (#2061)

## Summary:
Updates terminology for angle graph - changes Initial and Terminal to Starting and Ending 

Issue: LEMS-2745

Author: anakaren-rojas

Reviewers: catandthemachines, nishasy

Required Reviewers:

Approved By: catandthemachines

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x)

Pull Request URL: #2061

.changeset/happy-mugs-yell.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+update terminology for angle sides

packages/perseus/src/strings.ts

@@ -245,18 +245,18 @@ export type PerseusStrings = {
         angleMeasure,
         vertexX,
         vertexY,
-        isX,
-        isY,
-        tsX,
-        tsY,
+        startingSideX,
+        startingSideY,
+        endingSideX,
+        endingSideY,
     }: {
         angleMeasure: string;
         vertexX: string;
         vertexY: string;
-        isX: string;
-        isY: string;
-        tsX: string;
-        tsY: string;
+        startingSideX: string;
+        startingSideY: string;
+        endingSideX: string;
+        endingSideY: string;
     }) => string;
     // The above strings are used for interactive graph SR descriptions.
 };
@@ -543,12 +543,16 @@ export const strings: {
         message:
             "Point 2, vertex at %(x)s comma %(y)s. Angle %(angleMeasure)s degrees",
     },
-    srAngleGraphAriaLabel: "An angle on a coordinate plane.",
+    srAngleGraphAriaLabel: {
+        context:
+            "Screenreader-accessible label of an angle graph on a coordinate plane",
+        message: "An angle on a coordinate plane.",
+    },
     srAngleGraphAriaDescription: {
         context:
             "Screenreader-only description of an angle on a coordinate plane.",
         message:
-            "The angle measure is %(angleMeasure)s degrees with a vertex at %(vertexX)s comma %(vertexY)s, a point on the initial side at %(isX)s comma %(isY)s and a point on the terminal side at %(tsX)s comma %(tsY)s",
+            "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",
     },
     // The above strings are used for interactive graph SR descriptions.
 };
@@ -761,11 +765,11 @@ export const mockStrings: PerseusStrings = {
         angleMeasure,
         vertexX,
         vertexY,
-        isX,
-        isY,
-        tsX,
-        tsY,
+        startingSideX,
+        startingSideY,
+        endingSideX,
+        endingSideY,
     }) =>
-        `The angle measure is ${angleMeasure} degrees with a vertex at ${vertexX} comma ${vertexY}, a point on the initial side at ${isX} comma ${isY} and a point on the terminal side at ${tsX} comma ${tsY}.`,
+        `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}.`,
     // The above strings are used for interactive graph SR descriptions.
 };

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

@@ -112,10 +112,10 @@ function AngleGraph(props: AngleGraphProps) {
         angleMeasure,
         vertexX: srFormatNumber(coords[1][X], locale),
         vertexY: srFormatNumber(coords[1][Y], locale),
-        isX: srFormatNumber(coords[2][X], locale),
-        isY: srFormatNumber(coords[2][Y], locale),
-        tsX: srFormatNumber(coords[0][X], locale),
-        tsY: srFormatNumber(coords[0][Y], locale),
+        startingSideX: srFormatNumber(coords[2][X], locale),
+        startingSideY: srFormatNumber(coords[2][Y], locale),
+        endingSideX: srFormatNumber(coords[0][X], locale),
+        endingSideY: srFormatNumber(coords[0][Y], locale),
     });
 
     const formatCoordinates = (x: number, y: number) => ({

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

@@ -569,7 +569,7 @@ describe("MafsGraph", () => {
             "angle-description",
         );
         expect(angleGraph).toHaveTextContent(
-            "The angle measure is 270 degrees with a vertex at 0 comma 0, a point on the initial side at 1 comma 1 and a point on the terminal side at -1 comma 1.",
+            "The angle measure is 270 degrees with a vertex at 0 comma 0, a point on the starting side at 1 comma 1 and a point on the ending side at -1 comma 1.",
         );
     });