[SR] Tweak strings for Segment and Angle graphs (#2279)

## Summary: Segment - Update segment so that a singular segment doesn't have multiple layers of redundant labels (keep this for multiple segments) Angle - Update angle so the vertex point always reads the angle, not only when "show angles" is turned on. Issue: none ## Test plan: `yarn jest packages/perseus/src/widgets/interactive-graphs/graphs/segment.test.tsx` `yarn jest packages/perseus/src/widgets/interactive-graphs/graphs/angle.test.tsx` Storybook - http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--interactive-graph-segment - http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--interactive-graph-angle Author: nishasy Reviewers: catandthemachines, SonicScrewdriver Required Reviewers: Approved By: catandthemachines Checks: ✅ 8 checks were successful, ⏹️ 5 checks were cancelled Pull Request URL: #2279
Khan · Mar 5, 2025 · e02cc41 · e02cc41
1 parent 941343e
commit e02cc41
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 19 deletions.
diff --git a/.changeset/calm-dolls-dance.md b/.changeset/calm-dolls-dance.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[SR] Tweak strings for Segment and Angle graphs
diff --git a/packages/perseus/src/strings.ts b/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.",

diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/angle.test.tsx b/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.",
         );

diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx b/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,

diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/segment.test.tsx b/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.",
         );
     });
 

diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/segment.tsx b/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