From 9b1d5796157ce16bb5e6085180791e5f1100f179 Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Tue, 10 Dec 2024 11:21:52 -0800 Subject: [PATCH] [Locked Figures Aria] Update the auto-generated text to spell out commas All our interactive graph aria labels are spelling out commas in coordinate pairs for clarity. When using a coordinate pair as is, the screen reader may skip the comma and read ambiguously. Example: (1000, 975) ==> "one thousand nine hundred seventy-five" (sounds like 1975) To fix this issue and be consistent with all the other interactive graph aria labels, the locked labels' autogeneration should also spell out commas. - Spell out commas in locked figures' auto-generated aria label text Issue: none Test plan: `yarn jest --silent` Storybook - Go to http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--mafs-with-locked-figure-labels-all-flags - Go through all the different locked figures and click "auto-generate" - Note that their coordinates should all spell out the comma within the auto-generated text - Do this for point, line, vector, ellipse, and polygon (not function or label) --- .changeset/seven-planets-matter.md | 5 +++++ .../locked-figures/locked-ellipse-settings.test.tsx | 12 ++++++------ .../locked-figures/locked-ellipse-settings.tsx | 2 +- .../locked-figures/locked-line-settings.test.tsx | 12 ++++++------ .../locked-figures/locked-line-settings.tsx | 2 +- .../locked-figures/locked-point-settings.test.tsx | 6 +++--- .../locked-figures/locked-point-settings.tsx | 2 +- .../locked-figures/locked-polygon-settings.test.tsx | 6 +++--- .../locked-figures/locked-polygon-settings.tsx | 2 +- .../locked-figures/locked-vector-settings.test.tsx | 6 +++--- .../locked-figures/locked-vector-settings.tsx | 2 +- 11 files changed, 31 insertions(+), 26 deletions(-) create mode 100644 .changeset/seven-planets-matter.md diff --git a/.changeset/seven-planets-matter.md b/.changeset/seven-planets-matter.md new file mode 100644 index 0000000000..555866ebc5 --- /dev/null +++ b/.changeset/seven-planets-matter.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus-editor": patch +--- + +[Locked Figures Aria] Update the auto-generated text to spell out commas diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx index 056ab99f53..5f20a34d33 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx @@ -393,7 +393,7 @@ describe("LockedEllipseSettings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Circle with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.", + "Circle with radius 2, centered at 0 comma 0. Appearance solid gray border, with no fill.", }); }); @@ -421,7 +421,7 @@ describe("LockedEllipseSettings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Circle with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.", + "Circle with radius 2, centered at 0 comma 0. Appearance solid gray border, with no fill.", }); }); @@ -448,7 +448,7 @@ describe("LockedEllipseSettings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Ellipse with x radius 2 and y radius 3, centered at (0, 0). Appearance solid gray border, with no fill.", + "Ellipse with x radius 2 and y radius 3, centered at 0 comma 0. Appearance solid gray border, with no fill.", }); }); @@ -476,7 +476,7 @@ describe("LockedEllipseSettings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Ellipse with x radius 2 and y radius 3, centered at (0, 0), rotated by 90 degrees. Appearance solid gray border, with no fill.", + "Ellipse with x radius 2 and y radius 3, centered at 0 comma 0, rotated by 90 degrees. Appearance solid gray border, with no fill.", }); }); @@ -508,7 +508,7 @@ describe("LockedEllipseSettings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Circle spoken A with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.", + "Circle spoken A with radius 2, centered at 0 comma 0. Appearance solid gray border, with no fill.", }); }); @@ -544,7 +544,7 @@ describe("LockedEllipseSettings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Circle spoken A, spoken B with radius 2, centered at (0, 0). Appearance solid gray border, with no fill.", + "Circle spoken A, spoken B with radius 2, centered at 0 comma 0. Appearance solid gray border, with no fill.", }); }); }); diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx index 48d7066586..91ec4936c4 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx @@ -79,7 +79,7 @@ const LockedEllipseSettings = (props: Props) => { str += `Ellipse${visiblelabel} with x radius ${radius[0]} and y radius ${radius[1]}`; } - str += `, centered at (${center[0]}, ${center[1]})`; + str += `, centered at ${center[0]} comma ${center[1]}`; if (!isCircle && angle !== 0) { str += `, rotated by ${radianToDegree(angle)} degrees`; diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.test.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.test.tsx index 0d444b82e3..44f40c0183 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.test.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.test.tsx @@ -625,7 +625,7 @@ describe("LockedLineSettings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Segment from point at (0, 0) to point at (2, 2). Appearance solid gray.", + "Segment from point at 0 comma 0 to point at 2 comma 2. Appearance solid gray.", }); }); @@ -651,7 +651,7 @@ describe("LockedLineSettings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Line from point at (0, 0) to point at (2, 2). Appearance solid gray.", + "Line from point at 0 comma 0 to point at 2 comma 2. Appearance solid gray.", }); }); @@ -682,7 +682,7 @@ describe("LockedLineSettings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Line spoken A from point at (0, 0) to point at (2, 2). Appearance solid gray.", + "Line spoken A from point at 0 comma 0 to point at 2 comma 2. Appearance solid gray.", }); }); @@ -717,7 +717,7 @@ describe("LockedLineSettings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Line spoken A, spoken B from point at (0, 0) to point at (2, 2). Appearance solid gray.", + "Line spoken A, spoken B from point at 0 comma 0 to point at 2 comma 2. Appearance solid gray.", }); }); @@ -758,7 +758,7 @@ describe("LockedLineSettings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Line spoken A from point spoken C at (0, 0) to point spoken D at (2, 2). Appearance solid gray.", + "Line spoken A from point spoken C at 0 comma 0 to point spoken D at 2 comma 2. Appearance solid gray.", }); }); @@ -809,7 +809,7 @@ describe("LockedLineSettings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Line spoken A, spoken B from point spoken C, spoken C2 at (0, 0) to point spoken D, spoken D2 at (2, 2). Appearance solid gray.", + "Line spoken A, spoken B from point spoken C, spoken C2 at 0 comma 0 to point spoken D, spoken D2 at 2 comma 2. Appearance solid gray.", }); }); }); diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx index 982375bd88..da368b5f42 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx @@ -83,7 +83,7 @@ const LockedLineSettings = (props: Props) => { const point1VisibleLabel = await joinLabelsAsSpokenMath(point1.labels); const point2VisibleLabel = await joinLabelsAsSpokenMath(point2.labels); - let str = `${capitalizeKind}${visiblelabel} from point${point1VisibleLabel} at (${point1.coord[0]}, ${point1.coord[1]}) to point${point2VisibleLabel} at (${point2.coord[0]}, ${point2.coord[1]})`; + let str = `${capitalizeKind}${visiblelabel} from point${point1VisibleLabel} at ${point1.coord[0]} comma ${point1.coord[1]} to point${point2VisibleLabel} at ${point2.coord[0]} comma ${point2.coord[1]}`; const lineAppearance = generateLockedFigureAppearanceDescription( lineColor, diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx index 8f772e4ed6..026d873042 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx @@ -422,7 +422,7 @@ describe("LockedPointSettings", () => { // generateSpokenMathDetails is mocked to return the input string // with "Spoken math details for " prepended. expect(onChangeProps).toHaveBeenCalledWith({ - ariaLabel: "Point at (0, 0). Appearance solid gray.", + ariaLabel: "Point at 0 comma 0. Appearance solid gray.", }); }); @@ -454,7 +454,7 @@ describe("LockedPointSettings", () => { // generateSpokenMathDetails is mocked to return the input string // with "Spoken math details for " prepended. expect(onChangeProps).toHaveBeenCalledWith({ - ariaLabel: "Point spoken A at (0, 0). Appearance solid gray.", + ariaLabel: "Point spoken A at 0 comma 0. Appearance solid gray.", }); }); @@ -491,7 +491,7 @@ describe("LockedPointSettings", () => { // with "Spoken math details for " prepended. expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Point spoken A, spoken B at (0, 0). Appearance solid gray.", + "Point spoken A, spoken B at 0 comma 0. Appearance solid gray.", }); }); }); diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx index bceb0c2ddf..757ad272f9 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx @@ -119,7 +119,7 @@ const LockedPointSettings = (props: Props) => { async function getPrepopulatedAriaLabel() { const visiblelabel = await joinLabelsAsSpokenMath(labels); - let str = `Point${visiblelabel} at (${coord[0]}, ${coord[1]})`; + let str = `Point${visiblelabel} at ${coord[0]} comma ${coord[1]}`; const pointAppearance = generateLockedFigureAppearanceDescription(pointColor); diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.test.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.test.tsx index 62c3dd0a0a..35d485736a 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.test.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.test.tsx @@ -608,7 +608,7 @@ describe("LockedPolygonSettings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Polygon with 3 sides, vertices at (0, 0), (0, 1), (1, 1). Appearance solid gray border, with no fill.", + "Polygon with 3 sides, vertices at 0 comma 0, 0 comma 1, 1 comma 1. Appearance solid gray border, with no fill.", }); }); @@ -644,7 +644,7 @@ describe("LockedPolygonSettings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Polygon spoken A with 3 sides, vertices at (0, 0), (0, 1), (1, 1). Appearance solid gray border, with no fill.", + "Polygon spoken A with 3 sides, vertices at 0 comma 0, 0 comma 1, 1 comma 1. Appearance solid gray border, with no fill.", }); }); @@ -684,7 +684,7 @@ describe("LockedPolygonSettings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Polygon spoken A, spoken B with 3 sides, vertices at (0, 0), (0, 1), (1, 1). Appearance solid gray border, with no fill.", + "Polygon spoken A, spoken B with 3 sides, vertices at 0 comma 0, 0 comma 1, 1 comma 1. Appearance solid gray border, with no fill.", }); }); }); diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx index e5b82f114c..5619442737 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx @@ -75,7 +75,7 @@ const LockedPolygonSettings = (props: Props) => { let str = `Polygon${visiblelabel} with ${points.length} sides, vertices at `; // Add the coordinates of each point to the aria label - str += points.map(([x, y]) => `(${x}, ${y})`).join(", "); + str += points.map(([x, y]) => `${x} comma ${y}`).join(", "); const polygonAppearance = generateLockedFigureAppearanceDescription( color, diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.test.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.test.tsx index 1c52f82937..fe208e4aa5 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.test.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.test.tsx @@ -441,7 +441,7 @@ describe("Locked Vector Settings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Vector from (0, 0) to (2, 2). Appearance solid gray.", + "Vector from 0 comma 0 to 2 comma 2. Appearance solid gray.", }); }); @@ -472,7 +472,7 @@ describe("Locked Vector Settings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Vector spoken A from (0, 0) to (2, 2). Appearance solid gray.", + "Vector spoken A from 0 comma 0 to 2 comma 2. Appearance solid gray.", }); }); @@ -507,7 +507,7 @@ describe("Locked Vector Settings", () => { // Assert expect(onChangeProps).toHaveBeenCalledWith({ ariaLabel: - "Vector spoken A, spoken B from (0, 0) to (2, 2). Appearance solid gray.", + "Vector spoken A, spoken B from 0 comma 0 to 2 comma 2. Appearance solid gray.", }); }); }); diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx index 9fee83fc04..2ae3247bc1 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx @@ -72,7 +72,7 @@ const LockedVectorSettings = (props: Props) => { async function getPrepopulatedAriaLabel() { const visiblelabel = await joinLabelsAsSpokenMath(labels); - let str = `Vector${visiblelabel} from (${tail[0]}, ${tail[1]}) to (${tip[0]}, ${tip[1]})`; + let str = `Vector${visiblelabel} from ${tail[0]} comma ${tail[1]} to ${tip[0]} comma ${tip[1]}`; const vectorAppearance = generateLockedFigureAppearanceDescription(lineColor);