feat(LEMS-2525): move position of visible label in aria label (#1739)

## Summary: Moves the position of the visible label New aria label structure will be: `Element Type` `Visible Label(s)` `Math Details` `Visual Traits` Issue: LEMS-2525 ## Test plan: 1. Navigate to [storybook](https://650db21c3f5d1b2f13c02952-ebxxnqlnis.chromatic.com/?path=/docs/perseuseditor-editorpage--docs) 2. Select "Interactive Graph" from the `Add widget` dropdown 3. Scroll down to the `Add locked figure` dropdown - select any from the dropdown 4. Click 'auto generate' button to see basic auto generated aria label 5. Click 'add visible label' button to expand section and add visible label 6. Regenerate aria label by clicking 'auto generate' button to see updated label text ## Screenshots https://github.com/user-attachments/assets/47fa43db-d065-41d4-b97c-8cb6bd3da9b1 Author: anakaren-rojas Reviewers: benchristel Required Reviewers: Approved By: benchristel Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1739
Khan · Oct 15, 2024 · ab0a10e · ab0a10e
1 parent 2cc20b3
commit ab0a10e
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 87 deletions.
diff --git a/.changeset/twelve-chairs-listen.md b/.changeset/twelve-chairs-listen.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": minor
+---
+
+updates position of visible label within aria label
diff --git a/...itor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx b/...itor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx
@@ -495,8 +495,7 @@ describe("LockedEllipseSettings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel:
-                    "Circle with radius 2, centered at (0, 0), with label A",
+                ariaLabel: "Circle A with radius 2, centered at (0, 0)",
             });
         });
 
@@ -531,8 +530,7 @@ describe("LockedEllipseSettings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel:
-                    "Circle with radius 2, centered at (0, 0), with labels A, B",
+                ariaLabel: "Circle A B with radius 2, centered at (0, 0)",
             });
         });
     });

diff --git a/...us-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx b/...us-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx
@@ -60,13 +60,18 @@ const LockedEllipseSettings = (props: Props) => {
     } = props;
 
     function getPrepopulatedAriaLabel() {
+        let visiblelabel = "";
+        if (labels && labels.length > 0) {
+            visiblelabel += ` ${labels.map((l) => l.text).join(" ")}`;
+        }
+
         const isCircle = radius[0] === radius[1];
         let str = "";
 
         if (isCircle) {
-            str += `Circle with radius ${radius[0]}`;
+            str += `Circle${visiblelabel} with radius ${radius[0]}`;
         } else {
-            str += `Ellipse with x radius ${radius[0]} and y radius ${radius[1]}`;
+            str += `Ellipse${visiblelabel} with x radius ${radius[0]} and y radius ${radius[1]}`;
         }
 
         str += `, centered at (${center[0]}, ${center[1]})`;
@@ -75,18 +80,6 @@ const LockedEllipseSettings = (props: Props) => {
             str += `, rotated by ${radianToDegree(angle)} degrees`;
         }
 
-        if (labels && labels.length > 0) {
-            str += ", with label";
-            // Make it "with labels" instead of "with label" if there are
-            // multiple labels.
-            if (labels.length > 1) {
-                str += "s";
-            }
-
-            // Separate additional labels with commas.
-            str += ` ${labels.map((l) => l.text).join(", ")}`;
-        }
-
         return str;
     }
 

diff --git a/...tor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.test.tsx b/...tor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.test.tsx
@@ -785,7 +785,7 @@ describe("Locked Function Settings", () => {
 
                 // Assert
                 expect(onChangeProps).toHaveBeenCalledWith({
-                    ariaLabel: "Function with equation y=x^2, with label A",
+                    ariaLabel: "Function A with equation y=x^2",
                 });
             });
 
@@ -819,7 +819,7 @@ describe("Locked Function Settings", () => {
 
                 // Assert
                 expect(onChangeProps).toHaveBeenCalledWith({
-                    ariaLabel: "Function with equation y=x^2, with labels A, B",
+                    ariaLabel: "Function A, B with equation y=x^2",
                 });
             });
         });

diff --git a/...s-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx b/...s-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx
@@ -82,26 +82,19 @@ const LockedFunctionSettings = (props: Props) => {
     }, [domain]);
 
     function getPrepopulatedAriaLabel() {
-        let str = `Function with equation ${equationPrefix}${equation}`;
+        let visiblelabel = "";
+        if (labels && labels.length > 0) {
+            visiblelabel += ` ${labels.map((l) => l.text).join(", ")}`;
+        }
+
+        let str = `Function${visiblelabel} with equation ${equationPrefix}${equation}`;
 
         // Add the domain/range constraints to the aria label
         // if they are not the default values.
         if (domain && !(domain[0] === -Infinity && domain[1] === Infinity)) {
             str += `, domain from ${domain[0]} to ${domain[1]}`;
         }
 
-        if (labels && labels.length > 0) {
-            str += ", with label";
-            // Make it "with labels" instead of "with label" if there are
-            // multiple labels.
-            if (labels.length > 1) {
-                str += "s";
-            }
-
-            // Separate additional labels with commas.
-            str += ` ${labels.map((l) => l.text).join(", ")}`;
-        }
-
         return str;
     }
 

diff --git a/...-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.test.tsx b/...-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.test.tsx
@@ -669,7 +669,7 @@ describe("LockedLineSettings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel: "Line from (0, 0) to (2, 2) with label A",
+                ariaLabel: "Line A from (0, 0) to (2, 2)",
             });
         });
 
@@ -703,7 +703,7 @@ describe("LockedLineSettings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel: "Line from (0, 0) to (2, 2) with labels A, B",
+                ariaLabel: "Line A, B from (0, 0) to (2, 2)",
             });
         });
     });

