feat(LEMS-2526): update aria label to include appearance descriptions (#1745)

## Summary:
Updates the aria description to include visual traits

New aria label structure will be:
`Element Type` `Visible Label(s)` `Math Details` `Visual Traits`

Note: 
- Other updates to aria descriptions will be submitted in separate PRs

Issue: LEMS-2526

## Test plan:
1. Navigate to[ storybook ](https://650db21c3f5d1b2f13c02952-kiuwtyujyg.chromatic.com/?path=/docs/perseuseditor-editorpage--docs)
2. Add interactive graph widget using the add widget dropdown
3. Scroll down to add locked figure - select any from the dropdown
4. Click auto generate button to see basic auto generated aria label (AL)
5. Update color / line style / fill
6. Re-generate AL by clicking auto generate button to see updated label text

### Expected Behavior
`Visual Traits` of each of the locked figures should change when an input (color, line style, fill) is updated and the generate aria label button is pressed

## Screen recording

https://github.com/user-attachments/assets/9fb228d9-a86e-4c3b-b288-398ced6fb6f2

Author: anakaren-rojas

Reviewers: benchristel, catandthemachines

Required Reviewers:

Approved By: benchristel, catandthemachines

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

Pull Request URL: #1745

Author: anakaren-rojas

.changeset/tender-badgers-brush.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+adds appearance description to aria label

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

@@ -382,7 +382,8 @@ describe("LockedEllipseSettings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel: "Circle with radius 2, centered at (0, 0)",
+                ariaLabel:
+                    "Circle with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.",
             });
         });
 
@@ -409,7 +410,8 @@ describe("LockedEllipseSettings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel: "Circle with radius 2, centered at (0, 0)",
+                ariaLabel:
+                    "Circle with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.",
             });
         });
 
@@ -436,7 +438,7 @@ describe("LockedEllipseSettings", () => {
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
                 ariaLabel:
-                    "Ellipse with x radius 2 and y radius 3, centered at (0, 0)",
+                    "Ellipse with x radius 2 and y radius 3, centered at (0, 0). Appearance solid gray border, with no fill.",
             });
         });
 
@@ -464,7 +466,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",
+                    "Ellipse with x radius 2 and y radius 3, centered at (0, 0), rotated by 90 degrees. Appearance solid gray border, with no fill.",
             });
         });
 
@@ -495,7 +497,8 @@ describe("LockedEllipseSettings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel: "Circle A with radius 2, centered at (0, 0)",
+                ariaLabel:
+                    "Circle A with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.",
             });
         });
 
@@ -530,7 +533,8 @@ describe("LockedEllipseSettings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel: "Circle A B with radius 2, centered at (0, 0)",
+                ariaLabel:
+                    "Circle A, B with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.",
             });
         });
     });

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

@@ -20,7 +20,10 @@ import LineStrokeSelect from "./line-stroke-select";
 import LockedFigureAria from "./locked-figure-aria";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 import LockedLabelSettings from "./locked-label-settings";
