feat(LEMS-1733): adds aria labels to line segment

.changeset/fuzzy-cheetahs-develop.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+adds aria labels to line segment

packages/perseus/src/strings.ts

@@ -258,6 +258,29 @@ export type PerseusStrings = {
         tsX: string;
         tsY: string;
     }) => string;
+    srSegmentGraphAriaLabel: string;
+    srSegmentGraphAriaDescription: ({
+        point1X,
+        point1Y,
+        point2X,
+        point2Y,
+        length,
+    }: {
+        point1X: string;
+        point1Y: string;
+        point2X: string;
+        point2Y: string;
+        length: string;
+    }) => string;
+    srSegmentGraphEndpointAriaLabel: ({
+        endpointNumber,
+        x,
+        y,
+    }: {
+        endpointNumber: number;
+        x: string;
+        y: string;
+    }) => string;
     // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -543,13 +566,33 @@ export const strings: {
         message:
             "Point 2, vertex at %(x)s comma %(y)s. Angle %(angleMeasure)s degrees",
     },
-    srAngleGraphAriaLabel: "An angle on a coordinate plane.",
+    srAngleGraphAriaLabel: {
+        context:
+            "Screenreader-accessible label for an angle on a coordinate plane.",
+        message: "An angle on a coordinate plane",
+    },
     srAngleGraphAriaDescription: {
         context:
             "Screenreader-only description of an angle on a coordinate plane.",
         message:
             "The angle measure is %(angleMeasure)s degrees with a vertex at %(vertexX)s comma %(vertexY)s, a point on the initial side at %(isX)s comma %(isY)s and a point on the terminal side at %(tsX)s comma %(tsY)s",
     },
+    srSegmentGraphAriaLabel: {
+        context:
+            "Screenreader-accessible description of a line segment on a coordinate plane.",
+        message: "A line segment on a coordinate plane",
+    },
+    srSegmentGraphAriaDescription: {
+        context:
+            "Screenreader-only description of a line segment on a coordinate plane.",
+        message:
+            "Endpoint 1 at %(point1X)s comma %(point1Y)s. Endpoint 2 %(point2X)s comma %(point2Y)s. Segment length %(length)s",
+    },
+    srSegmentGraphEndpointAriaLabel: {
+        context:
+            "Screenreader-accessible label for an endpoint of a line segment on a coordinate plane.",
+        message: "Endpoint $(endpointNumber)s at $(x)s comma $(y)s",
+    },
     // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -767,5 +810,16 @@ export const mockStrings: PerseusStrings = {
         tsY,
     }) =>
         `The angle measure is ${angleMeasure} degrees with a vertex at ${vertexX} comma ${vertexY}, a point on the initial side at ${isX} comma ${isY} and a point on the terminal side at ${tsX} comma ${tsY}.`,
+    srSegmentGraphAriaLabel: "A line segment on a coordinate plane.",
+    srSegmentGraphAriaDescription: ({
+        point1X,
+        point1Y,
+        point2X,
+        point2Y,
+        length,
+    }) =>
+        `Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 at ${point2X} comma ${point2Y}. Segment length ${length}`,
+    srSegmentGraphEndpointAriaLabel: ({endpointNumber, x, y}) =>
+        `Endpoint ${endpointNumber} at ${x} comma ${y}`,
     // The above strings are used for interactive graph SR descriptions.
 };

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

@@ -1,8 +1,12 @@
+import {point as kpoint} from "@khanacademy/kmath";
 import * as React from "react";
 
+import {usePerseusI18n} from "../../../components/i18n-context";
+import {X, Y} from "../math";
 import {actions} from "../reducer/interactive-graph-action";
 
 import {MovableLine} from "./components/movable-line";
+import {srFormatNumber} from "./screenreader-text";
 
 import type {
     Dispatch,
@@ -24,12 +28,36 @@ export function renderSegmentGraph(
 
 type SegmentProps = MafsGraphProps<SegmentGraphState>;
 
-const SegmentGraph = (props: SegmentProps) => {
-    const {dispatch} = props;
-    const {coords: segments} = props.graphState;
+const SegmentGraph = ({dispatch, graphState}: SegmentProps) => {
+    const {coords: segments} = graphState;
+    const {strings, locale} = usePerseusI18n();
+    const lengthOfSegment =
+        segments[0] && kpoint.distanceToPoint(...segments[0]);
+
+    const wholeSegmentAriaLabel = strings.srSegmentGraphAriaLabel;
+    const wholeSegmentAriaDescription =
+        segments[0] &&
+        strings.srSegmentGraphAriaDescription({
+            point1X: srFormatNumber(segments[0][0][X], locale),
+            point1Y: srFormatNumber(segments[0][0][Y], locale),
+            point2X: srFormatNumber(segments[0][1][X], locale),
+            point2Y: srFormatNumber(segments[0][1][Y], locale),
+            length: srFormatNumber(lengthOfSegment, locale),
+        });
+
+    function formatSegment(endpointNumber: number, x: number, y: number) {
+        return strings.srSegmentGraphEndpointAriaLabel({
+            endpointNumber: endpointNumber,
+            x: srFormatNumber(x, locale),
+            y: srFormatNumber(y, locale),
+        });
+    }
 
     return (
-        <>
+        <g
+            aria-label={wholeSegmentAriaLabel}
+            aria-describedby="segment-description"
+        >
             {segments?.map((segment, i) => (
                 <MovableLine
                     key={i}
@@ -49,8 +77,23 @@ const SegmentGraph = (props: SegmentProps) => {
                             ),
                         );
                     }}
+                    ariaLabels={{
+                        point1AriaLabel: formatSegment(
+                            1,
+                            segment[0][X],
+                            segment[0][Y],
+                        ),
+                        point2AriaLabel: formatSegment(
+                            2,
+                            segment[1][X],
+                            segment[1][Y],
+                        ),
+                    }}
                 />
             ))}
-        </>
+            <g id="segment-description" style={{display: "hidden"}}>
+                {wholeSegmentAriaDescription}
+            </g>
+        </g>
     );
 };

packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx

@@ -154,8 +154,8 @@ describe("MafsGraph", () => {
             />,
         );
 
-        expectLabelInDoc("Point 1 at 0 comma 0");
-        expectLabelInDoc("Point 2 at -7 comma 0.5");
+        expectLabelInDoc("Endpoint 1 at 0 comma 0");
+        expectLabelInDoc("Endpoint 2 at -7 comma 0.5");
     });
 
     it("renders ARIA labels for each point (multiple segments)", () => {
@@ -187,10 +187,10 @@ describe("MafsGraph", () => {
             />,
         );
 
-        expectLabelInDoc("Point 1 at 0 comma 0");
-        expectLabelInDoc("Point 2 at -7 comma 0.5");
-        expectLabelInDoc("Point 1 at 1 comma 1");
-        expectLabelInDoc("Point 2 at 7 comma 0.5");
+        expectLabelInDoc("Endpoint 1 at 0 comma 0");
+        expectLabelInDoc("Endpoint 2 at -7 comma 0.5");
+        expectLabelInDoc("Endpoint 1 at 1 comma 1");
+        expectLabelInDoc("Endpoint 2 at 7 comma 0.5");
     });
 
     it("renders ARIA labels for each point (linear)", () => {