[SR] Minor improvements to Circle graph SR strings (#2017)

## Summary:
- Update the variable names to start with `sr` prefix.
- Use `srFormatNumber()` to make sure the numbers are
  formatted correctly.
- Update the coordinate types to `string` in the strings
  instead of `number` since they are now using
  `srFormatNumber()` (which returns a string)

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

## Test plan:
`yarn jest`

- Go to http://localhost:6006/iframe.html?globals=&args=&id=perseuseditor-widgets-interactive-graph--interactive-graph-circle&viewMode=story
- Confirm nothing has changed from before

Author: nishasy

Reviewers: catandthemachines, anakaren-rojas

Required Reviewers:

Approved By: 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), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x)

Pull Request URL: #2017

.changeset/shiny-houses-promise.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[SR] Minor improvements to Circle graph SR strings

packages/perseus/src/strings.ts

@@ -130,11 +130,11 @@ export type PerseusStrings = {
     tan: string;
     simulationLoadFail: string;
     simulationLocaleWarning: string;
+    selectAnAnswer: string;
+    // The following strings are used for interactive graph SR descriptions.
     addPoint: string;
     removePoint: string;
     graphKeyboardPrompt: string;
-    selectAnAnswer: string;
-    // The following strings are used for interactive graph SR descriptions.
     closePolygon: string;
     openPolygon: string;
     srPointAtCoordinates: ({
@@ -148,23 +148,23 @@ export type PerseusStrings = {
     }) => string;
     srInteractiveElements: ({elements}: {elements: string}) => string;
     srNoInteractiveElements: string;
-    circleGraphAriaLabel: string;
-    circleShapeAriaLabel: ({
+    srCircleGraph: string;
+    srCircleShape: ({
         centerX,
         centerY,
     }: {
-        centerX: number;
-        centerY: number;
+        centerX: string;
+        centerY: string;
     }) => string;
-    circleRadiusPointAriaLabel: ({
+    srCircleRadiusPoint: ({
         radiusPointX,
         radiusPointY,
     }: {
-        radiusPointX: number;
-        radiusPointY: number;
+        radiusPointX: string;
+        radiusPointY: string;
     }) => string;
-    circleRadiusDescription: ({radius}: {radius: number}) => string;
-    circleOuterPointsDescription: ({
+    srCircleRadius: ({radius}: {radius: number}) => string;
+    srCircleOuterPoints: ({
         point1X,
         point1Y,
         point2X,
@@ -174,14 +174,14 @@ export type PerseusStrings = {
         point4X,
         point4Y,
     }: {
-        point1X: number;
-        point1Y: number;
-        point2X: number;
-        point2Y: number;
-        point3X: number;
-        point3Y: number;
-        point4X: number;
-        point4Y: number;
+        point1X: string;
+        point1Y: string;
+        point2X: string;
+        point2Y: string;
+        point3X: string;
+        point3Y: string;
+        point4X: string;
+        point4Y: string;
     }) => string;
     // The above strings are used for interactive graph SR descriptions.
 };
@@ -356,15 +356,16 @@ export const strings: {
     simulationLoadFail: "Sorry, this simulation cannot load.",
     simulationLocaleWarning:
         "Sorry, this simulation isn't available in your language.",
+    selectAnAnswer: "Select an answer",
+
+    // The following strings are used for interactive graph SR descriptions.
     addPoint: "Add Point",
     removePoint: "Remove Point",
     graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
     closePolygon: "Close shape",
     openPolygon: "Re-open shape",
     srInteractiveElements: "Interactive elements: %(elements)s",
     srNoInteractiveElements: "No interactive elements",
-    selectAnAnswer: "Select an answer",
-
     // TODO(LEMS-2660): The following strings are ones that will need
     // translation tickets after all interactive graph SR strings have
     // been finalized. Remove this comment after the tickets have been
@@ -373,27 +374,27 @@ export const strings: {
         context: "Screenreader-accessible description of a point on a graph",
         message: "Point %(num)s at %(x)s comma %(y)s",
     },
-    circleGraphAriaLabel: {
+    srCircleGraph: {
         context: "Aria label for the circle graph as a whole.",
         message: "A circle on a coordinate plane.",
     },
-    circleShapeAriaLabel: {
+    srCircleShape: {
         context:
             "Aria label for the interactive circle shape in a circle graph.",
         message:
             "Circle. The center point is at %(centerX)s comma %(centerY)s.",
     },
-    circleRadiusPointAriaLabel: {
+    srCircleRadiusPoint: {
         context:
             "Aria label for the interactive point that sits on the edge of the circle in a circle graph. Moving this point updates the radius of the circle",
         message: "Radius point at %(radiusPointX)s comma %(radiusPointY)s.",
     },
-    circleRadiusDescription: {
+    srCircleRadius: {
         context:
             "Screenreader-only description of the radius of a circle in a circle graph.",
         message: "Circle radius is %(radius)s.",
     },
-    circleOuterPointsDescription: {
+    srCircleOuterPoints: {
         context:
             "Screenreader-only description of key points on a circle in a circle graph.",
         message:
@@ -556,24 +557,24 @@ export const mockStrings: PerseusStrings = {
     simulationLoadFail: "Sorry, this simulation cannot load.",
     simulationLocaleWarning:
         "Sorry, this simulation isn't available in your language.",
-    addPoint: "Add Point",
-    removePoint: "Remove Point",
-    graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
     selectAnAnswer: "Select an answer",
 
     // The following strings are used for interactive graph SR descriptions.
+    graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
+    addPoint: "Add Point",
+    removePoint: "Remove Point",
     closePolygon: "Close shape",
     openPolygon: "Re-open shape",
     srPointAtCoordinates: ({num, x, y}) => `Point ${num} at ${x} comma ${y}`,
     srInteractiveElements: ({elements}) => `Interactive elements: ${elements}`,
     srNoInteractiveElements: "No interactive elements",
-    circleGraphAriaLabel: "A circle on a coordinate plane.",
-    circleShapeAriaLabel: ({centerX, centerY}) =>
+    srCircleGraph: "A circle on a coordinate plane.",
+    srCircleShape: ({centerX, centerY}) =>
         `Circle. The center point is at ${centerX} comma ${centerY}.`,
-    circleRadiusPointAriaLabel: ({radiusPointX, radiusPointY}) =>
+    srCircleRadiusPoint: ({radiusPointX, radiusPointY}) =>
         `Radius point at ${radiusPointX} comma ${radiusPointY}.`,
-    circleRadiusDescription: ({radius}) => `Circle radius is ${radius}.`,
-    circleOuterPointsDescription: ({
+    srCircleRadius: ({radius}) => `Circle radius is ${radius}.`,
+    srCircleOuterPoints: ({
         point1X,
         point1Y,
         point2X,

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

@@ -9,6 +9,7 @@ import {getRadius} from "../reducer/interactive-graph-state";
 import useGraphConfig from "../reducer/use-graph-config";
 
 import {MovablePoint} from "./components/movable-point";
+import {srFormatNumber} from "./screenreader-text";
 import {useDraggable} from "./use-draggable";
 import {
     useTransformDimensionsToPixels,
@@ -39,7 +40,7 @@ function CircleGraph(props: CircleGraphProps) {
     const {dispatch, graphState} = props;
     const {center, radiusPoint} = graphState;
 
-    const {strings} = usePerseusI18n();
+    const {strings, locale} = usePerseusI18n();
     const [radiusPointAriaLive, setRadiusPointAriaLive] =
         React.useState<AriaLive>("off");
 
@@ -50,27 +51,27 @@ function CircleGraph(props: CircleGraphProps) {
     const outerPointsId = id + "-outer-points";
 
     // Aria label strings
-    const circleGraphAriaLabel = strings.circleGraphAriaLabel;
-    const circleShapeAriaLabel = strings.circleShapeAriaLabel({
-        centerX: center[0],
-        centerY: center[1],
+    const circleGraphAriaLabel = strings.srCircleGraph;
+    const circleShapeAriaLabel = strings.srCircleShape({
+        centerX: srFormatNumber(center[0], locale),
+        centerY: srFormatNumber(center[1], locale),
     });
-    const circleRadiusPointAriaLabel = strings.circleRadiusPointAriaLabel({
-        radiusPointX: radiusPoint[0],
-        radiusPointY: radiusPoint[1],
+    const circleRadiusPointAriaLabel = strings.srCircleRadiusPoint({
+        radiusPointX: srFormatNumber(radiusPoint[0], locale),
+        radiusPointY: srFormatNumber(radiusPoint[1], locale),
     });
-    const circleRadiusDescription = strings.circleRadiusDescription({
+    const circleRadiusDescription = strings.srCircleRadius({
         radius,
     });
-    const circleOuterPointsDescription = strings.circleOuterPointsDescription({
-        point1X: center[0] + radius,
-        point1Y: center[1],
-        point2X: center[0],
-        point2Y: center[1] + radius,
-        point3X: center[0] - radius,
-        point3Y: center[1],
-        point4X: center[0],
-        point4Y: center[1] - radius,
+    const circleOuterPointsDescription = strings.srCircleOuterPoints({
+        point1X: srFormatNumber(center[0] + radius, locale),
+        point1Y: srFormatNumber(center[1], locale),
+        point2X: srFormatNumber(center[0], locale),
+        point2Y: srFormatNumber(center[1] + radius, locale),
+        point3X: srFormatNumber(center[0] - radius, locale),
+        point3Y: srFormatNumber(center[1], locale),
+        point4X: srFormatNumber(center[0], locale),
+        point4Y: srFormatNumber(center[1] - radius, locale),
     });
 
     return (