diff --git a/...rseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx b/...rseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx
@@ -72,20 +72,13 @@ const LockedLineSettings = (props: Props) => {
     const isInvalid = kvector.equal(point1.coord, point2.coord);
 
     function getPrepopulatedAriaLabel() {
-        let str = `${capitalizeKind} from (${point1.coord[0]}, ${point1.coord[1]}) to (${point2.coord[0]}, ${point2.coord[1]})`;
-
+        let visiblelabel = "";
         if (labels && labels.length > 0) {
-            str += " with label";
-            // Make it "with labels" instead of "with label" if there are
-            // multiple labels.
-            if (labels.length > 1) {
-                str += "s";
-            }
-
-            // Separate additional labels with commas.
-            str += ` ${labels.map((l) => l.text).join(", ")}`;
+            visiblelabel += ` ${labels.map((l) => l.text).join(", ")}`;
         }
 
+        const str = `${capitalizeKind}${visiblelabel} from (${point1.coord[0]}, ${point1.coord[1]}) to (${point2.coord[0]}, ${point2.coord[1]})`;
+
         return str;
     }
 

diff --git a/...editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx b/...editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx
@@ -440,7 +440,7 @@ describe("LockedPointSettings", () => {
 
         // Assert
         expect(onChangeProps).toHaveBeenCalledWith({
-            ariaLabel: "Point at (0, 0) with label A",
+            ariaLabel: "Point A at (0, 0)",
         });
     });
 
@@ -474,7 +474,7 @@ describe("LockedPointSettings", () => {
 
         // Assert
         expect(onChangeProps).toHaveBeenCalledWith({
-            ariaLabel: "Point at (0, 0) with labels A, B",
+            ariaLabel: "Point A, B at (0, 0)",
         });
     });
 });
diff --git a/...seus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx b/...seus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx
@@ -111,20 +111,13 @@ const LockedPointSettings = (props: Props) => {
      * "Point at (x, y) with label1, label2, label3".
      */
     function getPrepopulatedAriaLabel() {
-        let str = `Point at (${coord[0]}, ${coord[1]})`;
-
+        let visiblelabel = "";
         if (labels && labels.length > 0) {
-            str += " with label";
-            // Make it "with labels" instead of "with label" if there are
-            // multiple labels.
-            if (labels.length > 1) {
-                str += "s";
-            }
-
-            // Separate additional labels with commas.
-            str += ` ${labels.map((l) => l.text).join(", ")}`;
+            visiblelabel += ` ${labels.map((l) => l.text).join(", ")}`;
         }
 
+        const str = `Point${visiblelabel} at (${coord[0]}, ${coord[1]})`;
+
         return str;
     }
 

diff --git a/...itor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.test.tsx b/...itor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.test.tsx
@@ -634,7 +634,7 @@ describe("LockedPolygonSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Polygon with 3 sides, vertices at (0, 0), (0, 1), (1, 1), with label A",
+                    "Polygon A with 3 sides, vertices at (0, 0), (0, 1), (1, 1)",
             });
         });
 
@@ -674,7 +674,7 @@ describe("LockedPolygonSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Polygon with 3 sides, vertices at (0, 0), (0, 1), (1, 1), with labels A, B",
+                    "Polygon A, B with 3 sides, vertices at (0, 0), (0, 1), (1, 1)",
             });
         });
     });

diff --git a/...us-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx b/...us-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx
@@ -62,23 +62,16 @@ const LockedPolygonSettings = (props: Props) => {
     } = props;
 
     function getPrepopulatedAriaLabel() {
-        let str = `Polygon with ${points.length} sides, vertices at `;
+        let visiblelabel = "";
+        if (labels && labels.length > 0) {
+            visiblelabel += ` ${labels.map((l) => l.text).join(", ")}`;
+        }
+
+        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(", ");
 
-        if (labels && labels.length > 0) {
-            str += ", with label";
-            // Make it "with labels" instead of "with label" if there are
-            // multiple labels.
-            if (labels.length > 1) {
-                str += "s";
-            }
-
-            // Separate additional labels with commas.
-            str += ` ${labels.map((l) => l.text).join(", ")}`;
-        }
-
         return str;
     }
 

diff --git a/...ditor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.test.tsx b/...ditor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.test.tsx
@@ -460,7 +460,7 @@ describe("Locked Vector Settings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel: "Vector from (0, 0) to (2, 2) with label A",
+                ariaLabel: "Vector A from (0, 0) to (2, 2)",
             });
         });
 
@@ -494,7 +494,7 @@ describe("Locked Vector Settings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel: "Vector from (0, 0) to (2, 2) with labels A, B",
+                ariaLabel: "Vector A, B from (0, 0) to (2, 2)",
             });
         });
     });

diff --git a/...eus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx b/...eus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx
@@ -62,20 +62,12 @@ const LockedVectorSettings = (props: Props) => {
     const isInvalid = kvector.equal(tail, tip);
 
     function getPrepopulatedAriaLabel() {
-        let str = `Vector from (${tail[0]}, ${tail[1]}) to (${tip[0]}, ${tip[1]})`;
-
+        let visiblelabel = "";
         if (labels && labels.length > 0) {
-            str += " with label";
-            // Make it "with labels" instead of "with label" if there are
-            // multiple labels.
-            if (labels.length > 1) {
-                str += "s";
-            }
-
-            // Separate additional labels with commas.
-            str += ` ${labels.map((l) => l.text).join(", ")}`;
+            visiblelabel += ` ${labels.map((l) => l.text).join(", ")}`;
         }
 
+        const str = `Vector${visiblelabel} from (${tail[0]}, ${tail[1]}) to (${tip[0]}, ${tip[1]})`;
         return str;
     }