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

## Summary:
- Adds aria label and description to whole line segment graph 
- Adds copy that distinguishes between single line segment on a coordinate plane and multiple line segments on a coordinate plane  
- Adds aria label for individual end points of line segment

Issue: LEMS-1733

## Test plan:
1. Navigate to [Chromatic](https://650db21c3f5d1b2f13c02952-crydbfdmmp.chromatic.com/?path=/docs/perseuseditor-editorpage--docs) 
2. Select Line Segment Interactive Graph from drop down
3. Validate screen reader can read line segment

### Expected behavior
#### Single Segment 
1. Screen reader reads aria label for whole graph: `A line segment on a coordinate plane.` 
2. Screen reader reads aria description for whole graph: `A line segment on a coordinate plane. Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 ${point2X} comma ${point2Y}. Segment length %(length)s units.`

#### Multiple Segments 
1. Screen reader reads aria label for whole graph: `{Number of segments} segment on a coordinate plane.` 
2. Screen reader reads aria description for whole graph: `{Number of segments} segment on a coordinate plane. Segment {N}: Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 ${point2X} comma ${point2Y}. Segment length %(length)s units.`

#### Individual Points 
1. When selected, screen reader reads aria label for end points: `Endpoint ${endpointNumber} at ${x} comma ${y}`
2. When moving a point, aria labels and descriptions adjust to include new end points and length, as appropriate

## Screenshots:
### Single Segment on a Coordinate Plane - Aria Label and Description
<img width="1576" alt="image" src="https://github.com/user-attachments/assets/82c66b8a-33ed-473d-855d-bdfb8105ee49" />

### Multiple segments on a coordinate plane - Aria Label and Description
<img width="1623" alt="image" src="https://github.com/user-attachments/assets/854ae6cd-6127-499c-9528-25baa86b7d46" />

### Individual Segment Aria Label - Description
<img width="1608" alt="image" src="https://github.com/user-attachments/assets/ac70d28e-dd31-478a-a4d1-7d11baf0c772" />

Author: anakaren-rojas

Reviewers: nishasy, anakaren-rojas, catandthemachines

Required Reviewers:

Approved By: nishasy, catandthemachines

Checks: ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x)

Pull Request URL: #2032

Author: anakaren-rojas

.changeset/fuzzy-cheetahs-develop.md

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

packages/perseus/src/strings.ts

@@ -260,6 +260,68 @@ export type PerseusStrings = {
         endingSideX: string;
         endingSideY: string;
     }) => string;
