[SR] Add aria-labels for x- and y-axis labels (#2221)

## Summary:
Right now if a person using a screen reader traverses through the graph, they hear "x, math" and "y, math" for the axis labels, or whatever the x and y labels are updated to by the content authors.

We need to add a description for this so people know what x and y are referring to.

- Added "X-axis" and "Y-axis" strings as `aria-label`s for the `AxisLabel` elements.
- This means that it reads the actual label as a child of this axis label group
- This is my preferred approach so that it already handles math speech wehen reading the
  TeX label, and we don't have to manually use the speech rule engine again redundantly

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

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

Storybook
- Go to any interactive graph editor story (http://localhost:6006/iframe.html?globals=&args=&id=perseuseditor-widgets-interactive-graph--interactive-graph-segment&viewMode=story)
- Use the screen reader to confirm that the axis labels now say "X-axis, group"
- Continue using the screen reader and make sure that the actual axis label is read
- Update the x and y labels to have some kind of math TeX like `\frac{1}{2}`
- Repeat the above steps and confirm that the screen reader reads the math correctly

Author: nishasy

Reviewers: nishasy, SonicScrewdriver, catandthemachines

Required Reviewers:

Approved By: SonicScrewdriver

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

Pull Request URL: #2221

.changeset/slimy-schools-brake.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[SR] Add aria-labels for x- and y-axis labels

packages/perseus/src/strings.ts

@@ -134,6 +134,8 @@ export type PerseusStrings = {
     simulationLocaleWarning: string;
     selectAnAnswer: string;
     // The following strings are used for interactive graph SR descriptions.
+    xAxis: string;
+    yAxis: string;
     addPoint: string;
     removePoint: string;
     graphKeyboardPrompt: string;
@@ -645,6 +647,8 @@ export const strings = {
     // translation tickets after all interactive graph SR strings have
     // been finalized. Remove this comment after the tickets have been
     // created.
+    xAxis: "X-axis",
+    yAxis: "Y-axis",
     srPointAtCoordinates: "Point %(num)s at %(x)s comma %(y)s.",
     srCircleGraph: "A circle on a coordinate plane.",
     srCircleShape:
@@ -902,6 +906,8 @@ export const mockStrings: PerseusStrings = {
     selectAnAnswer: "Select an answer",
 
     // The following strings are used for interactive graph SR descriptions.
+    xAxis: "X-axis",
+    yAxis: "Y-axis",
     graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
     addPoint: "Add Point",
     removePoint: "Remove Point",

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

@@ -26,6 +26,7 @@ exports[`Interactive Graph interactive-graph widget A none-type graph renders pr
                 class="default_xu2jcg-o_O-inlineStyles_16155wj"
               >
                 <span
+                  aria-label="X-axis"
                   style="position: absolute; left: 400px; top: 200px; font-size: 14px; transform: translate(7px, -50%);"
                 >
                   <span
@@ -35,6 +36,7 @@ exports[`Interactive Graph interactive-graph widget A none-type graph renders pr
                   </span>
                 </span>
                 <span
+                  aria-label="Y-axis"
                   style="position: absolute; left: 200px; top: -24px; font-size: 14px; transform: translate(-50%, 0px);"
                 >
                   <span

packages/perseus/src/widgets/interactive-graphs/backgrounds/axis-labels.tsx

@@ -7,10 +7,12 @@ import {MAX, X, Y} from "../math";
 import useGraphConfig from "../reducer/use-graph-config";
 import {replaceOutsideTeX} from "../utils";
 
+import type {I18nContextType} from "../../../components/i18n-context";
 import type {GraphDimensions} from "../types";
 
-export default function AxisLabels() {
+export default function AxisLabels({i18n}: {i18n: I18nContextType}) {
     const {range, labels, width, height} = useGraphConfig();
+    const {strings} = i18n;
 
     const yAxisLabelLocation: vec.Vector2 = [0, range[Y][MAX]];
     const xAxisLabelLocation: vec.Vector2 = [range[X][MAX], 0];
@@ -35,6 +37,7 @@ export default function AxisLabels() {
     return (
         <>
             <span
+                aria-label={strings.xAxis}
                 style={{
                     position: "absolute",
                     left: x1,
@@ -46,6 +49,7 @@ export default function AxisLabels() {
                 <TeX>{replaceOutsideTeX(xAxisLabelText)}</TeX>
             </span>
             <span
+                aria-label={strings.yAxis}
                 style={{
                     position: "absolute",
                     left: x2,