diff --git a/.changeset/hungry-brooms-talk.md b/.changeset/hungry-brooms-talk.md new file mode 100644 index 0000000000..4abcfbded8 --- /dev/null +++ b/.changeset/hungry-brooms-talk.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus-editor": patch +--- + +[Interactive Graph] Handle autogen aria label for open locked points 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 1dafda856e..73bdfc75d9 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 @@ -491,4 +491,33 @@ describe("LockedPointSettings", () => { "Point spoken A, spoken B at spoken $0$ comma spoken $0$. Appearance solid gray.", }); }); + + test("aria label does not include fill when filled is false", async () => { + // Arrange + const onChangeProps = jest.fn(); + + // Act + render( + , + {wrapper: RenderStateRoot}, + ); + + const autoGenButton = screen.getByRole("button", { + name: "Auto-generate", + }); + await userEvent.click(autoGenButton); + + // Assert + // generateSpokenMathDetails is mocked to return the input string + // with "Spoken math details for " prepended. + expect(onChangeProps).toHaveBeenCalledWith({ + ariaLabel: + "Point at spoken $0$ comma spoken $0$. Appearance solid gray border, with no fill.", + }); + }); }); 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 396ce8d473..ea9ab1f8df 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 @@ -116,8 +116,11 @@ const LockedPointSettings = (props: Props) => { let str = `Point${visiblelabel} at ${spokenX} comma ${spokenY}`; - const pointAppearance = - generateLockedFigureAppearanceDescription(pointColor); + const pointAppearance = generateLockedFigureAppearanceDescription( + pointColor, + "solid", + filled ? undefined : "none", + ); str += pointAppearance; return str;