[SR] Polygon (limited) - Add screen reader experience

packages/perseus/src/strings.ts

@@ -424,6 +424,26 @@ export type PerseusStrings = {
         point3X: string;
         point3Y: string;
     }) => string;
+    srPolygonGraph: string;
+    srPolygonGraphCoordinatePlane: string;
+    srPolygonGraphPointsNum: ({num}: {num: number}) => string;
+    srPolygonElementsNum: ({num}: {num: number}) => string;
+    srPolygonPointAngleApprox: ({angle}: {angle: string}) => string;
+    srPolygonPointAngle: ({angle}: {angle: number}) => string;
+    srPolygonSideLength: ({
+        pointNum,
+        length,
+    }: {
+        pointNum: number;
+        length: string;
+    }) => string;
+    srPolygonSideLengthApprox: ({
+        pointNum,
+        length,
+    }: {
+        pointNum: number;
+        length: string;
+    }) => string;
     // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -607,7 +627,7 @@ export const strings = {
     // translation tickets after all interactive graph SR strings have
     // been finalized. Remove this comment after the tickets have been
     // created.
-    srPointAtCoordinates: "Point %(num)s at %(x)s comma %(y)s",
+    srPointAtCoordinates: "Point %(num)s at %(x)s comma %(y)s.",
     srCircleGraph: "A circle on a coordinate plane.",
     srCircleShape:
         "Circle. The center point is at %(centerX)s comma %(centerY)s.",
@@ -683,6 +703,17 @@ export const strings = {
         "Point %(pointNumber)s on parabola in quadrant %(quadrant)s at %(x)s comma %(y)s.",
     srQuadraticInteractiveElements:
         "Parabola with points at %(point1X)s comma %(point1Y)s, %(point2X)s comma %(point2Y)s, and %(point3X)s comma %(point3Y)s.",
+    srPolygonGraph: "A polygon.",
+    srPolygonGraphCoordinatePlane: "A polygon on a coordinate plane.",
+    srPolygonGraphPointsNum: "The polygon has %(num)s points.",
+    srPolygonElementsNum: "A polygon with %(num)s points.",
+    srPolygonPointAngleApprox:
+        "Angle approximately equal to %(angle)s degrees.",
+    srPolygonPointAngle: "Angle equal to %(angle)s degrees.",
+    srPolygonSideLength:
+        "A line segment, length equal to %(length)s units, connects to point %(pointNum)s.",
+    srPolygonSideLengthApprox:
+        "A line segment, length approximately equal to %(length)s units, connects to point %(pointNum)s.",
     // The above strings are used for interactive graph SR descriptions.
 } satisfies {
     [key in keyof PerseusStrings]:
@@ -853,7 +884,7 @@ export const mockStrings: PerseusStrings = {
     removePoint: "Remove Point",
     closePolygon: "Close shape",
     openPolygon: "Re-open shape",
-    srPointAtCoordinates: ({num, x, y}) => `Point ${num} at ${x} comma ${y}`,
+    srPointAtCoordinates: ({num, x, y}) => `Point ${num} at ${x} comma ${y}.`,
     srInteractiveElements: ({elements}) => `Interactive elements: ${elements}`,
     srNoInteractiveElements: "No interactive elements",
     srCircleGraph: "A circle on a coordinate plane.",
@@ -971,6 +1002,17 @@ export const mockStrings: PerseusStrings = {
         point3Y,
     }) =>
         `Parabola with points at ${point1X} comma ${point1Y}, ${point2X} comma ${point2Y}, and ${point3X} comma ${point3Y}.`,
+    srPolygonGraph: "A polygon.",
+    srPolygonGraphCoordinatePlane: "A polygon on a coordinate plane.",
+    srPolygonGraphPointsNum: ({num}) => `The polygon has ${num} points.`,
+    srPolygonElementsNum: ({num}) => `A polygon with ${num} points.`,
+    srPolygonPointAngleApprox: ({angle}) =>
+        `Angle approximately equal to ${angle} degrees.`,
+    srPolygonPointAngle: ({angle}) => `Angle equal to ${angle} degrees.`,
+    srPolygonSideLength: ({pointNum, length}) =>
+        `A line segment, length equal to ${length} units, connects to point ${pointNum}.`,
+    srPolygonSideLengthApprox: ({pointNum, length}) =>
+        `A line segment, length approximately equal to ${length} units, connects to point ${pointNum}.`,
     // The above strings are used for interactive graph SR descriptions.
 };
 

packages/perseus/src/widgets/interactive-graphs/graphs/components/__snapshots__/movable-line.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`Rendering Does NOT render extensions of line when option is disabled 1`
       width="200"
     >
       <g
-        aria-label="Point 1 at -1 comma -1"
+        aria-label="Point 1 at -1 comma -1."
         aria-live="off"
         class="movable-point__focusable-handle"
         data-testid="movable-point__focusable-handle"
