Remove locked-figures-aria flag (#2064)

## 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: #2064
Khan · Jan 7, 2025 · 55b4615 · 55b4615
1 parent 85a5b5e
commit 55b4615
Show file tree

Hide file tree

Showing 19 changed files with 149 additions and 340 deletions.
diff --git a/.changeset/calm-mice-listen.md 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
@@ -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
@@ -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/...us-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx b/...us-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"] && (
-                <>
-                    <Strut size={spacing.small_12} />
-                    <View style={styles.horizontalRule} />
-
-                    <LockedFigureAria
-                        ariaLabel={ariaLabel}
-                        getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
-                        onChangeProps={(newProps) => {
-                            onChangeProps(newProps);
-                        }}
-                    />
-                </>
-            )}
+            <Strut size={spacing.small_12} />
+            <View style={styles.horizontalRule} />
+            <LockedFigureAria
+                ariaLabel={ariaLabel}
+                getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
+                onChangeProps={(newProps) => {
+                    onChangeProps(newProps);
+                }}
+            />
 
             {/* Visible Labels */}
             {flags?.["mafs"]?.["locked-ellipse-labels"] && (

diff --git a/...s-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx b/...s-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx
@@ -326,20 +326,15 @@ const LockedFunctionSettings = (props: Props) => {
             </PerseusEditorAccordion>
 
             {/* Aria label */}
-            {flags?.["mafs"]?.["locked-figures-aria"] && (
-                <>
-                    <Strut size={spacing.small_12} />
-                    <View style={styles.horizontalRule} />
-
-                    <LockedFigureAria
-                        ariaLabel={ariaLabel}
-                        getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
-                        onChangeProps={(newProps) => {
-                            onChangeProps(newProps);
-                        }}
-                    />
-                </>
-            )}
+            <Strut size={spacing.small_12} />
+            <View style={styles.horizontalRule} />
+            <LockedFigureAria
+                ariaLabel={ariaLabel}
+                getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
+                onChangeProps={(newProps) => {
+                    onChangeProps(newProps);
+                }}
+            />
 
             {/* Visible Labels */}
             {flags?.["mafs"]?.["locked-function-labels"] && (

diff --git a/...rseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx b/...rseus-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"] && (
-                <>
-                    <Strut size={spacing.small_12} />
-                    <View style={styles.horizontalRule} />
-
-                    <LockedFigureAria
-                        ariaLabel={ariaLabel}
-                        getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
-                        onChangeProps={(newProps) => {
-                            onChangeProps(newProps);
-                        }}
-                    />
-                </>
-            )}
+            {/* Aria label */}
+            <Strut size={spacing.small_12} />
+            <View style={styles.horizontalRule} />
+            <LockedFigureAria
+                ariaLabel={ariaLabel}
+                getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
+                onChangeProps={(newProps) => {
+                    onChangeProps(newProps);
+                }}
+            />
 
             {flags?.["mafs"]?.["locked-line-labels"] && (
                 <>

diff --git a/...seus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx b/...seus-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 && (
                 <>
                     <Strut size={spacing.small_12} />
                     <View style={styles.horizontalRule} />

diff --git a/...us-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx b/...us-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx
@@ -338,20 +338,15 @@ const LockedPolygonSettings = (props: Props) => {
             </PerseusEditorAccordion>
 
             {/* Aria label */}
-            {flags?.["mafs"]?.["locked-figures-aria"] && (
-                <>
-                    <Strut size={spacing.small_12} />
-                    <View style={styles.horizontalRule} />
-
-                    <LockedFigureAria
-                        ariaLabel={ariaLabel}
-                        getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
-                        onChangeProps={(newProps) => {
-                            onChangeProps(newProps);
-                        }}
-                    />
-                </>
-            )}
+            <Strut size={spacing.small_12} />
+            <View style={styles.horizontalRule} />
+            <LockedFigureAria
+                ariaLabel={ariaLabel}
+                getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
+                onChangeProps={(newProps) => {
+                    onChangeProps(newProps);
+                }}
+            />
 
             {/* Visible Labels */}
             {flags?.["mafs"]?.["locked-polygon-labels"] && (

diff --git a/...eus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx b/...eus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx
@@ -209,20 +209,16 @@ const LockedVectorSettings = (props: Props) => {
                 />
             </PerseusEditorAccordion>
 
-            {flags?.["mafs"]?.["locked-figures-aria"] && (
-                <>
-                    <Strut size={spacing.small_12} />
-                    <View style={styles.horizontalRule} />
-
-                    <LockedFigureAria
-                        ariaLabel={ariaLabel}
-                        getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
-                        onChangeProps={(newProps) => {
-                            onChangeProps(newProps);
-                        }}
-                    />
-                </>
-            )}
+            {/* Aria label */}
+            <Strut size={spacing.small_12} />
+            <View style={styles.horizontalRule} />
+            <LockedFigureAria
+                ariaLabel={ariaLabel}
+                getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
+                onChangeProps={(newProps) => {
+                    onChangeProps(newProps);
+                }}
+            />
 
             {flags?.["mafs"]?.["locked-vector-labels"] && (
                 <>

diff --git 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
@@ -9,68 +9,54 @@ 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<LockedFigure>;
     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 (
-                            <LockedPoint
-                                key={`point-${index}`}
-                                {...figure}
-                                flags={flags}
-                            />
+                            <LockedPoint key={`point-${index}`} {...figure} />
                         );
                     case "line":
                         return (
                             <LockedLine
                                 key={`line-${index}`}
                                 range={props.range}
                                 {...figure}
-                                flags={flags}
                             />
                         );
                     case "vector":
                         return (
-                            <LockedVector
-                                key={`vector-${index}`}
-                                {...figure}
-                                flags={flags}
-                            />
+                            <LockedVector key={`vector-${index}`} {...figure} />
                         );
                     case "ellipse":
                         return (
                             <LockedEllipse
                                 key={`ellipse-${index}`}
                                 {...figure}
-                                flags={flags}
                             />
                         );
                     case "polygon":
                         return (
                             <LockedPolygon
                                 key={`polygon-${index}`}
                                 {...figure}
-                                flags={flags}
                             />
                         );
                     case "function":
                         return (
                             <LockedFunction
                                 key={`function-${index}`}
                                 {...figure}
-                                flags={flags}
                             />
                         );
                     case "label":