[Locked Figure Aria] Locked polygon aria labels (graph + editor)

.changeset/beige-worms-hope.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Locked Figure Aria] Locked function aria labels (graph + editor)

.changeset/dirty-ducks-rescue.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Locked Figure Labels] Add/edit/delete locked polygon labels

.changeset/fresh-sheep-invent.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Locked Figure Aria] Implement locked line aria label behavior on graph

.changeset/honest-frogs-walk.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Locked Figure Aria] Locked polygon aria labels (graph + editor)

.changeset/hot-geese-look.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Locked Figure Aria] Implement locked point aria label behavior on graph

.changeset/itchy-pears-march.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Locked Figure Aria] Locked line aria label editor UI

.changeset/red-garlics-divide.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Locked Figure Aria] Implement locked vector aria labels (graph + editor)

.changeset/shiny-falcons-sparkle.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Locked Figure Labels] View locked polygon labels

.changeset/strong-spoons-talk.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Locked Figure Aria] Locked point aria label editor UI

.changeset/wild-cars-drop.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Locked Figure Aria] Implement locked ellipse aria labels (graph + editor)

packages/perseus-editor/src/__stories__/flags-for-api-options.ts

@@ -16,10 +16,12 @@ export const flags = {
 
         // Locked figures flags
         "interactive-graph-locked-features-labels": true,
+        "locked-figures-aria": true,
         "locked-point-labels": true,
         "locked-line-labels": true,
         "locked-vector-labels": true,
         "locked-ellipse-labels": true,
+        "locked-polygon-labels": true,
         "locked-function-labels": true,
     },
 } satisfies APIOptions["flags"];

packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx

@@ -153,10 +153,12 @@ export const MafsWithLockedFiguresCurrent = (): React.ReactElement => {
                     mafs: {
                         ...flags.mafs,
                         "interactive-graph-locked-features-labels": false,
+                        "locked-figures-aria": false,
                         "locked-point-labels": false,
                         "locked-line-labels": false,
                         "locked-vector-labels": false,
                         "locked-ellipse-labels": false,
+                        "locked-polygon-labels": false,
                         "locked-function-labels": false,
                     },
                 },
@@ -186,6 +188,7 @@ export const MafsWithLockedLabelsFlag = (): React.ReactElement => {
                         "locked-line-labels": false,
                         "locked-vector-labels": false,
                         "locked-ellipse-labels": false,
+                        "locked-polygon-labels": false,
                         "locked-function-labels": false,
                     },
                 },
@@ -207,6 +210,7 @@ export const MafsWithLockedPointLabelsFlag = (): React.ReactElement => {
                         "locked-line-labels": false,
                         "locked-vector-labels": false,
                         "locked-ellipse-labels": false,
+                        "locked-polygon-labels": false,
                         "locked-function-labels": false,
                     },
                 },
@@ -228,6 +232,7 @@ export const MafsWithLockedLineLabelsFlag = (): React.ReactElement => {
                         "locked-line-labels": true,
                         "locked-vector-labels": false,
                         "locked-ellipse-labels": false,
+                        "locked-polygon-labels": false,
                         "locked-function-labels": false,
                     },
                 },
@@ -249,6 +254,7 @@ export const MafsWithLockedVectorLabelsFlag = (): React.ReactElement => {
                         "locked-line-labels": false,
                         "locked-vector-labels": true,
                         "locked-ellipse-labels": false,
+                        "locked-polygon-labels": false,
                         "locked-function-labels": false,
                     },
                 },
@@ -270,6 +276,29 @@ export const MafsWithLockedEllipseLabelsFlag = (): React.ReactElement => {
                         "locked-line-labels": false,
                         "locked-vector-labels": false,
                         "locked-ellipse-labels": true,
+                        "locked-polygon-labels": false,
+                        "locked-function-labels": false,
+                    },
+                },
+            }}
+            question={segmentWithLockedFigures}
+        />
+    );
+};
+
+export const MafsWithLockedPolygonLabelsFlag = (): React.ReactElement => {
+    return (
+        <EditorPageWithStorybookPreview
+            apiOptions={{
+                flags: {
+                    mafs: {
+                        ...flags.mafs,
+                        "interactive-graph-locked-features-labels": true,
+                        "locked-point-labels": false,
+                        "locked-line-labels": false,
+                        "locked-vector-labels": false,
+                        "locked-ellipse-labels": false,
+                        "locked-polygon-labels": true,
                         "locked-function-labels": false,
                     },
                 },
@@ -291,6 +320,7 @@ export const MafsWithLockedFunctionLabelsFlag = (): React.ReactElement => {
                         "locked-line-labels": false,
                         "locked-vector-labels": false,
                         "locked-ellipse-labels": false,
+                        "locked-polygon-labels": false,
                         "locked-function-labels": true,
                     },
                 },

packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-description.tsx

@@ -34,7 +34,7 @@ export default function InteractiveGraphDescription(props: Props) {
                     <LabelXSmall style={styles.caption}>
                         Use these fields to describe the graph as a whole. These
                         are used by screen readers to describe content to users
-                        who are visually impaired.
+                        who may be visually impaired.
                     </LabelXSmall>
                     <LabelLarge tag="label">
                         Title

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

@@ -317,4 +317,223 @@ describe("LockedEllipseSettings", () => {
             });
         });
     });
