[Locked Figures Aria] Update the auto-generated text to spell out com…

…mas (#1976)

## Summary:
All our interactive graph aria labels are spelling out commas
in coordinate pairs for clarity. When using a coordinate pair
as is, the screen reader may skip the comma and read
ambiguously.

Example: (1000, 975) ==> "one thousand nine hundred seventy-five" (sounds like 1975)

To fix this issue and be consistent with all the other
interactive graph aria labels, the locked labels' autogeneration
should also spell out commas.

- Spell out commas in locked figures' auto-generated aria label text

Issue: none

## Test plan:
`yarn jest --silent`

Storybook
- Go to http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--mafs-with-locked-figure-labels-all-flags
- Go through all the different locked figures and click "auto-generate"
- Note that their coordinates should all spell out the comma within
  the auto-generated text
  - Do this for point, line, vector, ellipse, and polygon (not function or label)

| Before | After |
| --- | --- |
| ![image](https://github.com/user-attachments/assets/f010757e-a070-4b96-8b79-a8bb38d01d84) | ![image](https://github.com/user-attachments/assets/2cd27821-7f47-41da-a371-0208aaae208f) |

Author: nishasy

Reviewers: anakaren-rojas, catandthemachines

Required Reviewers:

Approved By: anakaren-rojas

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

Pull Request URL: #1976

.changeset/seven-planets-matter.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+[Locked Figures Aria] Update the auto-generated text to spell out commas

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx

@@ -393,7 +393,7 @@ describe("LockedEllipseSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Circle with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.",
+                    "Circle with radius 2, centered at 0 comma 0. Appearance solid gray border, with no fill.",
             });
         });
 
@@ -421,7 +421,7 @@ describe("LockedEllipseSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Circle with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.",
+                    "Circle with radius 2, centered at 0 comma 0. Appearance solid gray border, with no fill.",
             });
         });
 
@@ -448,7 +448,7 @@ describe("LockedEllipseSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Ellipse with x radius 2 and y radius 3, centered at (0, 0). Appearance solid gray border, with no fill.",
+                    "Ellipse with x radius 2 and y radius 3, centered at 0 comma 0. Appearance solid gray border, with no fill.",
             });
         });
 
@@ -476,7 +476,7 @@ describe("LockedEllipseSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Ellipse with x radius 2 and y radius 3, centered at (0, 0), rotated by 90 degrees. Appearance solid gray border, with no fill.",
+                    "Ellipse with x radius 2 and y radius 3, centered at 0 comma 0, rotated by 90 degrees. Appearance solid gray border, with no fill.",
             });
         });
 
@@ -508,7 +508,7 @@ describe("LockedEllipseSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Circle spoken A with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.",
+                    "Circle spoken A with radius 2, centered at 0 comma 0. Appearance solid gray border, with no fill.",
             });
         });
 
@@ -544,7 +544,7 @@ describe("LockedEllipseSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Circle spoken A, spoken B with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.",
+                    "Circle spoken A, spoken B with radius 2, centered at 0 comma 0. Appearance solid gray border, with no fill.",
             });
         });
     });

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx

@@ -79,7 +79,7 @@ const LockedEllipseSettings = (props: Props) => {
             str += `Ellipse${visiblelabel} with x radius ${radius[0]} and y radius ${radius[1]}`;
         }
 
-        str += `, centered at (${center[0]}, ${center[1]})`;
+        str += `, centered at ${center[0]} comma ${center[1]}`;
 
         if (!isCircle && angle !== 0) {
             str += `, rotated by ${radianToDegree(angle)} degrees`;

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.test.tsx

@@ -625,7 +625,7 @@ describe("LockedLineSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Segment from point at (0, 0) to point at (2, 2). Appearance solid gray.",
+                    "Segment from point at 0 comma 0 to point at 2 comma 2. Appearance solid gray.",
             });
         });
 
@@ -651,7 +651,7 @@ describe("LockedLineSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Line from point at (0, 0) to point at (2, 2). Appearance solid gray.",
+                    "Line from point at 0 comma 0 to point at 2 comma 2. Appearance solid gray.",
             });
         });
 
@@ -682,7 +682,7 @@ describe("LockedLineSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Line spoken A from point at (0, 0) to point at (2, 2). Appearance solid gray.",
+                    "Line spoken A from point at 0 comma 0 to point at 2 comma 2. Appearance solid gray.",
             });
         });
 
@@ -717,7 +717,7 @@ describe("LockedLineSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Line spoken A, spoken B from point at (0, 0) to point at (2, 2). Appearance solid gray.",
+                    "Line spoken A, spoken B from point at 0 comma 0 to point at 2 comma 2. Appearance solid gray.",
             });
         });
 
@@ -758,7 +758,7 @@ describe("LockedLineSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Line spoken A from point spoken C at (0, 0) to point spoken D at (2, 2). Appearance solid gray.",
+                    "Line spoken A from point spoken C at 0 comma 0 to point spoken D at 2 comma 2. Appearance solid gray.",
             });
         });
 
@@ -809,7 +809,7 @@ describe("LockedLineSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Line spoken A, spoken B from point spoken C, spoken C2 at (0, 0) to point spoken D, spoken D2 at (2, 2). Appearance solid gray.",
+                    "Line spoken A, spoken B from point spoken C, spoken C2 at 0 comma 0 to point spoken D, spoken D2 at 2 comma 2. Appearance solid gray.",
             });
         });
     });

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx

