remove state from angle

Khan · Dec 9, 2024 · 9d478da · 9d478da
1 parent b055724
commit 9d478da
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 64 deletions.
diff --git a/packages/perseus/src/strings.ts b/packages/perseus/src/strings.ts
@@ -156,22 +156,22 @@ export type PerseusStrings = {
         y: string;
         angle: string;
     }) => string;
-    srUpdatedInitialSideAtCoordinates: ({
+    srInitialSideAtUpdatedCoordinates: ({
         x,
         y,
     }: {
         x: string;
         y: string;
     }) => string;
-    srUpdatedTerminalSideAtCoordinates: ({
+    srTerminalSideAtUpdatedCoordinates: ({
         x,
         y,
     }: {
         x: string;
         y: string;
     }) => string;
-    srUpdatedVertexAtCoordinates: ({x, y}: {x: string; y: string}) => string;
-    srUpdatedVertexWithAngleAtCoordinates: ({
+    srVertexAtUpdatedCoordinates: ({x, y}: {x: string; y: string}) => string;
+    srVertexWithAngleAtUpdatedCoordinates: ({
         x,
         y,
         angle,
@@ -392,24 +392,24 @@ export const strings: {
         message:
             "Point 2, vertex at %(x)s comma %(y)s. Angle %(angle)s degrees",
     },
-    srUpdatedInitialSideAtCoordinates: {
+    srInitialSideAtUpdatedCoordinates: {
         context:
-            "Screenreader-accessible description of an update to the initial side of an angle",
+            "Screenreader-accessible announcement of an update to the initial side of an angle",
         message: "Point 3, initial side, moved to %(x)s comma %(y)s",
     },
-    srUpdatedTerminalSideAtCoordinates: {
+    srTerminalSideAtUpdatedCoordinates: {
         context:
-            "Screen-reader accessible description of an update to the terminal side of an angle",
+            "Screen-reader accessible announcement of an update to the terminal side of an angle",
         message: "Point 1, terminal side, moved to %(x)s comma %(y)s",
     },
-    srUpdatedVertexAtCoordinates: {
+    srVertexAtUpdatedCoordinates: {
         context:
-            "Screen-reader accessible description of an update to the vertex on a graph",
+            "Screen-reader accessible announcement of an update to the vertex on a graph",
         message: "Point 2, vertex, moved to %(x)s comma %(y)s",
     },
-    srUpdatedVertexWithAngleAtCoordinates: {
+    srVertexWithAngleAtUpdatedCoordinates: {
         context:
-            "Screen-reader accessible description of an update to the vertex on a graph with an angle",
+            "Screen-reader accessible announcement of an update to the vertex on a graph with an angle",
         message:
             "Point 2, vertex, moved to %(x)s comma %(y)s. Angle %(angle)s degrees",
     },
@@ -582,13 +582,13 @@ export const mockStrings: PerseusStrings = {
     srVertexAtCoordinates: ({x, y}) => `Point 2, vertex at ${x} comma ${y}`,
     srVertexWithAngleAtCoordinates: ({x, y, angle}) =>
         `Point 2, vertex at ${x} comma ${y}. Angle ${angle} degrees`,
-    srUpdatedInitialSideAtCoordinates: ({x, y}) =>
+    srInitialSideAtUpdatedCoordinates: ({x, y}) =>
         `Point 3, initial side, moved to ${x} comma ${y}`,
-    srUpdatedTerminalSideAtCoordinates: ({x, y}) =>
+    srTerminalSideAtUpdatedCoordinates: ({x, y}) =>
         `Point 1, terminal side, moved to ${x} comma ${y}`,
-    srUpdatedVertexAtCoordinates: ({x, y}) =>
+    srVertexAtUpdatedCoordinates: ({x, y}) =>
         `Point 2, vertex, moved to ${x} comma ${y}`,
-    srUpdatedVertexWithAngleAtCoordinates: ({x, y, angle}) =>
+    srVertexWithAngleAtUpdatedCoordinates: ({x, y, angle}) =>
         `Point 2, vertex, moved to ${x} comma ${y}. Angle ${angle} degrees`,
     srInteractiveElements: ({elements}) => `Interactive elements: ${elements}`,
     srNoInteractiveElements: "No interactive elements",

diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx
@@ -108,27 +108,22 @@ function AngleGraph({dispatch, graphState}: AngleGraphProps) {
         y: srFormatNumber(y, locale),
     });
 
-    const [initialSideAriaLabel, setInitialSideAriaLabel] =
-        React.useState<string>(
-            strings.srInitialSideAtCoordinates(
-                formatCoordinates(coords[2][X], coords[2][Y]),
-            ),
-        );
-
-    const [terminalSideAriaLabel, setTerminalSideAriaLabel] =
-        React.useState<string>(
-            strings.srTerminalSideAtCoordinates(
-                formatCoordinates(coords[0][X], coords[0][Y]),
-            ),
+    const formatSideAriaLabel = (
+        side: "terminal" | "initial",
+        newPoint: vec.Vector2,
+    ): string => {
+        const formattedCoordinates = formatCoordinates(
+            newPoint[X],
+            newPoint[Y],
         );
+        const label =
+            side === "terminal"
+                ? strings.srTerminalSideAtCoordinates(formattedCoordinates)
+                : strings.srInitialSideAtCoordinates(formattedCoordinates);
+        return label;
+    };
 
-    const [vertexAriaLabel, setVertexAriaLabel] = React.useState<string>(
-        strings.srVertexAtCoordinates(
-            formatCoordinates(coords[1][X], coords[1][Y]),
-        ),
-    );
-
-    const updateVertexAriaLabel = (newPoint: vec.Vector2) => {
+    const formatVertexAriaLabel = (newPoint: vec.Vector2) => {
         const formattedVertexCoordinates = formatCoordinates(
             newPoint[X],
             newPoint[Y],
@@ -139,50 +134,31 @@ function AngleGraph({dispatch, graphState}: AngleGraphProps) {
                   angle: `${angleLabel}`,
               })
             : strings.srVertexAtCoordinates(formattedVertexCoordinates);
-        setVertexAriaLabel(label);
-    };
 
-    const updateSideAriaLabel = (
-        side: "terminal" | "initial",
-        newPoint: vec.Vector2,
-    ): void => {
-        const formattedCoordinates = formatCoordinates(
-            newPoint[X],
-            newPoint[Y],
-        );
-        side === "terminal"
-            ? setTerminalSideAriaLabel(
-                  strings.srUpdatedTerminalSideAtCoordinates(
-                      formattedCoordinates,
-                  ),
-              )
-            : setInitialSideAriaLabel(
-                  strings.srUpdatedInitialSideAtCoordinates(
-                      formattedCoordinates,
-                  ),
-              );
+        return label;
     };
 
+    const vertexAriaLabel = formatVertexAriaLabel(coords[1]);
+
+    const initialSideAriaLabel = formatSideAriaLabel("initial", coords[2]);
+
+    const terminalSideAriaLabel = formatSideAriaLabel("terminal", coords[0]);
+
     const handleSidePointMove = (
         coordIndex: number,
         newPoint: vec.Vector2,
         side: "terminal" | "initial",
     ): unknown => {
-        updateVertexAriaLabel(coords[1]);
-        updateSideAriaLabel(side, newPoint);
+        formatVertexAriaLabel(coords[1]);
+        formatSideAriaLabel(side, newPoint);
         return dispatch(actions.angle.movePoint(coordIndex, newPoint));
     };
 
     const handleVertexMove = (coordIndex: number, newPoint: vec.Vector2) => {
-        updateVertexAriaLabel(newPoint);
+        formatVertexAriaLabel(newPoint);
         return dispatch(actions.angle.movePoint(coordIndex, newPoint));
     };
 
-    React.useEffect(() => {
-        updateVertexAriaLabel(coords[1]);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [showAngles]);
-
     // Render the lines, angle, and then movable points
     return (
         <>