From 55b4615d3297884d90e6ef4640f7202066334b0d Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Tue, 7 Jan 2025 11:06:23 -0800 Subject: [PATCH] Remove locked-figures-aria flag (#2064) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary: Remove the `locked-figures-aria` flag from the Perseus repo now that the locked figures' aria labels have been out for a while now. Issue: https://khanacademy.atlassian.net/browse/LEMS-2274 ## Test plan: `yarn jest` Author: nishasy Reviewers: anakaren-rojas, catandthemachines Required Reviewers: Approved By: anakaren-rojas, catandthemachines Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x) Pull Request URL: https://github.com/Khan/perseus/pull/2064 --- .changeset/calm-mice-listen.md | 6 + .../src/__stories__/flags-for-api-options.ts | 1 - .../interactive-graph-editor.stories.tsx | 1 - .../locked-ellipse-settings.tsx | 23 +- .../locked-function-settings.tsx | 23 +- .../locked-figures/locked-line-settings.tsx | 24 +- .../locked-figures/locked-point-settings.tsx | 2 +- .../locked-polygon-settings.tsx | 23 +- .../locked-figures/locked-vector-settings.tsx | 24 +- packages/perseus/src/types.ts | 6 - .../interactive-graphs/graph-locked-layer.tsx | 20 +- .../interactive-graph.test.tsx | 265 +++++------------- .../locked-figures/locked-ellipse.tsx | 22 +- .../locked-figures/locked-function.tsx | 10 +- .../locked-figures/locked-line.tsx | 5 +- .../locked-figures/locked-point.tsx | 12 +- .../locked-figures/locked-polygon.tsx | 10 +- .../locked-figures/locked-vector.tsx | 11 +- .../widgets/interactive-graphs/mafs-graph.tsx | 1 - 19 files changed, 149 insertions(+), 340 deletions(-) create mode 100644 .changeset/calm-mice-listen.md diff --git a/.changeset/calm-mice-listen.md b/.changeset/calm-mice-listen.md new file mode 100644 index 0000000000..44196eb580 --- /dev/null +++ b/.changeset/calm-mice-listen.md @@ -0,0 +1,6 @@ +--- +"@khanacademy/perseus": patch +"@khanacademy/perseus-editor": patch +--- + +Remove the locked-figures-aria flag diff --git a/packages/perseus-editor/src/__stories__/flags-for-api-options.ts b/packages/perseus-editor/src/__stories__/flags-for-api-options.ts index 522c25ba43..a6b5dcbd39 100644 --- a/packages/perseus-editor/src/__stories__/flags-for-api-options.ts +++ b/packages/perseus-editor/src/__stories__/flags-for-api-options.ts @@ -17,7 +17,6 @@ export const flags = { none: true, // Locked figures flags - "locked-figures-aria": true, "locked-point-labels": true, "locked-line-labels": true, "locked-vector-labels": true, diff --git a/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx b/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx index bc26d7391b..6c7d4f2ea4 100644 --- a/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx +++ b/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx @@ -161,7 +161,6 @@ export const MafsWithLockedFiguresCurrent = (): React.ReactElement => { flags: { mafs: { ...flags.mafs, - "locked-figures-aria": false, "locked-point-labels": false, "locked-line-labels": false, "locked-vector-labels": false, 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 91ec4936c4..79213f1048 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 @@ -245,20 +245,15 @@ const LockedEllipseSettings = (props: Props) => { /> {/* Aria label */} - {flags?.["mafs"]?.["locked-figures-aria"] && ( - <> - - - - { - onChangeProps(newProps); - }} - /> - - )} + + + { + onChangeProps(newProps); + }} + /> {/* Visible Labels */} {flags?.["mafs"]?.["locked-ellipse-labels"] && ( diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx index 7c62cf23d0..984891ad3b 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx @@ -326,20 +326,15 @@ const LockedFunctionSettings = (props: Props) => { {/* Aria label */} - {flags?.["mafs"]?.["locked-figures-aria"] && ( - <> - - - - { - onChangeProps(newProps); - }} - /> - - )} + + + { + onChangeProps(newProps); + }} + /> {/* Visible Labels */} {flags?.["mafs"]?.["locked-function-labels"] && ( 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 da368b5f42..738d659a42 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 @@ -271,20 +271,16 @@ const LockedLineSettings = (props: Props) => { onChangeProps={(newProps) => handleChangePoint(newProps, 1)} /> - {flags?.["mafs"]?.["locked-figures-aria"] && ( - <> - - - - { - onChangeProps(newProps); - }} - /> - - )} + {/* Aria label */} + + + { + onChangeProps(newProps); + }} + /> {flags?.["mafs"]?.["locked-line-labels"] && ( <> 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 757ad272f9..903a931796 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 @@ -242,7 +242,7 @@ const LockedPointSettings = (props: Props) => { )} - {!isDefiningPoint && flags?.["mafs"]?.["locked-figures-aria"] && ( + {!isDefiningPoint && ( <> 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 5619442737..e805294ade 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 @@ -338,20 +338,15 @@ const LockedPolygonSettings = (props: Props) => { {/* Aria label */} - {flags?.["mafs"]?.["locked-figures-aria"] && ( - <> - - - - { - onChangeProps(newProps); - }} - /> - - )} + + + { + onChangeProps(newProps); + }} + /> {/* Visible Labels */} {flags?.["mafs"]?.["locked-polygon-labels"] && ( 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 2ae3247bc1..a13cc03811 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 @@ -209,20 +209,16 @@ const LockedVectorSettings = (props: Props) => { /> - {flags?.["mafs"]?.["locked-figures-aria"] && ( - <> - - - - { - onChangeProps(newProps); - }} - /> - - )} + {/* Aria label */} + + + { + onChangeProps(newProps); + }} + /> {flags?.["mafs"]?.["locked-vector-labels"] && ( <> diff --git a/packages/perseus/src/types.ts b/packages/perseus/src/types.ts index 2535dd044a..96ef6e5dea 100644 --- a/packages/perseus/src/types.ts +++ b/packages/perseus/src/types.ts @@ -209,12 +209,6 @@ export const MafsGraphTypeFlags = [ ] as const; export const InteractiveGraphLockedFeaturesFlags = [ - /** - * Enables/disables the aria labels associated with specific locked - * figures in the updated Interactive Graph widget. - */ - "locked-figures-aria", - /** * Enables/disables the labels associated with locked points in the * updated Interactive Graph widget. diff --git a/packages/perseus/src/widgets/interactive-graphs/graph-locked-layer.tsx b/packages/perseus/src/widgets/interactive-graphs/graph-locked-layer.tsx index e1f7cef954..2f900a6f81 100644 --- a/packages/perseus/src/widgets/interactive-graphs/graph-locked-layer.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/graph-locked-layer.tsx @@ -9,28 +9,22 @@ import LockedPolygon from "./locked-figures/locked-polygon"; import LockedVector from "./locked-figures/locked-vector"; import type {LockedFigure} from "../../perseus-types"; -import type {APIOptions} from "../../types"; import type {Interval} from "mafs"; type Props = { - flags?: APIOptions["flags"]; lockedFigures: ReadonlyArray; range: [x: Interval, y: Interval]; }; const GraphLockedLayer = (props: Props) => { - const {flags, lockedFigures} = props; + const {lockedFigures} = props; return ( <> {lockedFigures.map((figure, index) => { switch (figure.type) { case "point": return ( - + ); case "line": return ( @@ -38,23 +32,17 @@ const GraphLockedLayer = (props: Props) => { key={`line-${index}`} range={props.range} {...figure} - flags={flags} /> ); case "vector": return ( - + ); case "ellipse": return ( ); case "polygon": @@ -62,7 +50,6 @@ const GraphLockedLayer = (props: Props) => { ); case "function": @@ -70,7 +57,6 @@ const GraphLockedLayer = (props: Props) => { ); case "label": diff --git a/packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx b/packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx index 1f42feb27d..2b7fb03595 100644 --- a/packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx @@ -545,13 +545,7 @@ describe("Interactive Graph", function () { // Arrange const {container} = renderQuestion( segmentWithLockedPointsWithColorQuestion, - { - flags: { - mafs: { - segment: true, - }, - }, - }, + apiOptions, ); // Act @@ -581,14 +575,7 @@ describe("Interactive Graph", function () { .build(); const {container} = renderQuestion( lockedPointWithAriaLabelQuestion, - { - flags: { - mafs: { - segment: true, - "locked-figures-aria": true, - }, - }, - }, + apiOptions, ); // Act @@ -604,13 +591,10 @@ describe("Interactive Graph", function () { const simpleLockedPointQuestion = interactiveGraphQuestionBuilder() .addLockedPointAt(0, 0) .build(); - const {container} = renderQuestion(simpleLockedPointQuestion, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + simpleLockedPointQuestion, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -622,13 +606,10 @@ describe("Interactive Graph", function () { it("should render locked lines", () => { // Arrange - const {container} = renderQuestion(segmentWithLockedLineQuestion, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + segmentWithLockedLineQuestion, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -643,13 +624,10 @@ describe("Interactive Graph", function () { it("should render locked lines with styles", () => { // Arrange - const {container} = renderQuestion(segmentWithLockedLineQuestion, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + segmentWithLockedLineQuestion, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -666,13 +644,10 @@ describe("Interactive Graph", function () { it("should render locked lines with shown points", async () => { // Arrange - const {container} = renderQuestion(segmentWithLockedLineQuestion, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + segmentWithLockedLineQuestion, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -717,14 +692,7 @@ describe("Interactive Graph", function () { .build(); const {container} = renderQuestion( lockedLineWithAriaLabelQuestion, - { - flags: { - mafs: { - segment: true, - "locked-figures-aria": true, - }, - }, - }, + apiOptions, ); // Act @@ -740,13 +708,10 @@ describe("Interactive Graph", function () { const simpleLockedLinequestion = interactiveGraphQuestionBuilder() .addLockedLine([0, 0], [2, 2]) .build(); - const {container} = renderQuestion(simpleLockedLinequestion, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + simpleLockedLinequestion, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -758,13 +723,10 @@ describe("Interactive Graph", function () { it("should render locked vectors", async () => { // Arrange - const {container} = renderQuestion(segmentWithLockedVectors, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + segmentWithLockedVectors, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -816,14 +778,7 @@ describe("Interactive Graph", function () { .build(); const {container} = renderQuestion( lockedVectorWithAriaLabelQuestion, - { - flags: { - mafs: { - segment: true, - "locked-figures-aria": true, - }, - }, - }, + apiOptions, ); // Act @@ -839,13 +794,10 @@ describe("Interactive Graph", function () { const simpleLockedVectorquestion = interactiveGraphQuestionBuilder() .addLockedVector([0, 0], [2, 2]) .build(); - const {container} = renderQuestion(simpleLockedVectorquestion, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + simpleLockedVectorquestion, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -857,13 +809,10 @@ describe("Interactive Graph", function () { it("should render locked ellipses", async () => { // Arrange - const {container} = renderQuestion(segmentWithLockedEllipses, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + segmentWithLockedEllipses, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -887,13 +836,10 @@ describe("Interactive Graph", function () { it("should render locked ellipses with white fill", async () => { // Arrange - const {container} = renderQuestion(segmentWithLockedEllipseWhite, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + segmentWithLockedEllipseWhite, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -924,14 +870,7 @@ describe("Interactive Graph", function () { .build(); const {container} = renderQuestion( lockedEllipseWithAriaLabelQuestion, - { - flags: { - mafs: { - segment: true, - "locked-figures-aria": true, - }, - }, - }, + apiOptions, ); // Act @@ -948,13 +887,10 @@ describe("Interactive Graph", function () { interactiveGraphQuestionBuilder() .addLockedEllipse([0, 0], [2, 2]) .build(); - const {container} = renderQuestion(simpleLockedEllipsequestion, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + simpleLockedEllipsequestion, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -966,13 +902,10 @@ describe("Interactive Graph", function () { it("should render locked polygons with style", async () => { // Arrange - const {container} = renderQuestion(segmentWithLockedPolygons, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + segmentWithLockedPolygons, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -998,13 +931,10 @@ describe("Interactive Graph", function () { it("should render locked polygons with white fill", async () => { // Arrange - const {container} = renderQuestion(segmentWithLockedPolygonWhite, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + segmentWithLockedPolygonWhite, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -1029,13 +959,10 @@ describe("Interactive Graph", function () { it("should render vertices of locked polygons with showVertices", async () => { // Arrange - const {container} = renderQuestion(segmentWithLockedPolygons, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + segmentWithLockedPolygons, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -1106,14 +1033,7 @@ describe("Interactive Graph", function () { .build(); const {container} = renderQuestion( lockedPolygonWithAriaLabelQuestion, - { - flags: { - mafs: { - segment: true, - "locked-figures-aria": true, - }, - }, - }, + apiOptions, ); // Act @@ -1134,13 +1054,10 @@ describe("Interactive Graph", function () { [1, 1], ]) .build(); - const {container} = renderQuestion(simpleLockedPolygonQuestion, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + simpleLockedPolygonQuestion, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -1157,13 +1074,7 @@ describe("Interactive Graph", function () { color: "green", strokeStyle: "dashed", }), - { - flags: { - mafs: { - segment: true, - }, - }, - }, + apiOptions, ); // Act @@ -1229,14 +1140,7 @@ describe("Interactive Graph", function () { .build(); const {container} = renderQuestion( lockedFunctionWithAriaLabelQuestion, - { - flags: { - mafs: { - segment: true, - "locked-figures-aria": true, - }, - }, - }, + apiOptions, ); // Act @@ -1253,13 +1157,10 @@ describe("Interactive Graph", function () { interactiveGraphQuestionBuilder() .addLockedFunction("x^2") .build(); - const {container} = renderQuestion(simpleLockedFunctionquestion, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + simpleLockedFunctionquestion, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -1271,13 +1172,10 @@ describe("Interactive Graph", function () { it("should render locked labels", async () => { // Arrange - const {container} = renderQuestion(segmentWithLockedLabels, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + segmentWithLockedLabels, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -1494,13 +1392,10 @@ describe("Interactive Graph", function () { it("should have an aria-label and description if they are provided", async () => { // Arrange - const {container} = renderQuestion(interactiveGraphWithAriaLabel, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion( + interactiveGraphWithAriaLabel, + apiOptions, + ); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -1516,13 +1411,7 @@ describe("Interactive Graph", function () { it("should not have an aria-label or description if they are not provided", async () => { // Arrange - const {container} = renderQuestion(segmentQuestion, { - flags: { - mafs: { - segment: true, - }, - }, - }); + const {container} = renderQuestion(segmentQuestion, apiOptions); // Act // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access diff --git a/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-ellipse.tsx b/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-ellipse.tsx index 18ed154e4f..1cee97aac5 100644 --- a/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-ellipse.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-ellipse.tsx @@ -8,25 +8,11 @@ import { type LockedEllipseType, } from "../../../perseus-types"; -import type {APIOptions} from "../../../types"; +const LockedEllipse = (props: LockedEllipseType) => { + const {center, radius, angle, color, fillStyle, strokeStyle, ariaLabel} = + props; -type Props = LockedEllipseType & { - flags?: APIOptions["flags"]; -}; - -const LockedEllipse = (props: Props) => { - const { - center, - radius, - angle, - color, - fillStyle, - strokeStyle, - ariaLabel, - flags, - } = props; - - const hasAria = ariaLabel && flags?.["mafs"]?.["locked-figures-aria"]; + const hasAria = !!ariaLabel; return ( { +const LockedFunction = (props: LockedFunctionType) => { type Equation = { [k: string]: any; eval: (number) => number; @@ -28,8 +23,7 @@ const LockedFunction = (props: Props) => { domain, }; - const hasAria = - props.ariaLabel && props.flags?.["mafs"]?.["locked-figures-aria"]; + const hasAria = !!props.ariaLabel; useEffect(() => { // Parsing the equation in a "useEffect" hook saves about 2ms each frame diff --git a/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-line.tsx b/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-line.tsx index 42114fff3b..353ce6e98a 100644 --- a/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-line.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-line.tsx @@ -10,11 +10,9 @@ import {getIntersectionOfRayWithBox} from "../graphs/utils"; import {X, Y, calculateAngleInDegrees} from "../math"; import type {LockedLineType} from "../../../perseus-types"; -import type {APIOptions} from "../../../types"; import type {Interval} from "mafs"; type Props = LockedLineType & { - flags?: APIOptions["flags"]; range: [Interval, Interval]; }; @@ -27,12 +25,11 @@ const LockedLine = (props: Props) => { showPoint1, showPoint2, ariaLabel, - flags, range, } = props; const [point1, point2] = points; - const hasAria = ariaLabel && flags?.["mafs"]?.["locked-figures-aria"]; + const hasAria = !!ariaLabel; let line; diff --git a/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-point.tsx b/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-point.tsx index fd854d67b3..71d88153fb 100644 --- a/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-point.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-point.tsx @@ -4,17 +4,11 @@ import * as React from "react"; import {lockedFigureColors, type LockedPointType} from "../../../perseus-types"; -import type {APIOptions} from "../../../types"; - -type Props = LockedPointType & { - flags?: APIOptions["flags"]; -}; - -const LockedPoint = (props: Props) => { - const {flags, color, coord, filled, ariaLabel} = props; +const LockedPoint = (props: LockedPointType) => { + const {color, coord, filled, ariaLabel} = props; const [x, y] = coord; - const hasAria = ariaLabel && flags?.["mafs"]?.["locked-figures-aria"]; + const hasAria = !!ariaLabel; return ( { +const LockedPolygon = (props: LockedPolygonType) => { const {points, color, showVertices, fillStyle, strokeStyle} = props; - const hasAria = - props.ariaLabel && props.flags?.["mafs"]?.["locked-figures-aria"]; + const hasAria = !!props.ariaLabel; return ( { - const {color, points, ariaLabel, flags} = props; +const LockedVector = (props: LockedVectorType) => { + const {color, points, ariaLabel} = props; const [tail, tip] = points; - const hasAria = ariaLabel && flags?.["mafs"]?.["locked-figures-aria"]; + const hasAria = !!ariaLabel; return ( { {/* Locked figures layer */} {props.lockedFigures && (