From a249b5420fba7c55cfaf29524c8aa89ac548e292 Mon Sep 17 00:00:00 2001 From: Anakaren Rojas Date: Thu, 26 Dec 2024 13:38:08 -0800 Subject: [PATCH 1/4] update terminology for angle graphs --- packages/perseus/src/strings.ts | 34 +++++++++++-------- .../interactive-graphs/graphs/angle.tsx | 8 ++--- .../interactive-graphs/mafs-graph.test.tsx | 2 +- 3 files changed, 24 insertions(+), 20 deletions(-) diff --git a/packages/perseus/src/strings.ts b/packages/perseus/src/strings.ts index 2443644c8c..a97fe057af 100644 --- a/packages/perseus/src/strings.ts +++ b/packages/perseus/src/strings.ts @@ -245,18 +245,18 @@ export type PerseusStrings = { angleMeasure, vertexX, vertexY, - isX, - isY, - tsX, - tsY, + startingSideX, + startingSideY, + endingSideX, + endingSideY, }: { angleMeasure: string; vertexX: string; vertexY: string; - isX: string; - isY: string; - tsX: string; - tsY: string; + startingSideX: string; + startingSideY: string; + endingSideX: string; + endingSideY: string; }) => string; // The above strings are used for interactive graph SR descriptions. }; @@ -543,12 +543,16 @@ export const strings: { message: "Point 2, vertex at %(x)s comma %(y)s. Angle %(angleMeasure)s degrees", }, - srAngleGraphAriaLabel: "An angle on a coordinate plane.", + srAngleGraphAriaLabel: { + context: + "Screenreader-accessible label of an angle graph on a coordinate plane", + message: "An angle on a coordinate plane", + }, srAngleGraphAriaDescription: { context: "Screenreader-only description of an angle on a coordinate plane.", message: - "The angle measure is %(angleMeasure)s degrees with a vertex at %(vertexX)s comma %(vertexY)s, a point on the initial side at %(isX)s comma %(isY)s and a point on the terminal side at %(tsX)s comma %(tsY)s", + "The angle measure is %(angleMeasure)s degrees with a vertex at %(vertexX)s comma %(vertexY)s, a point on the starting side at %(isX)s comma %(isY)s and a point on the ending side at %(tsX)s comma %(tsY)s", }, // The above strings are used for interactive graph SR descriptions. }; @@ -761,11 +765,11 @@ export const mockStrings: PerseusStrings = { angleMeasure, vertexX, vertexY, - isX, - isY, - tsX, - tsY, + startingSideX, + startingSideY, + endingSideX, + endingSideY, }) => - `The angle measure is ${angleMeasure} degrees with a vertex at ${vertexX} comma ${vertexY}, a point on the initial side at ${isX} comma ${isY} and a point on the terminal side at ${tsX} comma ${tsY}.`, + `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}.`, // The above strings are used for interactive graph SR descriptions. }; diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx index ecc93225dd..0ecb3f8e88 100644 --- a/packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx @@ -112,10 +112,10 @@ function AngleGraph(props: AngleGraphProps) { angleMeasure, vertexX: srFormatNumber(coords[1][X], locale), vertexY: srFormatNumber(coords[1][Y], locale), - isX: srFormatNumber(coords[2][X], locale), - isY: srFormatNumber(coords[2][Y], locale), - tsX: srFormatNumber(coords[0][X], locale), - tsY: srFormatNumber(coords[0][Y], locale), + startingSideX: srFormatNumber(coords[2][X], locale), + startingSideY: srFormatNumber(coords[2][Y], locale), + endingSideX: srFormatNumber(coords[0][X], locale), + endingSideY: srFormatNumber(coords[0][Y], locale), }); const formatCoordinates = (x: number, y: number) => ({ diff --git a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx index d9b4f0d03f..6acf462f4b 100644 --- a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx @@ -569,7 +569,7 @@ describe("MafsGraph", () => { "angle-description", ); expect(angleGraph).toHaveTextContent( - "The angle measure is 270 degrees with a vertex at 0 comma 0, a point on the initial side at 1 comma 1 and a point on the terminal side at -1 comma 1.", + "The angle measure is 270 degrees with a vertex at 0 comma 0, a point on the starting side at 1 comma 1 and a point on the ending side at -1 comma 1.", ); }); From 365c452374603ca5ac2446f6103be5480da35f24 Mon Sep 17 00:00:00 2001 From: Anakaren Rojas Date: Thu, 26 Dec 2024 13:54:09 -0800 Subject: [PATCH 2/4] docs(changeset): update terminology for angle sides --- .changeset/happy-mugs-yell.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/happy-mugs-yell.md diff --git a/.changeset/happy-mugs-yell.md b/.changeset/happy-mugs-yell.md new file mode 100644 index 0000000000..a4e85e4bdc --- /dev/null +++ b/.changeset/happy-mugs-yell.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": patch +--- + +update terminology for angle sides From 3c4992532fcc17790d8e2560f6919534c00783f0 Mon Sep 17 00:00:00 2001 From: Anakaren Rojas Date: Fri, 27 Dec 2024 09:40:57 -0800 Subject: [PATCH 3/4] add period to sentence --- packages/perseus/src/strings.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/perseus/src/strings.ts b/packages/perseus/src/strings.ts index a97fe057af..df5b52d545 100644 --- a/packages/perseus/src/strings.ts +++ b/packages/perseus/src/strings.ts @@ -546,7 +546,7 @@ export const strings: { srAngleGraphAriaLabel: { context: "Screenreader-accessible label of an angle graph on a coordinate plane", - message: "An angle on a coordinate plane", + message: "An angle on a coordinate plane.", }, srAngleGraphAriaDescription: { context: From f456d9c2b1160976ac12f9dadeadcf13f72d551b Mon Sep 17 00:00:00 2001 From: Anakaren Rojas Date: Thu, 2 Jan 2025 08:53:25 -0800 Subject: [PATCH 4/4] fix isX and isY to startingSideX and startingSideY --- packages/perseus/src/strings.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/perseus/src/strings.ts b/packages/perseus/src/strings.ts index df5b52d545..fd4e86265c 100644 --- a/packages/perseus/src/strings.ts +++ b/packages/perseus/src/strings.ts @@ -552,7 +552,7 @@ export const strings: { context: "Screenreader-only description of an angle on a coordinate plane.", message: - "The angle measure is %(angleMeasure)s degrees with a vertex at %(vertexX)s comma %(vertexY)s, a point on the starting side at %(isX)s comma %(isY)s and a point on the ending side at %(tsX)s comma %(tsY)s", + "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", }, // The above strings are used for interactive graph SR descriptions. };