[SR] Linear System - add screen reader support for Linear System interactive graph (#2030)

## Summary:
Add the aria label and descriptions for the full graph and the
interactive elements in the Linear System graph, based on the
[SRUX doc](https://khanacademy.atlassian.net/wiki/spaces/LC/pages/3460366359/Linear+Systems).

Issue: https://khanacademy.atlassian.net/browse/LEMS-1727

## Test plan:
`yarn jest packages/perseus/src/widgets/interactive-graphs/graphs/linear-system.test.tsx`

Storybook
- http://localhost:6006/iframe.html?globals=&args=&id=perseuseditor-widgets-interactive-graph--interactive-graph-linear-system&viewMode=story

View Storybook publish in the checks below to try it yourself.

https://github.com/user-attachments/assets/007a3418-5dcb-470f-a3fd-45479cc3c4d2

Author: nishasy

Reviewers: catandthemachines, benchristel, nishasy, anakaren-rojas

Required Reviewers:

Approved By: anakaren-rojas, catandthemachines

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (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)

Pull Request URL: #2030

Author: nishasy

.changeset/tidy-baboons-tie.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[SR] Linear System - add screen reader support for Linear System interactive graph

packages/perseus/src/strings.ts

@@ -260,6 +260,31 @@ export type PerseusStrings = {
         endingSideX: string;
         endingSideY: string;
     }) => string;
+    srLinearSystemGraph: string;
+    srLinearSystemPoints: ({
+        lineNumber,
+        point1X,
+        point1Y,
+        point2X,
+        point2Y,
+    }: {
+        lineNumber: number;
+        point1X: string;
+        point1Y: string;
+        point2X: string;
+        point2Y: string;
+    }) => string;
+    srLinearSystemPoint({
+        lineNumber,
+        pointSequence,
+        x,
+        y,
+    }: {
+        lineNumber: number;
+        pointSequence: number;
+        x: string;
+        y: string;
+    }): string;
     // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -480,6 +505,11 @@ 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",
+    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.",
+    srLinearSystemPoint:
+        "Point %(pointSequence)s on line %(lineNumber)s at %(x)s comma %(y)s.",
     // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -697,6 +727,11 @@ 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}.`,
+    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}.`,
+    srLinearSystemPoint: ({lineNumber, pointSequence, x, y}) =>
+        `Point ${pointSequence} on line ${lineNumber} at ${x} comma ${y}.`,
     // The above strings are used for interactive graph SR descriptions.
 };
 

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

@@ -2,6 +2,7 @@ import {vec} from "mafs";
 import * as React from "react";
 
 import {usePerseusI18n} from "../../../components/i18n-context";
+import a11y from "../../../util/a11y";
 import {X, Y, calculateAngleInDegrees, getClockwiseAngle, polar} from "../math";
 import {findIntersectionOfRays} from "../math/geometry";
 import {actions} from "../reducer/interactive-graph-action";
@@ -215,7 +216,7 @@ function AngleGraph(props: AngleGraphProps) {
                 }
                 ariaLabel={initialSideAriaLabel}
             />
-            <g id="angle-description" style={{display: "hidden"}}>
+            <g id="angle-description" style={a11y.srOnly}>
                 {wholeAngleDescription}
             </g>
         </g>

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

@@ -3,6 +3,7 @@ import * as React from "react";
 import {useRef} from "react";
 
 import {usePerseusI18n} from "../../../components/i18n-context";
+import a11y from "../../../util/a11y";
 import {snap, X, Y} from "../math";
 import {actions} from "../reducer/interactive-graph-action";
 import {getRadius} from "../reducer/interactive-graph-state";
@@ -103,10 +104,10 @@ function CircleGraph(props: CircleGraphProps) {
             />
             {/* Hidden elements to provide the descriptions for the
                 circle and radius point's `aria-describedby` properties. */}
-            <g id={radiusId} style={{display: "hidden"}}>
+            <g id={radiusId} style={a11y.srOnly}>
                 {srCircleRadius}
             </g>
-            <g id={outerPointsId} style={{display: "hidden"}}>
+            <g id={outerPointsId} style={a11y.srOnly}>
                 {srCircleOuterPoints}
             </g>
         </g>