+    srSingleSegmentGraphAriaLabel: string;
+    srMultipleSegmentGraphAriaLabel: ({
+        countOfSegments,
+    }: {
+        countOfSegments: number;
+    }) => string;
+    srMultipleSegmentIndividualLabel: ({
+        point1X,
+        point1Y,
+        point2X,
+        point2Y,
+        indexOfSegment,
+    }: {
+        point1X: string;
+        point1Y: string;
+        point2X: string;
+        point2Y: string;
+        indexOfSegment: number;
+    }) => string;
+    srSingleSegmentLabel: ({
+        point1X,
+        point1Y,
+        point2X,
+        point2Y,
+    }: {
+        point1X: string;
+        point1Y: string;
+        point2X: string;
+        point2Y: string;
+    }) => string;
+    srSegmentLength: ({length}: {length: string}) => string;
+    srSingleSegmentGraphEndpointAriaLabel: ({
+        endpointNumber,
+        x,
+        y,
+    }: {
+        endpointNumber: number;
+        x: string;
+        y: string;
+    }) => string;
+    srMultipleSegmentGraphEndpointAriaLabel: ({
+        endpointNumber,
+        x,
+        y,
+        indexOfSegment,
+    }: {
+        endpointNumber: number;
+        x: string;
+        y: string;
+        indexOfSegment: number;
+    }) => string;
+    srSegmentGrabHandle: ({
+        point1X,
+        point1Y,
+        point2X,
+        point2Y,
+    }: {
+        point1X: string;
+        point1Y: string;
+        point2X: string;
+        point2Y: string;
+    }) => string;
     srLinearSystemGraph: string;
     srLinearSystemPoints: ({
         lineNumber,
@@ -525,6 +587,20 @@ export const strings = {
     srAngleGraphAriaLabel: "An angle on a coordinate plane.",
     srAngleGraphAriaDescription:
         "The angle measure is %(angleMeasure)s degrees with a vertex at %(vertexX)s comma %(vertexY)s, a point on the starting side at %(startingSideX)s comma %(startingSideY)s and a point on the ending side at %(endingSideX)s comma %(endingSideY)s",
+    srSingleSegmentGraphAriaLabel: "A line segment on a coordinate plane.",
+    srMultipleSegmentGraphAriaLabel:
+        "%(countOfSegments)s line segments on a coordinate plane.",
+    srMultipleSegmentIndividualLabel:
+        "Segment %(indexOfSegment)s: Endpoint 1 at %(point1X)s comma %(point1Y)s. Endpoint 2 %(point2X)s comma %(point2Y)s.",
+    srSingleSegmentLabel:
+        "Endpoint 1 at %(point1X)s comma %(point1Y)s. Endpoint 2 %(point2X)s comma %(point2Y)s.",
+    srSegmentLength: "Segment length %(length)s units.",
+    srSingleSegmentGraphEndpointAriaLabel:
+        "Endpoint %(endpointNumber)s at %(x)s comma %(y)s.",
+    srMultipleSegmentGraphEndpointAriaLabel:
+        "Endpoint %(endpointNumber)s on segment %(indexOfSegment)s at %(x)s comma %(y)s.",
+    srSegmentGrabHandle:
+        "Segment from %(point1X)s comma %(point1Y)s to %(point2X)s comma %(point2Y)s.",
     srLinearSystemGraph: "Two lines on a coordinate plane.",
     srLinearSystemPoints:
         "Line %(lineNumber)s has two points, point 1 at %(point1X)s comma %(point1Y)s and point 2 at %(point2X)s comma %(point2Y)s.",
@@ -759,6 +835,31 @@ export const mockStrings: PerseusStrings = {
         endingSideY,
     }) =>
         `The angle measure is ${angleMeasure} degrees with a vertex at ${vertexX} comma ${vertexY}, a point on the starting side at ${startingSideX} comma ${startingSideY} and a point on the ending side at ${endingSideX} comma ${endingSideY}.`,
+    srSingleSegmentGraphAriaLabel: "A line segment on a coordinate plane.",
+    srMultipleSegmentGraphAriaLabel: ({countOfSegments}) =>
+        `${countOfSegments} segments on a coordinate plane.`,
+    srMultipleSegmentIndividualLabel: ({
+        point1X,
+        point1Y,
+        point2X,
+        point2Y,
+        indexOfSegment,
+    }) =>
+        `Segment ${indexOfSegment}: Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 at ${point2X} comma ${point2Y}.`,
+    srSingleSegmentLabel: ({point1X, point1Y, point2X, point2Y}) =>
+        `Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 at ${point2X} comma ${point2Y}.`,
+    srSegmentLength: ({length}) => `Segment length ${length} units.`,
+    srSingleSegmentGraphEndpointAriaLabel: ({endpointNumber, x, y}) =>
+        `Endpoint ${endpointNumber} at ${x} comma ${y}.`,
+    srMultipleSegmentGraphEndpointAriaLabel: ({
+        endpointNumber,
+        x,
+        y,
+        indexOfSegment,
+    }) =>
+        `Endpoint ${endpointNumber} on segment ${indexOfSegment} at ${x} comma ${y}.`,
+    srSegmentGrabHandle: ({point1X, point1Y, point2X, point2Y}) =>
+        `Segment from ${point1X} comma ${point1Y} to ${point2X} comma ${point2Y}.`,
     srLinearSystemGraph: "Two lines on a coordinate plane.",
     srLinearSystemPoints: ({lineNumber, point1X, point1Y, point2X, point2Y}) =>
         `Line ${lineNumber} has two points, point 1 at ${point1X} comma ${point1Y} and point 2 at ${point2X} comma ${point2Y}.`,