[SR] Tweak strings for Segment and Angle graphs

.changeset/calm-dolls-dance.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[SR] Tweak strings for Segment and Angle graphs

packages/perseus/src/strings.ts

@@ -235,7 +235,6 @@ export type PerseusStrings = {
     }) => string;
     srAngleStartingSide: ({x, y}: {x: string; y: string}) => string;
     srAngleEndingSide: ({x, y}: {x: string; y: string}) => string;
-    srAngleVertex: ({x, y}: {x: string; y: string}) => string;
     srAngleVertexWithAngleMeasure: ({
         x,
         y,
@@ -726,7 +725,6 @@ export const strings = {
         "Line going through point %(point1X)s comma %(point1Y)s and point %(point2X)s comma %(point2Y)s.",
     srAngleStartingSide: "Point 3, starting side at %(x)s comma %(y)s.",
     srAngleEndingSide: "Point 2, ending side at %(x)s comma %(y)s.",
-    srAngleVertex: "Point 1, vertex at %(x)s comma %(y)s.",
     srAngleVertexWithAngleMeasure:
         "Point 1, vertex at %(x)s comma %(y)s. Angle %(angleMeasure)s degrees.",
     srAngleGraphAriaLabel: "An angle on a coordinate plane.",
@@ -1024,7 +1022,6 @@ export const mockStrings: PerseusStrings = {
     srAngleStartingSide: ({x, y}) =>
         `Point 3, starting side at ${x} comma ${y}.`,
     srAngleEndingSide: ({x, y}) => `Point 2, ending side at ${x} comma ${y}.`,
-    srAngleVertex: ({x, y}) => `Point 1, vertex at ${x} comma ${y}.`,
     srAngleVertexWithAngleMeasure: ({x, y, angleMeasure}) =>
         `Point 1, vertex at ${x} comma ${y}. Angle ${angleMeasure} degrees.`,
     srAngleGraphAriaLabel: "An angle on a coordinate plane.",

packages/perseus/src/widgets/interactive-graphs/graphs/angle.test.tsx

@@ -120,7 +120,9 @@ describe("Angle graph screen reader", () => {
         // Vertex first
         const [vertex, point1, point2] = points;
 
-        expect(vertex).toHaveAccessibleName("Point 1, vertex at 0 comma 0.");
+        expect(vertex).toHaveAccessibleName(
+            "Point 1, vertex at 0 comma 0. Angle 90 degrees.",
+        );
         expect(point1).toHaveAccessibleName(
             "Point 2, ending side at -1 comma 1.",
         );

packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx

@@ -189,7 +189,7 @@ function describeAngleGraph(
     i18n: I18nContextType,
 ): Record<string, string> {
     const {strings, locale} = i18n;
-    const {coords, allowReflexAngles, showAngles} = state;
+    const {coords, allowReflexAngles} = state;
     const [endingSide, vertex, startingSide] = coords;
 
     const angleMeasure = srFormatNumber(
@@ -215,16 +215,11 @@ function describeAngleGraph(
         x: srFormatNumber(endingSide[X], locale),
         y: srFormatNumber(endingSide[Y], locale),
     });
-    const srAngleVertex = showAngles
-        ? strings.srAngleVertexWithAngleMeasure({
-              x: srFormatNumber(vertex[X], locale),
-              y: srFormatNumber(vertex[Y], locale),
-              angleMeasure,
-          })
-        : strings.srAngleVertex({
-              x: srFormatNumber(vertex[X], locale),
-              y: srFormatNumber(vertex[Y], locale),
-          });
+    const srAngleVertex = strings.srAngleVertexWithAngleMeasure({
+        x: srFormatNumber(vertex[X], locale),
+        y: srFormatNumber(vertex[Y], locale),
+        angleMeasure,
+    });
 
     return {
         srAngleGraphAriaLabel,

packages/perseus/src/widgets/interactive-graphs/graphs/segment.test.tsx

@@ -83,7 +83,7 @@ describe("Segment graph screen reader", () => {
             "A line segment on a coordinate plane.",
         );
         expect(segmentGraph).toHaveAccessibleDescription(
-            "Endpoint 1 at -5 comma 5. Endpoint 2 at 5 comma 5.",
+            "Endpoint 1 at -5 comma 5. Endpoint 2 at 5 comma 5. Segment length 10 units.",
         );
     });
 

packages/perseus/src/widgets/interactive-graphs/graphs/segment.tsx

@@ -102,12 +102,18 @@ const SegmentGraph = ({dispatch, graphState}: SegmentProps) => {
     return (
         <g
             aria-label={wholeSegmentGraphAriaLabel}
-            aria-describedby={wholeGraphDescriptionId}
+            aria-describedby={`${wholeGraphDescriptionId} ${segments.length === 1 && lengthDescriptionId}`}
         >
             {segments?.map((segment, i) => (
                 <g
-                    aria-label={getIndividualSegmentAriaLabel(segment, i)}
-                    aria-describedby={lengthDescriptionId}
+                    aria-label={
+                        segments.length === 1
+                            ? undefined
+                            : getIndividualSegmentAriaLabel(segment, i)
+                    }
+                    aria-describedby={
+                        segments.length === 1 ? undefined : lengthDescriptionId
+                    }
                     key={`${segmentUniqueId}-${i}`}
                 >
                     <MovableLine