-import {getDefaultFigureForType} from "./util";
+import {
+    generateLockedFigureAppearanceDescription,
+    getDefaultFigureForType,
+} from "./util";
 
 import type {LockedFigureSettingsCommonProps} from "./locked-figure-settings";
 import type {
@@ -62,7 +65,7 @@ const LockedEllipseSettings = (props: Props) => {
     function getPrepopulatedAriaLabel() {
         let visiblelabel = "";
         if (labels && labels.length > 0) {
-            visiblelabel += ` ${labels.map((l) => l.text).join(" ")}`;
+            visiblelabel += ` ${labels.map((l) => l.text).join(", ")}`;
         }
 
         const isCircle = radius[0] === radius[1];
@@ -80,6 +83,12 @@ const LockedEllipseSettings = (props: Props) => {
             str += `, rotated by ${radianToDegree(angle)} degrees`;
         }
 
+        const ellipseAppearance = generateLockedFigureAppearanceDescription(
+            color,
+            strokeStyle,
+            fillStyle,
+        );
+        str += ellipseAppearance;
         return str;
     }
 

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

@@ -678,7 +678,8 @@ describe("Locked Function Settings", () => {
 
                 // Assert
                 expect(onChangeProps).toHaveBeenCalledWith({
-                    ariaLabel: "Function with equation y=x^2",
+                    ariaLabel:
+                        "Function with equation y=x^2. Appearance solid gray.",
                 });
             });
 
@@ -704,7 +705,8 @@ describe("Locked Function Settings", () => {
 
                 // Assert
                 expect(onChangeProps).toHaveBeenCalledWith({
-                    ariaLabel: "Function with equation x=y^2",
+                    ariaLabel:
+                        "Function with equation x=y^2. Appearance solid gray.",
                 });
             });
 
@@ -730,7 +732,7 @@ describe("Locked Function Settings", () => {
                 // Assert
                 expect(onChangeProps).toHaveBeenCalledWith({
                     ariaLabel:
-                        "Function with equation y=x^2, domain from 1 to 2",
+                        "Function with equation y=x^2, domain from 1 to 2. Appearance solid gray.",
                 });
             });
 
@@ -755,7 +757,8 @@ describe("Locked Function Settings", () => {
 
                 // Assert
                 expect(onChangeProps).toHaveBeenCalledWith({
-                    ariaLabel: "Function with equation y=x^2",
+                    ariaLabel:
+                        "Function with equation y=x^2. Appearance solid gray.",
                 });
             });
 
@@ -785,7 +788,8 @@ describe("Locked Function Settings", () => {
 
                 // Assert
                 expect(onChangeProps).toHaveBeenCalledWith({
-                    ariaLabel: "Function A with equation y=x^2",
+                    ariaLabel:
+                        "Function A with equation y=x^2. Appearance solid gray.",
                 });
             });
 
@@ -819,7 +823,8 @@ describe("Locked Function Settings", () => {
 
                 // Assert
                 expect(onChangeProps).toHaveBeenCalledWith({
-                    ariaLabel: "Function A, B with equation y=x^2",
+                    ariaLabel:
+                        "Function A, B with equation y=x^2. Appearance solid gray.",
                 });
             });
         });

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

@@ -28,7 +28,10 @@ import LockedFigureAria from "./locked-figure-aria";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 import examples from "./locked-function-examples";
 import LockedLabelSettings from "./locked-label-settings";
-import {getDefaultFigureForType} from "./util";
+import {
+    generateLockedFigureAppearanceDescription,
+    getDefaultFigureForType,
+} from "./util";
 
 import type {LockedFigureSettingsCommonProps} from "./locked-figure-settings";
 import type {
@@ -95,6 +98,12 @@ const LockedFunctionSettings = (props: Props) => {
             str += `, domain from ${domain[0]} to ${domain[1]}`;
         }
 
+        const functionAppearance = generateLockedFigureAppearanceDescription(
+            lineColor,
+            strokeStyle,
+        );
+        str += functionAppearance;
+
         return str;
     }
 

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

@@ -614,7 +614,8 @@ describe("LockedLineSettings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel: "Segment from (0, 0) to (2, 2)",
+                ariaLabel:
+                    "Segment from (0, 0) to (2, 2). Appearance solid gray.",
             });
         });
 
@@ -639,7 +640,7 @@ describe("LockedLineSettings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel: "Line from (0, 0) to (2, 2)",
+                ariaLabel: "Line from (0, 0) to (2, 2). Appearance solid gray.",
             });
         });
 
@@ -669,7 +670,8 @@ describe("LockedLineSettings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel: "Line A from (0, 0) to (2, 2)",
+                ariaLabel:
+                    "Line A from (0, 0) to (2, 2). Appearance solid gray.",
             });
         });
 
@@ -703,7 +705,8 @@ describe("LockedLineSettings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel: "Line A, B from (0, 0) to (2, 2)",
+                ariaLabel:
+                    "Line A, B from (0, 0) to (2, 2). Appearance solid gray.",
             });
         });
     });

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

@@ -25,7 +25,10 @@ import LockedFigureAria from "./locked-figure-aria";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 import LockedLabelSettings from "./locked-label-settings";
 import LockedPointSettings from "./locked-point-settings";