@@ -83,7 +83,7 @@ const LockedLineSettings = (props: Props) => {
         const point1VisibleLabel = await joinLabelsAsSpokenMath(point1.labels);
         const point2VisibleLabel = await joinLabelsAsSpokenMath(point2.labels);
 
-        let str = `${capitalizeKind}${visiblelabel} from point${point1VisibleLabel} at (${point1.coord[0]}, ${point1.coord[1]}) to point${point2VisibleLabel} at (${point2.coord[0]}, ${point2.coord[1]})`;
+        let str = `${capitalizeKind}${visiblelabel} from point${point1VisibleLabel} at ${point1.coord[0]} comma ${point1.coord[1]} to point${point2VisibleLabel} at ${point2.coord[0]} comma ${point2.coord[1]}`;
 
         const lineAppearance = generateLockedFigureAppearanceDescription(
             lineColor,

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx

@@ -422,7 +422,7 @@ describe("LockedPointSettings", () => {
         // generateSpokenMathDetails is mocked to return the input string
         // with "Spoken math details for " prepended.
         expect(onChangeProps).toHaveBeenCalledWith({
-            ariaLabel: "Point at (0, 0). Appearance solid gray.",
+            ariaLabel: "Point at 0 comma 0. Appearance solid gray.",
         });
     });
 
@@ -454,7 +454,7 @@ describe("LockedPointSettings", () => {
         // generateSpokenMathDetails is mocked to return the input string
         // with "Spoken math details for " prepended.
         expect(onChangeProps).toHaveBeenCalledWith({
-            ariaLabel: "Point spoken A at (0, 0). Appearance solid gray.",
+            ariaLabel: "Point spoken A at 0 comma 0. Appearance solid gray.",
         });
     });
 
@@ -491,7 +491,7 @@ describe("LockedPointSettings", () => {
         // with "Spoken math details for " prepended.
         expect(onChangeProps).toHaveBeenCalledWith({
             ariaLabel:
-                "Point spoken A, spoken B at (0, 0). Appearance solid gray.",
+                "Point spoken A, spoken B at 0 comma 0. Appearance solid gray.",
         });
     });
 });

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx

@@ -119,7 +119,7 @@ const LockedPointSettings = (props: Props) => {
     async function getPrepopulatedAriaLabel() {
         const visiblelabel = await joinLabelsAsSpokenMath(labels);
 
-        let str = `Point${visiblelabel} at (${coord[0]}, ${coord[1]})`;
+        let str = `Point${visiblelabel} at ${coord[0]} comma ${coord[1]}`;
 
         const pointAppearance =
             generateLockedFigureAppearanceDescription(pointColor);

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.test.tsx

@@ -608,7 +608,7 @@ describe("LockedPolygonSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Polygon with 3 sides, vertices at (0, 0), (0, 1), (1, 1). Appearance solid gray border, with no fill.",
+                    "Polygon with 3 sides, vertices at 0 comma 0, 0 comma 1, 1 comma 1. Appearance solid gray border, with no fill.",
             });
         });
 
@@ -644,7 +644,7 @@ describe("LockedPolygonSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Polygon spoken A with 3 sides, vertices at (0, 0), (0, 1), (1, 1). Appearance solid gray border, with no fill.",
+                    "Polygon spoken A with 3 sides, vertices at 0 comma 0, 0 comma 1, 1 comma 1. Appearance solid gray border, with no fill.",
             });
         });
 
@@ -684,7 +684,7 @@ describe("LockedPolygonSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Polygon spoken A, spoken B with 3 sides, vertices at (0, 0), (0, 1), (1, 1). Appearance solid gray border, with no fill.",
+                    "Polygon spoken A, spoken B with 3 sides, vertices at 0 comma 0, 0 comma 1, 1 comma 1. Appearance solid gray border, with no fill.",
             });
         });
     });

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx

@@ -75,7 +75,7 @@ const LockedPolygonSettings = (props: Props) => {
         let str = `Polygon${visiblelabel} with ${points.length} sides, vertices at `;
 
         // Add the coordinates of each point to the aria label
-        str += points.map(([x, y]) => `(${x}, ${y})`).join(", ");
+        str += points.map(([x, y]) => `${x} comma ${y}`).join(", ");
 
         const polygonAppearance = generateLockedFigureAppearanceDescription(
             color,

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.test.tsx

@@ -441,7 +441,7 @@ describe("Locked Vector Settings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Vector from (0, 0) to (2, 2). Appearance solid gray.",
+                    "Vector from 0 comma 0 to 2 comma 2. Appearance solid gray.",
             });
         });
 
@@ -472,7 +472,7 @@ describe("Locked Vector Settings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Vector spoken A from (0, 0) to (2, 2). Appearance solid gray.",
+                    "Vector spoken A from 0 comma 0 to 2 comma 2. Appearance solid gray.",
             });
         });
 
@@ -507,7 +507,7 @@ describe("Locked Vector Settings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Vector spoken A, spoken B from (0, 0) to (2, 2). Appearance solid gray.",
+                    "Vector spoken A, spoken B from 0 comma 0 to 2 comma 2. Appearance solid gray.",
             });
         });
     });

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx

@@ -72,7 +72,7 @@ const LockedVectorSettings = (props: Props) => {
     async function getPrepopulatedAriaLabel() {
         const visiblelabel = await joinLabelsAsSpokenMath(labels);
 
-        let str = `Vector${visiblelabel} from (${tail[0]}, ${tail[1]}) to (${tip[0]}, ${tip[1]})`;
+        let str = `Vector${visiblelabel} from ${tail[0]} comma ${tail[1]} to ${tip[0]} comma ${tip[1]}`;
 
         const vectorAppearance =
             generateLockedFigureAppearanceDescription(lineColor);