@@ -62,7 +62,7 @@ exports[`Rendering Does NOT render extensions of line when option is disabled 1`
         />
       </g>
       <g
-        aria-label="Point 2 at 1 comma 1"
+        aria-label="Point 2 at 1 comma 1."
         aria-live="off"
         class="movable-point__focusable-handle"
         data-testid="movable-point__focusable-handle"
@@ -157,7 +157,7 @@ exports[`Rendering Does NOT render extensions of line when option is not provide
       width="200"
     >
       <g
-        aria-label="Point 1 at -1 comma -1"
+        aria-label="Point 1 at -1 comma -1."
         aria-live="off"
         class="movable-point__focusable-handle"
         data-testid="movable-point__focusable-handle"
@@ -204,7 +204,7 @@ exports[`Rendering Does NOT render extensions of line when option is not provide
         />
       </g>
       <g
-        aria-label="Point 2 at 1 comma 1"
+        aria-label="Point 2 at 1 comma 1."
         aria-live="off"
         class="movable-point__focusable-handle"
         data-testid="movable-point__focusable-handle"
@@ -299,7 +299,7 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
       width="200"
     >
       <g
-        aria-label="Point 1 at -1 comma -1"
+        aria-label="Point 1 at -1 comma -1."
         aria-live="off"
         class="movable-point__focusable-handle"
         data-testid="movable-point__focusable-handle"
@@ -400,7 +400,7 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
         </g>
       </g>
       <g
-        aria-label="Point 2 at 1 comma 1"
+        aria-label="Point 2 at 1 comma 1."
         aria-live="off"
         class="movable-point__focusable-handle"
         data-testid="movable-point__focusable-handle"

packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point.test.tsx

@@ -295,7 +295,7 @@ describe("MovablePoint", () => {
             );
 
             expect(
-                screen.getByLabelText("Point 1 at 0 comma 0"),
+                screen.getByLabelText("Point 1 at 0 comma 0."),
             ).toBeInTheDocument();
         });
 
@@ -307,7 +307,7 @@ describe("MovablePoint", () => {
             );
 
             expect(
-                screen.getByLabelText("Point 2 at 0 comma 0"),
+                screen.getByLabelText("Point 2 at 0 comma 0."),
             ).toBeInTheDocument();
         });
 
@@ -356,7 +356,7 @@ describe("MovablePoint", () => {
             );
 
             const pointElement = screen.getByRole("button", {
-                name: "Point 1 at 0 comma 0",
+                name: "Point 1 at 0 comma 0.",
             });
             expect(pointElement).toHaveAttribute(
                 "aria-describedby",
@@ -377,7 +377,7 @@ describe("MovablePoint", () => {
             );
 
             expect(
-                screen.getByLabelText("Point 1 at 0 comma 0"),
+                screen.getByLabelText("Point 1 at 0 comma 0."),
             ).toHaveAttribute("aria-live", "assertive");
         });
 
@@ -389,7 +389,7 @@ describe("MovablePoint", () => {
             );
 
             expect(
-                screen.getByLabelText("Point 1 at 0 comma 0"),
+                screen.getByLabelText("Point 1 at 0 comma 0."),
             ).toHaveAttribute("aria-live", "polite");
         });
     });

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

@@ -60,9 +60,9 @@ describe("Linear graph screen reader", () => {
 
     test.each`
         element         | index | expectedValue
-        ${"point1"}     | ${0}  | ${"Point 1 at -5 comma 5"}
+        ${"point1"}     | ${0}  | ${"Point 1 at -5 comma 5."}
         ${"grabHandle"} | ${1}  | ${"Line from -5 comma 5 to 5 comma 5."}
-        ${"point2"}     | ${2}  | ${"Point 2 at 5 comma 5"}
+        ${"point2"}     | ${2}  | ${"Point 2 at 5 comma 5."}
     `(
         "should have aria label for $element on the line",
         ({index, expectedValue}) => {
@@ -200,12 +200,12 @@ describe("Linear graph screen reader", () => {
 
         // Assert
         // Check updated aria-label for the linear graph.
-        expect(point1).toHaveAttribute("aria-label", "Point 1 at -2 comma 3");
+        expect(point1).toHaveAttribute("aria-label", "Point 1 at -2 comma 3.");
         expect(grabHandle).toHaveAttribute(
             "aria-label",
             "Line from -2 comma 3 to 3 comma 3.",
         );
-        expect(point2).toHaveAttribute("aria-label", "Point 2 at 3 comma 3");
+        expect(point2).toHaveAttribute("aria-label", "Point 2 at 3 comma 3.");
     });
 
     test.each`

packages/perseus/src/widgets/interactive-graphs/graphs/point.test.ts

@@ -30,11 +30,11 @@ describe("describePointGraph", () => {
     it("describes one point", () => {
         const state: PointGraphState = {...baseState, coords: [[3, 5]]};
         expect(describePointGraph(state, mockPerseusI18nContext)).toBe(
-            "Interactive elements: Point 1 at 3 comma 5",
+            "Interactive elements: Point 1 at 3 comma 5.",
         );
     });
 
-    it("separates multiple point descriptions by commas", () => {
+    it("separates multiple point descriptions with spaces", () => {
         const state: PointGraphState = {
             ...baseState,
             coords: [
@@ -43,7 +43,7 @@ describe("describePointGraph", () => {
             ],
         };
         expect(describePointGraph(state, mockPerseusI18nContext)).toBe(
-            "Interactive elements: Point 1 at 3 comma 5, Point 2 at 2 comma 4",
+            "Interactive elements: Point 1 at 3 comma 5. Point 2 at 2 comma 4.",
         );
     });
 
@@ -53,7 +53,7 @@ describe("describePointGraph", () => {
             coords: [[-1.1234, 3.5678]],
         };
         expect(describePointGraph(state, mockPerseusI18nContext)).toBe(
-            "Interactive elements: Point 1 at -1.123 comma 3.568",
+            "Interactive elements: Point 1 at -1.123 comma 3.568.",
         );
     });
 });

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

@@ -175,6 +175,6 @@ export function describePointGraph(
     );
 
     return strings.srInteractiveElements({
-        elements: pointDescriptions.join(", "),
+        elements: pointDescriptions.join(" "),
     });
 }