-import {getDefaultFigureForType} from "./util";
+import {
+    generateLockedFigureAppearanceDescription,
+    getDefaultFigureForType,
+} from "./util";
 
 import type {LockedFigureSettingsCommonProps} from "./locked-figure-settings";
 import type {
@@ -76,8 +79,12 @@ const LockedLineSettings = (props: Props) => {
         if (labels && labels.length > 0) {
             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]})`;
+        let str = `${capitalizeKind}${visiblelabel} from (${point1.coord[0]}, ${point1.coord[1]}) to (${point2.coord[0]}, ${point2.coord[1]})`;
+        const lineAppearance = generateLockedFigureAppearanceDescription(
+            lineColor,
+            lineStyle,
+        );
+        str += lineAppearance;
 
         return str;
     }

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

@@ -410,7 +410,7 @@ describe("LockedPointSettings", () => {
 
         // Assert
         expect(onChangeProps).toHaveBeenCalledWith({
-            ariaLabel: "Point at (0, 0)",
+            ariaLabel: "Point at (0, 0). Appearance solid gray.",
         });
     });
 
@@ -440,7 +440,7 @@ describe("LockedPointSettings", () => {
 
         // Assert
         expect(onChangeProps).toHaveBeenCalledWith({
-            ariaLabel: "Point A at (0, 0)",
+            ariaLabel: "Point A at (0, 0). Appearance solid gray.",
         });
     });
 
@@ -474,7 +474,7 @@ describe("LockedPointSettings", () => {
 
         // Assert
         expect(onChangeProps).toHaveBeenCalledWith({
-            ariaLabel: "Point A, B at (0, 0)",
+            ariaLabel: "Point A, B at (0, 0). Appearance solid gray.",
         });
     });
 });

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

@@ -22,7 +22,10 @@ import LabeledSwitch from "./labeled-switch";
 import LockedFigureAria from "./locked-figure-aria";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 import LockedLabelSettings from "./locked-label-settings";
-import {getDefaultFigureForType} from "./util";
+import {
+    generateLockedFigureAppearanceDescription,
+    getDefaultFigureForType,
+} from "./util";
 
 import type {LockedFigureSettingsMovementType} from "./locked-figure-settings-actions";
 import type {
@@ -115,8 +118,11 @@ const LockedPointSettings = (props: Props) => {
         if (labels && labels.length > 0) {
             visiblelabel += ` ${labels.map((l) => l.text).join(", ")}`;
         }
+        let str = `Point${visiblelabel} at (${coord[0]}, ${coord[1]})`;
 
-        const str = `Point${visiblelabel} at (${coord[0]}, ${coord[1]})`;
+        const pointAppearance =
+            generateLockedFigureAppearanceDescription(pointColor);
+        str += pointAppearance;
 
         return str;
     }

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

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

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

@@ -32,7 +32,10 @@ import LockedFigureAria from "./locked-figure-aria";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 import LockedLabelSettings from "./locked-label-settings";
 import PolygonSwatch from "./polygon-swatch";
-import {getDefaultFigureForType} from "./util";
+import {
+    generateLockedFigureAppearanceDescription,
+    getDefaultFigureForType,
+} from "./util";
 
 import type {LockedFigureSettingsCommonProps} from "./locked-figure-settings";
 
@@ -72,6 +75,12 @@ const LockedPolygonSettings = (props: Props) => {
         // Add the coordinates of each point to the aria label
         str += points.map(([x, y]) => `(${x}, ${y})`).join(", ");
 
+        const polygonAppearance = generateLockedFigureAppearanceDescription(
+            color,
+            strokeStyle,
+            fillStyle,
+        );
+        str += polygonAppearance;
         return str;
     }
 

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

@@ -430,7 +430,8 @@ describe("Locked Vector Settings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel: "Vector from (0, 0) to (2, 2)",
+                ariaLabel:
+                    "Vector from (0, 0) to (2, 2). Appearance solid gray.",
             });
         });
 
@@ -460,7 +461,8 @@ describe("Locked Vector Settings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel: "Vector A from (0, 0) to (2, 2)",
+                ariaLabel:
+                    "Vector A from (0, 0) to (2, 2). Appearance solid gray.",
             });
         });
 
@@ -494,7 +496,8 @@ describe("Locked Vector Settings", () => {
 
             // Assert
             expect(onChangeProps).toHaveBeenCalledWith({
-                ariaLabel: "Vector A, B from (0, 0) to (2, 2)",
+                ariaLabel:
+                    "Vector A, B from (0, 0) to (2, 2). Appearance solid gray.",
             });
         });
     });