Skip to content

Commit c9cfba3

Browse files
authored
[Interactive Graph] Handle autogen aria label for open locked points (#3042)
## Summary: There was no indication about locked points being open in the autogen aria label. Adding that here. Issue: none ## Test plan: `pnpm jest packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx` Storybook `/?path=/docs/widgets-interactive-graph-editor-demo--docs#locked-figures` | Before | After | | --- | --- | | <img width="346" height="392" alt="Screenshot 2025-11-17 at 3 00 59 PM" src="https://github.com/user-attachments/assets/40bc6baf-c8fc-495f-b757-9ee03f2bbaa1" /> | <img width="341" height="390" alt="Screenshot 2025-11-17 at 3 01 07 PM" src="https://github.com/user-attachments/assets/dfa33563-9170-4a69-8094-58b6ae0aba9a" /> | Author: nishasy Reviewers: ivyolamit Required Reviewers: Approved By: ivyolamit Checks: ⏭️ 1 check has been skipped, ✅ 4 checks were successful, ⏹️ 6 checks were cancelled Pull Request URL: #3042
1 parent 9b50f4c commit c9cfba3

File tree

3 files changed

+39
-2
lines changed

3 files changed

+39
-2
lines changed

.changeset/hungry-brooms-talk.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@khanacademy/perseus-editor": patch
3+
---
4+
5+
[Interactive Graph] Handle autogen aria label for open locked points

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -491,4 +491,33 @@ describe("LockedPointSettings", () => {
491491
"Point spoken A, spoken B at spoken $0$ comma spoken $0$. Appearance solid gray.",
492492
});
493493
});
494+
495+
test("aria label does not include fill when filled is false", async () => {
496+
// Arrange
497+
const onChangeProps = jest.fn();
498+
499+
// Act
500+
render(
501+
<LockedPointSettings
502+
{...defaultProps}
503+
ariaLabel={undefined}
504+
onChangeProps={onChangeProps}
505+
filled={false}
506+
/>,
507+
{wrapper: RenderStateRoot},
508+
);
509+
510+
const autoGenButton = screen.getByRole("button", {
511+
name: "Auto-generate",
512+
});
513+
await userEvent.click(autoGenButton);
514+
515+
// Assert
516+
// generateSpokenMathDetails is mocked to return the input string
517+
// with "Spoken math details for " prepended.
518+
expect(onChangeProps).toHaveBeenCalledWith({
519+
ariaLabel:
520+
"Point at spoken $0$ comma spoken $0$. Appearance solid gray border, with no fill.",
521+
});
522+
});
494523
});

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,11 @@ const LockedPointSettings = (props: Props) => {
116116

117117
let str = `Point${visiblelabel} at ${spokenX} comma ${spokenY}`;
118118

119-
const pointAppearance =
120-
generateLockedFigureAppearanceDescription(pointColor);
119+
const pointAppearance = generateLockedFigureAppearanceDescription(
120+
pointColor,
121+
"solid",
122+
filled ? undefined : "none",
123+
);
121124
str += pointAppearance;
122125

123126
return str;

0 commit comments

Comments
 (0)