diff --git a/.changeset/shiny-houses-promise.md b/.changeset/shiny-houses-promise.md new file mode 100644 index 0000000000..41d71de9d2 --- /dev/null +++ b/.changeset/shiny-houses-promise.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": patch +--- + +[SR] Minor improvements to Circle graph SR strings diff --git a/packages/perseus/src/strings.ts b/packages/perseus/src/strings.ts index 3e2f355500..2e2d12372d 100644 --- a/packages/perseus/src/strings.ts +++ b/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,6 +356,9 @@ 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", @@ -363,8 +366,6 @@ export const strings: { 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, diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/circle.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/circle.tsx index 2921edf88a..d68849c674 100644 --- a/packages/perseus/src/widgets/interactive-graphs/graphs/circle.tsx +++ b/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("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 (