+
+    describe("Aria label", () => {
+        test("Renders with aria label", () => {
+            // Arrange
+
+            // Act
+            render(
+                <LockedEllipseSettings
+                    {...defaultProps}
+                    ariaLabel="Ellipse at (x, y)"
+                />,
+                {wrapper: RenderStateRoot},
+            );
+
+            const input = screen.getByRole("textbox", {name: "Aria label"});
+
+            // Assert
+            expect(input).toHaveValue("Ellipse at (x, y)");
+        });
+
+        test("calls onChangeProps when the aria label is updated", async () => {
+            // Arrange
+            const onChangeProps = jest.fn();
+            render(
+                <LockedEllipseSettings
+                    {...defaultProps}
+                    ariaLabel={undefined}
+                    onChangeProps={onChangeProps}
+                />,
+                {wrapper: RenderStateRoot},
+            );
+
+            // Act
+            const input = screen.getByRole("textbox", {name: "Aria label"});
+            await userEvent.clear(input);
+            await userEvent.type(input, "A");
+
+            // Assert
+            expect(onChangeProps).toHaveBeenCalledWith({
+                ariaLabel: "A",
+            });
+        });
+
+        test("aria label autogenerates saying circle when the radii are equal", async () => {
+            // Arrange
+            const onChangeProps = jest.fn();
+
+            // Act
+            render(
+                <LockedEllipseSettings
+                    {...defaultProps}
+                    radius={[2, 2]}
+                    ariaLabel={undefined}
+                    onChangeProps={onChangeProps}
+                />,
+                {wrapper: RenderStateRoot},
+            );
+
+            const autoGenButton = screen.getByRole("button", {
+                name: "Auto-generate",
+            });
+            await userEvent.click(autoGenButton);
+
+            // Assert
+            expect(onChangeProps).toHaveBeenCalledWith({
+                ariaLabel: "Circle with radius 2, centered at (0, 0)",
+            });
+        });
+
+        test("aria label auto-generates without rotation when ellipse is a circle", async () => {
+            // Arrange
+            const onChangeProps = jest.fn();
+
+            // Act
+            render(
+                <LockedEllipseSettings
+                    {...defaultProps}
+                    radius={[2, 2]}
+                    ariaLabel={undefined}
+                    onChangeProps={onChangeProps}
+                    angle={Math.PI}
+                />,
+                {wrapper: RenderStateRoot},
+            );
+
+            const autoGenButton = screen.getByRole("button", {
+                name: "Auto-generate",
+            });
+            await userEvent.click(autoGenButton);
+
+            // Assert
+            expect(onChangeProps).toHaveBeenCalledWith({
+                ariaLabel: "Circle with radius 2, centered at (0, 0)",
+            });
+        });
+
+        test("aria label auto-generates saying ellipse when the radii are different", async () => {
+            // Arrange
+            const onChangeProps = jest.fn();
+
+            // Act
+            render(
+                <LockedEllipseSettings
+                    {...defaultProps}
+                    radius={[2, 3]}
+                    ariaLabel={undefined}
+                    onChangeProps={onChangeProps}
+                />,
+                {wrapper: RenderStateRoot},
+            );
+
+            const autoGenButton = screen.getByRole("button", {
+                name: "Auto-generate",
+            });
+            await userEvent.click(autoGenButton);
+
+            // Assert
+            expect(onChangeProps).toHaveBeenCalledWith({
+                ariaLabel:
+                    "Ellipse with x radius 2 and y radius 3, centered at (0, 0)",
+            });
+        });
+
+        test("aria label auto-generates with rotation when ellipse is rotated", async () => {
+            // Arrange
+            const onChangeProps = jest.fn();
+
+            // Act
+            render(
+                <LockedEllipseSettings
+                    {...defaultProps}
+                    radius={[2, 3]}
+                    ariaLabel={undefined}
+                    onChangeProps={onChangeProps}
+                    angle={Math.PI / 2}
+                />,
+                {wrapper: RenderStateRoot},
+            );
+
+            const autoGenButton = screen.getByRole("button", {
+                name: "Auto-generate",
+            });
+            await userEvent.click(autoGenButton);
+
+            // Assert
+            expect(onChangeProps).toHaveBeenCalledWith({
+                ariaLabel:
+                    "Ellipse with x radius 2 and y radius 3, centered at (0, 0), rotated by 90 degrees",
+            });
+        });
+
+        test("aria label auto-generates with one label", async () => {
+            // Arrange
+            const onChangeProps = jest.fn();
+            render(
+                <LockedEllipseSettings
+                    {...defaultProps}
+                    radius={[2, 2]}
+                    ariaLabel={undefined}
+                    onChangeProps={onChangeProps}
+                    labels={[
+                        {
+                            ...defaultLabel,
+                            text: "A",
+                        },
+                    ]}
+                />,
+                {wrapper: RenderStateRoot},
+            );
+
+            // Act
+            const autoGenButton = screen.getByRole("button", {
+                name: "Auto-generate",
+            });
+            await userEvent.click(autoGenButton);
+
+            // Assert
+            expect(onChangeProps).toHaveBeenCalledWith({
+                ariaLabel:
+                    "Circle with radius 2, centered at (0, 0), with label A",
+            });
+        });
+
+        test("aria label auto-generates with multiple labels", async () => {
+            // Arrange
+            const onChangeProps = jest.fn();
+            render(
+                <LockedEllipseSettings
+                    {...defaultProps}
+                    radius={[2, 2]}
+                    ariaLabel={undefined}
+                    onChangeProps={onChangeProps}
+                    labels={[
+                        {
+                            ...defaultLabel,
+                            text: "A",
+                        },
+                        {
+                            ...defaultLabel,
+                            text: "B",
+                        },
+                    ]}
+                />,
+                {wrapper: RenderStateRoot},
+            );
+
+            // Act
+            const autoGenButton = screen.getByRole("button", {
+                name: "Auto-generate",
+            });
+            await userEvent.click(autoGenButton);
+
+            // Assert
+            expect(onChangeProps).toHaveBeenCalledWith({
+                ariaLabel:
+                    "Circle with radius 2, centered at (0, 0), with labels A, B",
+            });
+        });
+    });
 });