From dc879ed09cf6c3454057de214b2fbf1ae2e5f668 Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Wed, 10 Jun 2026 15:51:47 -0700
Subject: [PATCH 01/10] [LEMS-4131/poc-improve-editor-controls-contrast]
 docs(changeset):

---
 .changeset/shiny-dodos-eat.md | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 .changeset/shiny-dodos-eat.md

diff --git a/.changeset/shiny-dodos-eat.md b/.changeset/shiny-dodos-eat.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/shiny-dodos-eat.md
@@ -0,0 +1,2 @@
+---
+---

From e8bd0d1259d82013fcdbde69fd9adf8ce467a4b2 Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Wed, 10 Jun 2026 18:13:47 -0700
Subject: [PATCH 02/10] [LEMS-4131/poc-improve-editor-controls-contrast] POC
 Improve disabled editor contrast by letting Wonder Blocks own the disabled
 state

---
 packages/perseus-editor/package.json          |   2 +
 .../src/components/segmented-control.tsx      | 223 ++++++++
 .../src/styles/perseus-editor.css             |  26 +-
 .../__tests__/numeric-input-editor.test.tsx   |  29 +-
 .../src/widgets/expression-editor.tsx         |  16 +-
 .../src/widgets/graded-group-editor.tsx       |   3 +
 .../src/widgets/graded-group-set-editor.tsx   |   5 +-
 .../components/interactive-graph-sr-tree.tsx  |  35 +-
 .../locked-figures/locked-figure-select.tsx   |   4 +-
 .../locked-figures/locked-figures-section.tsx |   6 +-
 .../src/widgets/numeric-input-editor.tsx      | 519 ++++++++----------
 .../src/widgets/radio/editor.tsx              |   6 +-
 .../radio/radio-option-settings-actions.tsx   |   7 +
 .../widgets/radio/radio-option-settings.tsx   |  89 ++-
 .../src/widgets/radio/radio-status-pill.tsx   |  72 ++-
 .../perseus/src/components/button-group.tsx   |  16 +
 .../src/widgets/label-image/answer-pill.tsx   |   7 +
 17 files changed, 632 insertions(+), 433 deletions(-)
 create mode 100644 packages/perseus-editor/src/components/segmented-control.tsx

diff --git a/packages/perseus-editor/package.json b/packages/perseus-editor/package.json
index ab76181538c..132daa7544e 100644
--- a/packages/perseus-editor/package.json
+++ b/packages/perseus-editor/package.json
@@ -51,6 +51,7 @@
     "devDependencies": {
         "@khanacademy/mathjax-renderer": "catalog:devDeps",
         "@khanacademy/wonder-blocks-accordion": "catalog:devDeps",
+        "@khanacademy/wonder-blocks-badge": "catalog:devDeps",
         "@khanacademy/wonder-blocks-banner": "catalog:devDeps",
         "@khanacademy/wonder-blocks-button": "catalog:devDeps",
         "@khanacademy/wonder-blocks-clickable": "catalog:devDeps",
@@ -83,6 +84,7 @@
     "peerDependencies": {
         "@khanacademy/mathjax-renderer": "catalog:peerDeps",
         "@khanacademy/wonder-blocks-accordion": "catalog:peerDeps",
+        "@khanacademy/wonder-blocks-badge": "catalog:peerDeps",
         "@khanacademy/wonder-blocks-banner": "catalog:peerDeps",
         "@khanacademy/wonder-blocks-button": "catalog:peerDeps",
         "@khanacademy/wonder-blocks-clickable": "catalog:peerDeps",
diff --git a/packages/perseus-editor/src/components/segmented-control.tsx b/packages/perseus-editor/src/components/segmented-control.tsx
new file mode 100644
index 00000000000..001244e0c73
--- /dev/null
+++ b/packages/perseus-editor/src/components/segmented-control.tsx
@@ -0,0 +1,223 @@
+import Clickable from "@khanacademy/wonder-blocks-clickable";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {
+    border,
+    font,
+    semanticColor,
+    sizing,
+} from "@khanacademy/wonder-blocks-tokens";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
+/**
+ * A single selectable segment. Built on Wonder Blocks `Clickable` (the same
+ * primitive `Pill` uses) so it gets focus handling and a real `disabled` /
+ * `aria-disabled` state for free, while letting us render arbitrary children
+ * (math, icons) and set a `radio`/`checkbox` role.
+ *
+ * Disabled styling intentionally uses the WB disabled tokens so it reads as
+ * disabled consistently with the rest of the design system (no opacity hack).
+ */
+type ToggleButtonProps = {
+    selected: boolean;
+    onClick: () => void;
+    disabled?: boolean;
+    role?: "radio" | "checkbox";
+    "aria-label"?: string;
+    children: React.ReactNode;
+    style?: StyleType;
+};
+
+export function ToggleButton({
+    selected,
+    onClick,
+    disabled = false,
+    role = "radio",
+    children,
+    style,
+    "aria-label": ariaLabel,
+}: ToggleButtonProps): React.ReactElement {
+    return (
+        <Clickable
+            role={role}
+            aria-checked={selected}
+            aria-label={ariaLabel}
+            disabled={disabled}
+            onClick={onClick}
+            style={[styles.reset, style]}
+        >
+            {({hovered, pressed}) => (
+                <View
+                    style={[
+                        styles.segment,
+                        selected && styles.segmentSelected,
+                        !disabled &&
+                            !selected &&
+                            (hovered || pressed) &&
+                            styles.segmentHovered,
+                        disabled && styles.segmentDisabled,
+                        disabled && selected && styles.segmentDisabledSelected,
+                    ]}
+                >
+                    {children}
+                </View>
+            )}
+        </Clickable>
+    );
+}
+
+/**
+ * A row of mutually-exclusive (single-select) segments — a segmented control.
+ * Replaces the deprecated `Pill`-as-button pattern. Pass `disabled` to disable
+ * the whole group (e.g. `editingDisabled`).
+ */
+type Option = {
+    value: string;
+    label: React.ReactNode;
+    ariaLabel?: string;
+};
+
+type SegmentedControlProps = {
+    options: ReadonlyArray<Option>;
+    selectedValue: string | null | undefined;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    "aria-label"?: string;
+};
+
+export function SegmentedControl({
+    options,
+    selectedValue,
+    onChange,
+    disabled = false,
+    "aria-label": ariaLabel,
+}: SegmentedControlProps): React.ReactElement {
+    return (
+        <View role="radiogroup" aria-label={ariaLabel} style={styles.group}>
+            {options.map((option) => (
+                <ToggleButton
+                    key={option.value}
+                    role="radio"
+                    selected={option.value === selectedValue}
+                    aria-label={option.ariaLabel}
+                    disabled={disabled}
+                    onClick={() => onChange(option.value)}
+                >
+                    {option.label}
+                </ToggleButton>
+            ))}
+        </View>
+    );
+}
+
+/**
+ * A group of independent (multi-select) toggles — i.e. a set of checkboxes
+ * styled as buttons. Unlike `SegmentedControl`, more than one can be selected,
+ * and the group wraps onto multiple rows as an aligned grid (consistent row and
+ * column gaps) when it doesn't fit on one line. `onToggle` is called with the
+ * value that was clicked; the caller flips it in/out of `selectedValues`.
+ */
+type ToggleButtonGroupProps = {
+    options: ReadonlyArray<Option>;
+    selectedValues: ReadonlyArray<string>;
+    onToggle: (value: string) => void;
+    disabled?: boolean;
+    "aria-label"?: string;
+};
+
+export function ToggleButtonGroup({
+    options,
+    selectedValues,
+    onToggle,
+    disabled = false,
+    "aria-label": ariaLabel,
+}: ToggleButtonGroupProps): React.ReactElement {
+    return (
+        <View role="group" aria-label={ariaLabel} style={styles.wrapGroup}>
+            {options.map((option) => (
+                <ToggleButton
+                    key={option.value}
+                    role="checkbox"
+                    selected={selectedValues.includes(option.value)}
+                    aria-label={option.ariaLabel}
+                    disabled={disabled}
+                    onClick={() => onToggle(option.value)}
+                >
+                    {option.label}
+                </ToggleButton>
+            ))}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    // inline-flex so the (single-select) group flows inline with adjacent
+    // labels/badges (e.g. the "Status" label) instead of wrapping onto its own
+    // line. It stays cohesive — its segments never split across lines; the whole
+    // group wraps below the label as a unit if there isn't room.
+    group: {
+        display: "inline-flex",
+        flexDirection: "row",
+        alignItems: "center",
+        verticalAlign: "middle",
+        gap: sizing.size_080,
+    },
+    // Multi-select group: wraps onto multiple rows as an aligned grid with
+    // consistent row + column gaps. Stretch to the full available width so it
+    // only wraps when the segments genuinely don't fit on one line (not because
+    // a flex parent shrank it to content width).
+    wrapGroup: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        alignItems: "center",
+        alignSelf: "stretch",
+        gap: sizing.size_080,
+    },
+    // Reset the Clickable's native <button> chrome; the visual lives on the
+    // inner View so it can react to hovered/pressed state. The keyboard focus
+    // ring is a rounded box-shadow (follows the border radius, unlike `outline`)
+    // shown only on `:focus-visible` so it doesn't appear after a mouse click.
+    reset: {
+        borderRadius: border.radius.radius_040,
+        ":focus-visible": {
+            outline: "none",
+            boxShadow: `0 0 0 ${border.width.medium} ${semanticColor.focus.outer}`,
+        },
+    },
+    segment: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingBlock: sizing.size_040,
+        paddingInline: sizing.size_120,
+        borderRadius: border.radius.radius_040,
+        border: `${border.width.thin} solid ${semanticColor.core.border.neutral.subtle}`,
+        backgroundColor: semanticColor.core.background.base.default,
+        color: semanticColor.core.foreground.neutral.strong,
+        fontSize: font.body.size.small,
+        lineHeight: font.body.lineHeight.small,
+        whiteSpace: "nowrap",
+    },
+    segmentSelected: {
+        backgroundColor: semanticColor.core.background.instructive.default,
+        borderColor: semanticColor.core.background.instructive.default,
+        color: semanticColor.core.foreground.knockout.default,
+    },
+    segmentHovered: {
+        borderColor: semanticColor.core.border.neutral.default,
+        backgroundColor: semanticColor.core.background.neutral.subtle,
+    },
+    segmentDisabled: {
+        backgroundColor: semanticColor.core.background.disabled.subtle,
+        borderColor: semanticColor.core.border.disabled.default,
+        color: semanticColor.core.foreground.disabled.default,
+        cursor: "not-allowed",
+    },
+    segmentDisabledSelected: {
+        backgroundColor: semanticColor.core.background.disabled.strong,
+        borderColor: semanticColor.core.background.disabled.strong,
+        color: semanticColor.core.foreground.disabled.strong,
+    },
+});
diff --git a/packages/perseus-editor/src/styles/perseus-editor.css b/packages/perseus-editor/src/styles/perseus-editor.css
index d2f901fdb53..62a93b7d683 100644
--- a/packages/perseus-editor/src/styles/perseus-editor.css
+++ b/packages/perseus-editor/src/styles/perseus-editor.css
@@ -1062,25 +1062,33 @@ breaks the layout depending on the widget editors used.*/
  * Applied when editingDisabled=true to prevent content creators from making
  * changes while still allowing them to view the editor interface.
  *
- * Targets all form controls and interactive elements within disabled editors.
+ * The editor content is wrapped in a <fieldset disabled>, and the interactive
+ * controls are Wonder Blocks components that render their own accessible
+ * disabled state. So we deliberately DO NOT dim everything with `opacity`
+ * anymore — opacity is inherited by the content (text and math) and dropped it
+ * below a readable contrast (see LEMS-4131). We only add a muted background and
+ * a not-allowed cursor to the non-WB native and MathQuill inputs, using the WB
+ * disabled tokens so they read as disabled consistently with the design system.
  */
 .perseus-single-editor.perseus-editor-disabled input,
-.perseus-single-editor.perseus-editor-disabled textarea,
 .perseus-single-editor.perseus-editor-disabled select,
-.perseus-single-editor.perseus-editor-disabled checkbox,
 .perseus-single-editor.perseus-editor-disabled .perseus-math-input,
 .perseus-single-editor.perseus-editor-disabled .keypad-input {
-    opacity: 0.6 !important;
     background-color: var(
-        --wb-semanticColor-core-background-neutral-subtle
+        --wb-semanticColor-input-disabled-background
     ) !important;
     cursor: not-allowed !important;
-    border-color: var(--wb-semanticColor-core-border-neutral-subtle) !important;
+    border-color: var(--wb-semanticColor-input-disabled-border) !important;
 }
 
-/* We want to keep the button colors as it often helps denote correctness. */
-.perseus-single-editor.perseus-editor-disabled button {
-    opacity: 0.6 !important;
+/* The markdown field renders widget-reference highlights in a transparent
+   underlay that sits behind the textarea, so tint the container — not the
+   textarea — to keep the highlights visible while still reading as disabled. */
+.perseus-single-editor.perseus-editor-disabled .perseus-textarea-pair {
+    background-color: var(
+        --wb-semanticColor-input-disabled-background
+    ) !important;
+    border-color: var(--wb-semanticColor-input-disabled-border) !important;
     cursor: not-allowed !important;
 }
 
diff --git a/packages/perseus-editor/src/widgets/__tests__/numeric-input-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/numeric-input-editor.test.tsx
index 590b027a612..9857d6f200e 100644
--- a/packages/perseus-editor/src/widgets/__tests__/numeric-input-editor.test.tsx
+++ b/packages/perseus-editor/src/widgets/__tests__/numeric-input-editor.test.tsx
@@ -37,7 +37,7 @@ describe("numeric-input-editor", () => {
         render(<NumericInputEditor onChange={onChangeMock} />);
 
         await userEvent.click(
-            within(screen.getByRole("group", {name: /^Width/})).getByRole(
+            within(screen.getByRole("radiogroup", {name: /^Width/})).getByRole(
                 "radio",
                 {name: "Normal (80px)"},
             ),
@@ -55,7 +55,7 @@ describe("numeric-input-editor", () => {
         render(<NumericInputEditor onChange={onChangeMock} />);
 
         await userEvent.click(
-            within(screen.getByRole("group", {name: /^Width/})).getByRole(
+            within(screen.getByRole("radiogroup", {name: /^Width/})).getByRole(
                 "radio",
                 {name: "Small (40px)"},
             ),
@@ -73,10 +73,9 @@ describe("numeric-input-editor", () => {
         render(<NumericInputEditor onChange={onChangeMock} />);
 
         await userEvent.click(
-            within(screen.getByRole("group", {name: /^Alignment/})).getByRole(
-                "radio",
-                {name: "Right"},
-            ),
+            within(
+                screen.getByRole("radiogroup", {name: /^Alignment/}),
+            ).getByRole("radio", {name: "Right"}),
         );
 
         expect(onChangeMock).toHaveBeenCalledWith({rightAlign: true});
@@ -89,7 +88,7 @@ describe("numeric-input-editor", () => {
 
         await userEvent.click(
             within(
-                screen.getByRole("group", {name: /^Number style/}),
+                screen.getByRole("radiogroup", {name: /^Number style/}),
             ).getByRole("radio", {name: "Coefficient"}),
         );
 
@@ -103,7 +102,7 @@ describe("numeric-input-editor", () => {
 
         await userEvent.click(
             within(
-                screen.getByRole("group", {name: /^Answer formats are/}),
+                screen.getByRole("radiogroup", {name: /^Answer formats are/}),
             ).getByRole("radio", {name: "Required"}),
         );
 
@@ -156,7 +155,7 @@ describe("numeric-input-editor", () => {
         render(<StatefulNumericInputEditor />);
 
         const input = screen.getByRole("textbox", {
-            name: "User input:",
+            name: "User input",
         });
 
         await userEvent.type(input, "6/8");
@@ -171,7 +170,9 @@ describe("numeric-input-editor", () => {
 
         await userEvent.click(
             within(
-                screen.getByRole("group", {name: /^Unsimplified answers are/}),
+                screen.getByRole("radiogroup", {
+                    name: /^Unsimplified answers are/,
+                }),
             ).getByRole("radio", {name: "Ungraded"}),
         );
 
@@ -191,7 +192,9 @@ describe("numeric-input-editor", () => {
 
         await userEvent.click(
             within(
-                screen.getByRole("group", {name: /^Unsimplified answers are/}),
+                screen.getByRole("radiogroup", {
+                    name: /^Unsimplified answers are/,
+                }),
             ).getByRole("radio", {name: "Accepted"}),
         );
 
@@ -211,7 +214,9 @@ describe("numeric-input-editor", () => {
 
         await userEvent.click(
             within(
-                screen.getByRole("group", {name: /^Unsimplified answers are/}),
+                screen.getByRole("radiogroup", {
+                    name: /^Unsimplified answers are/,
+                }),
             ).getByRole("radio", {name: "Wrong"}),
         );
 
diff --git a/packages/perseus-editor/src/widgets/expression-editor.tsx b/packages/perseus-editor/src/widgets/expression-editor.tsx
index 264f49a5d2c..a954b381cc4 100644
--- a/packages/perseus-editor/src/widgets/expression-editor.tsx
+++ b/packages/perseus-editor/src/widgets/expression-editor.tsx
@@ -20,6 +20,7 @@ import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
 import _ from "underscore";
 
+import type {APIOptionsWithDefaults} from "@khanacademy/perseus";
 import type {
     PerseusExpressionWidgetOptions,
     LegacyButtonSets,
@@ -34,6 +35,7 @@ const {ButtonGroup, InfoTip} = components;
 type Props = {
     widgetId?: string;
     value?: string;
+    apiOptions?: APIOptionsWithDefaults;
     onChange: (newValues: Partial<PerseusExpressionWidgetOptions>) => void;
 } & Omit<PerseusExpressionWidgetOptions, "buttonsVisible">;
 
@@ -288,6 +290,7 @@ class ExpressionEditor extends React.Component<Props, State> {
     };
 
     render(): React.ReactNode {
+        const editingDisabled = this.props.apiOptions?.editingDisabled ?? false;
         const answerOptions: React.JSX.Element[] = this.props.answerForms.map(
             (ans: AnswerForm, index: number) => {
                 const expressionProps: Partial<
@@ -315,6 +318,7 @@ class ExpressionEditor extends React.Component<Props, State> {
                     <AnswerOption
                         key={ans.key}
                         considered={ans.considered}
+                        editingDisabled={editingDisabled}
                         // eslint-disable-next-line no-restricted-syntax
                         expressionProps={expressionProps as any}
                         form={ans.form}
@@ -461,7 +465,11 @@ class ExpressionEditor extends React.Component<Props, State> {
                 <View style={{gap: spacing.xSmall_8}}>{answerOptions}</View>
 
                 <Strut size={spacing.small_12} />
-                <Button size="small" onClick={this.newAnswer}>
+                <Button
+                    size="small"
+                    disabled={editingDisabled}
+                    onClick={this.newAnswer}
+                >
                     Add new answer
                 </Button>
             </View>
@@ -478,6 +486,7 @@ const findNextIn = function <T>(arr: ReadonlyArray<T>, val: T) {
 
 type AnswerOptionProps = {
     considered: (typeof PerseusExpressionAnswerFormConsidered)[number];
+    editingDisabled: boolean;
     expressionProps: React.ComponentProps<typeof Expression>;
 
     // Must the answer have the same form as this answer.
@@ -525,10 +534,12 @@ class AnswerOption extends React.Component<
     };
 
     render(): React.ReactNode {
+        const {editingDisabled} = this.props;
         const removeButton = this.state.deleteFocused ? (
             <>
                 <Button
                     size="small"
+                    disabled={editingDisabled}
                     onClick={this.handleImSure}
                     actionType="destructive"
                 >
@@ -537,6 +548,7 @@ class AnswerOption extends React.Component<
                 <Strut size={spacing.small_12} />
                 <Button
                     size="small"
+                    disabled={editingDisabled}
                     onClick={this.handleCancelDelete}
                     kind="secondary"
                 >
@@ -546,6 +558,7 @@ class AnswerOption extends React.Component<
         ) : (
             <Button
                 size="small"
+                disabled={editingDisabled}
                 onClick={this.handleDelete}
                 actionType="destructive"
                 kind="tertiary"
@@ -560,6 +573,7 @@ class AnswerOption extends React.Component<
                 <ButtonGroup
                     onChange={this.toggleConsidered}
                     allowEmpty={false}
+                    disabled={editingDisabled}
                     value={this.props.considered}
                     selectedButtonStyle={
                         consideredButtonStyles[this.props.considered]
diff --git a/packages/perseus-editor/src/widgets/graded-group-editor.tsx b/packages/perseus-editor/src/widgets/graded-group-editor.tsx
index 8bf34fb3798..f406ddaa235 100644
--- a/packages/perseus-editor/src/widgets/graded-group-editor.tsx
+++ b/packages/perseus-editor/src/widgets/graded-group-editor.tsx
@@ -72,6 +72,7 @@ class GradedGroupEditor extends React.Component<Props> {
     };
 
     render(): React.ReactNode {
+        const editingDisabled = this.props.apiOptions?.editingDisabled ?? false;
         return (
             <div className="perseus-group-editor">
                 <div className="perseus-widget-row">
@@ -102,6 +103,7 @@ class GradedGroupEditor extends React.Component<Props> {
                         type="button"
                         style={{marginTop: 10}}
                         className="add-hint simple-button orange"
+                        disabled={editingDisabled}
                         onClick={this.handleAddHint}
                     >
                         <InlineIcon {...iconPlus} /> Add a hint
@@ -135,6 +137,7 @@ class GradedGroupEditor extends React.Component<Props> {
                         <button
                             type="button"
                             className="remove-hint simple-button orange"
+                            disabled={editingDisabled}
                             onClick={this.handleRemoveHint}
                         >
                             <InlineIcon {...iconTrash} /> Remove this hint
diff --git a/packages/perseus-editor/src/widgets/graded-group-set-editor.tsx b/packages/perseus-editor/src/widgets/graded-group-set-editor.tsx
index bb28171fe77..512e14ca914 100644
--- a/packages/perseus-editor/src/widgets/graded-group-set-editor.tsx
+++ b/packages/perseus-editor/src/widgets/graded-group-set-editor.tsx
@@ -87,10 +87,13 @@ class GradedGroupSetEditor extends React.Component<Props> {
     };
 
     render(): React.ReactNode {
+        const editingDisabled = this.props.apiOptions?.editingDisabled ?? false;
         return (
             <div className="perseus-group-editor">
                 {this.renderGroups()}
-                <button onClick={this.addGroup}>Add group</button>
+                <button onClick={this.addGroup} disabled={editingDisabled}>
+                    Add group
+                </button>
             </div>
         );
     }
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-sr-tree.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-sr-tree.tsx
index c474736de3a..15efa96054a 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-sr-tree.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-sr-tree.tsx
@@ -1,7 +1,7 @@
 import {components} from "@khanacademy/perseus";
+import {NeutralBadge, StatusBadge} from "@khanacademy/wonder-blocks-badge";
 import {addStyle, View} from "@khanacademy/wonder-blocks-core";
 import {Spring, Strut} from "@khanacademy/wonder-blocks-layout";
-import Pill from "@khanacademy/wonder-blocks-pill";
 import Switch from "@khanacademy/wonder-blocks-switch";
 import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {BodyText} from "@khanacademy/wonder-blocks-typography";
@@ -105,29 +105,28 @@ function SRTree(props: Props) {
             {elementArias.map((aria, index) => (
                 <li key={index}>
                     {showTags && (
-                        <Pill
-                            size="small"
+                        <StatusBadge
                             kind="success"
-                            style={styles.smallSpaceRight}
-                        >
-                            {aria.roleOrTag}
-                        </Pill>
+                            label={aria.roleOrTag}
+                            styles={{root: styles.smallSpaceRight}}
+                        />
                     )}
                     {aria.className}
                     <StyledUl style={styles.indentListLeft}>
                         {aria.attributes.map((value, index) => (
                             <li key={index}>
-                                <Pill
-                                    size="small"
-                                    kind={
-                                        value.name === "label"
-                                            ? "info"
-                                            : "neutral"
-                                    }
-                                    style={styles.smallSpaceRight}
-                                >
-                                    {value.name}
-                                </Pill>
+                                {value.name === "label" ? (
+                                    <StatusBadge
+                                        kind="info"
+                                        label={value.name}
+                                        styles={{root: styles.smallSpaceRight}}
+                                    />
+                                ) : (
+                                    <NeutralBadge
+                                        label={value.name}
+                                        styles={{root: styles.smallSpaceRight}}
+                                    />
+                                )}
                                 {value.value}
                             </li>
                         ))}
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-select.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-select.tsx
index 25405cdf39b..566fe9f3161 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-select.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-select.tsx
@@ -15,11 +15,12 @@ import type {LockedFigureType} from "@khanacademy/perseus-core";
 
 type Props = {
     id: string;
+    editingDisabled?: boolean;
     onChange: (value: LockedFigureType) => void;
 };
 
 const LockedFigureSelect = (props: Props) => {
-    const {id, onChange} = props;
+    const {id, editingDisabled, onChange} = props;
 
     const figureTypes: ReadonlyArray<LockedFigureType> = [
         "point",
@@ -35,6 +36,7 @@ const LockedFigureSelect = (props: Props) => {
         <View style={styles.container}>
             <ActionMenu
                 menuText="Add locked figure"
+                disabled={editingDisabled}
                 style={styles.addElementSelect}
             >
                 {figureTypes.map((figureType) => (
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figures-section.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figures-section.tsx
index 4ce5e9cf827..2839bbcca8f 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figures-section.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figures-section.tsx
@@ -32,9 +32,9 @@ const LockedFiguresSection = (props: Props) => {
     // Keep track of all figures' accordions' expanded states for the
     // expand/collapse all button. When editing is disabled, default to
     // all open so content can still be reviewed. Otherwise, default to closed.
-    const defaultState = props.apiOptions?.editingDisabled ?? false;
+    const editingDisabled = props.apiOptions?.editingDisabled ?? false;
     const collapsedStateArray = Array((props.figures ?? []).length).fill(
-        defaultState,
+        editingDisabled,
     );
     const [expandedStates, setExpandedStates] =
         React.useState(collapsedStateArray);
@@ -185,12 +185,14 @@ const LockedFiguresSection = (props: Props) => {
                     <View style={styles.buttonContainer}>
                         <LockedFigureSelect
                             id={`${uniqueId}-select`}
+                            editingDisabled={editingDisabled}
                             onChange={addLockedFigure}
                         />
                         <Strut size={spacing.small_12} />
                         {showExpandButton && (
                             <Button
                                 kind="secondary"
+                                disabled={editingDisabled}
                                 onClick={() => toggleExpanded(allCollapsed)}
                                 style={styles.button}
                             >
diff --git a/packages/perseus-editor/src/widgets/numeric-input-editor.tsx b/packages/perseus-editor/src/widgets/numeric-input-editor.tsx
index 86f8a7858ec..37bdde7eb01 100644
--- a/packages/perseus-editor/src/widgets/numeric-input-editor.tsx
+++ b/packages/perseus-editor/src/widgets/numeric-input-editor.tsx
@@ -7,31 +7,52 @@ import {
 } from "@khanacademy/perseus";
 import {
     numericInputLogic,
-    type MathFormat,
     type NumericInputDefaultWidgetOptions,
     type PerseusNumericInputWidgetOptions,
 } from "@khanacademy/perseus-core";
 import Button from "@khanacademy/wonder-blocks-button";
-import Pill from "@khanacademy/wonder-blocks-pill";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {sizing} from "@khanacademy/wonder-blocks-tokens";
 import {BodyText} from "@khanacademy/wonder-blocks-typography";
 import trashIcon from "@phosphor-icons/core/bold/trash-bold.svg";
+import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import _ from "underscore";
 
 import Heading from "../components/heading";
 import PerseusEditorAccordion from "../components/perseus-editor-accordion";
+import {
+    SegmentedControl,
+    ToggleButtonGroup,
+} from "../components/segmented-control";
 import Editor from "../editor";
 
 import type {APIOptionsWithDefaults} from "@khanacademy/perseus";
-import type {ClickableRole} from "@khanacademy/wonder-blocks-clickable";
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-import type {
-    PillSize,
-    PillKind,
-} from "@khanacademy/wonder-blocks-pill/dist/components/pill";
 
 type ChangeFn = typeof Changeable.change;
 
+const fieldStyles = StyleSheet.create({
+    // A labelled setting: the label (and optional InfoTip) sit on their own
+    // line, with the control stacked below and a gap between them.
+    field: {
+        marginBlock: sizing.size_120,
+        gap: sizing.size_080,
+        alignItems: "flex-start",
+    },
+    // Label + InfoTip on one line.
+    labelRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: sizing.size_040,
+    },
+    // A label whose control sits inline beside it (e.g. "User input").
+    inlineField: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: sizing.size_080,
+    },
+});
+
 const {InfoTip, NumberInput, TextInput} = components;
 const {firstNumericalParse} = Util;
 
@@ -231,75 +252,21 @@ class NumericInputEditor extends React.Component<Props, State> {
 
     render() {
         const answers = this.props.answers;
-        const commonOptionProps: {
-            size: PillSize;
-            role: ClickableRole;
-            style: StyleType;
-        } = {
-            size: "medium",
-            role: "radio",
-            style: {marginRight: "8px"},
-        };
-
-        const SettingOption = (props: {
-            kind: "accent" | "transparent";
-            role?: "radio" | "checkbox";
-            ariaLabel?: string;
-            onClick: () => void;
-            children: any;
-        }): React.ReactElement => {
-            const {kind, onClick, ariaLabel, children} = props;
-            const role = props.role ?? "radio";
-            const pillProps = {
-                ...commonOptionProps,
-                "aria-label": ariaLabel,
-                kind: kind satisfies PillKind,
-                role: role satisfies ClickableRole,
-                onClick: onClick,
-            };
-            return <Pill {...pillProps}>{children}</Pill>;
-        };
-
-        const RadioOption = (props: {
-            answerIndex: number;
-            answerProperty: string;
-            value: string | boolean;
-            onClick?: () => void;
-            children: any;
-        }): React.ReactElement => {
-            const {answerIndex, answerProperty, value, children} = props;
-            const isSelected = answers[answerIndex][answerProperty] === value;
-            const kind = isSelected ? "accent" : "transparent";
-            const newState = {};
-            newState[answerProperty] = value;
-            const onClick =
-                props.onClick ??
-                (() => {
-                    this.updateAnswer(answerIndex, newState);
-                });
-
-            return (
-                <SettingOption kind={kind} onClick={onClick}>
-                    {children}
-                </SettingOption>
-            );
-        };
+        const editingDisabled = this.props.apiOptions?.editingDisabled ?? false;
 
         const unsimplifiedAnswers = (i: any) => (
-            <fieldset className="perseus-widget-row unsimplified-options">
+            <View style={fieldStyles.field}>
                 {answers[i]["status"] !== "correct" && (
-                    <>
-                        <legend className="inline-options">
-                            Unsimplified answers are irrelevant for this status
-                        </legend>
-                    </>
+                    <BodyText weight="semi">
+                        Unsimplified answers are irrelevant for this status
+                    </BodyText>
                 )}
                 {answers[i]["status"] === "correct" && (
                     <>
-                        <legend className="inline-options">
-                            Unsimplified answers are
-                        </legend>
-                        <span className="tooltip-for-legend">
+                        <View style={fieldStyles.labelRow}>
+                            <BodyText weight="semi">
+                                Unsimplified answers are
+                            </BodyText>
                             <InfoTip>
                                 <p>
                                     Normally select "ungraded". This will give
@@ -319,215 +286,182 @@ class NumericInputEditor extends React.Component<Props, State> {
                                     simplify.
                                 </p>
                             </InfoTip>
-                        </span>
-                        <br />
-                        <RadioOption
-                            answerIndex={i}
-                            answerProperty="simplify"
-                            value="required"
-                        >
-                            Ungraded
-                        </RadioOption>
-                        <RadioOption
-                            answerIndex={i}
-                            answerProperty="simplify"
-                            value="optional"
-                        >
-                            Accepted
-                        </RadioOption>
-                        <RadioOption
-                            answerIndex={i}
-                            answerProperty="simplify"
-                            value="enforced"
-                        >
-                            Wrong
-                        </RadioOption>
+                        </View>
+                        <SegmentedControl
+                            aria-label="Unsimplified answers are"
+                            disabled={editingDisabled}
+                            selectedValue={answers[i]["simplify"]}
+                            onChange={(value) =>
+                                this.updateAnswer(i, {simplify: value})
+                            }
+                            options={[
+                                {value: "required", label: "Ungraded"},
+                                {value: "optional", label: "Accepted"},
+                                {value: "enforced", label: "Wrong"},
+                            ]}
+                        />
                     </>
                 )}
-            </fieldset>
+            </View>
         );
 
         const suggestedAnswerTypes = (i: any) => (
             <>
-                <div className="perseus-widget-row">
-                    {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- TODO(LEMS-2871): Address a11y error */}
-                    <label>Possible answer formats&ensp;</label>
-                    <InfoTip>
-                        <p>
-                            Formats will be autoselected for you based on the
-                            given answer; to show no suggested formats and
-                            accept all types, simply have a decimal/integer be
-                            the answer. Values with &pi; will have format "pi",
-                            and values that are fractions will have some subset
-                            (mixed will be "mixed" and "proper"; improper/proper
-                            will both be "improper" and "proper"). If you would
-                            like to specify that it is only a proper fraction
-                            (or only a mixed/improper fraction), deselect the
-                            other format. Except for specific cases, you should
-                            not need to change the autoselected formats.
-                        </p>
-                        <p>
-                            To restrict the answer to <em>only</em> an improper
-                            fraction (i.e. 7/4), select the improper fraction
-                            and toggle "strict" to true. This <b>will not</b>{" "}
-                            accept 1.75 as an answer.{" "}
-                        </p>
-                        <p>
-                            Unless you are testing that specific skill, please
-                            do not restrict the answer format.
-                        </p>
-                    </InfoTip>
-                    <br />
-                    {answerFormButtons.map((format) => {
-                        const isSelected = answers[i]["answerForms"]?.includes(
-                            // eslint-disable-next-line no-restricted-syntax
-                            format.value as MathFormat,
-                        );
-                        const kind = isSelected ? "accent" : "transparent";
-                        const onClick = () => {
-                            this.onToggleAnswerForm(i, format.value);
-                        };
-
-                        return (
-                            <SettingOption
-                                key={format.value}
-                                ariaLabel={format.title}
-                                kind={kind}
-                                role="checkbox"
-                                onClick={onClick}
-                            >
-                                {format.content}
-                            </SettingOption>
-                        );
-                    })}
-                </div>
-                <fieldset className="perseus-widget-row">
-                    <legend>Answer formats are: </legend>
-                    <RadioOption
-                        answerIndex={i}
-                        answerProperty="strict"
-                        value={false}
-                    >
-                        Suggested
-                    </RadioOption>
-                    <RadioOption
-                        answerIndex={i}
-                        answerProperty="strict"
-                        value={true}
-                    >
-                        Required
-                    </RadioOption>
-                </fieldset>
+                <View style={fieldStyles.field}>
+                    <View style={fieldStyles.labelRow}>
+                        <BodyText weight="semi">
+                            Possible answer formats
+                        </BodyText>
+                        <InfoTip>
+                            <p>
+                                Formats will be autoselected for you based on
+                                the given answer; to show no suggested formats
+                                and accept all types, simply have a
+                                decimal/integer be the answer. Values with &pi;
+                                will have format "pi", and values that are
+                                fractions will have some subset (mixed will be
+                                "mixed" and "proper"; improper/proper will both
+                                be "improper" and "proper"). If you would like
+                                to specify that it is only a proper fraction (or
+                                only a mixed/improper fraction), deselect the
+                                other format. Except for specific cases, you
+                                should not need to change the autoselected
+                                formats.
+                            </p>
+                            <p>
+                                To restrict the answer to <em>only</em> an
+                                improper fraction (i.e. 7/4), select the
+                                improper fraction and toggle "strict" to true.
+                                This <b>will not</b> accept 1.75 as an answer.{" "}
+                            </p>
+                            <p>
+                                Unless you are testing that specific skill,
+                                please do not restrict the answer format.
+                            </p>
+                        </InfoTip>
+                    </View>
+                    <ToggleButtonGroup
+                        aria-label="Possible answer formats"
+                        disabled={editingDisabled}
+                        selectedValues={answers[i]["answerForms"] ?? []}
+                        onToggle={(value) => this.onToggleAnswerForm(i, value)}
+                        options={answerFormButtons.map((format) => ({
+                            value: format.value,
+                            label: format.content,
+                            ariaLabel: format.title,
+                        }))}
+                    />
+                </View>
+                <View style={fieldStyles.field}>
+                    <BodyText weight="semi">Answer formats are</BodyText>
+                    <SegmentedControl
+                        aria-label="Answer formats are"
+                        disabled={editingDisabled}
+                        selectedValue={
+                            answers[i]["strict"] ? "required" : "suggested"
+                        }
+                        onChange={(value) =>
+                            this.updateAnswer(i, {strict: value === "required"})
+                        }
+                        options={[
+                            {value: "suggested", label: "Suggested"},
+                            {value: "required", label: "Required"},
+                        ]}
+                    />
+                </View>
             </>
         );
 
         const inputSize = (
-            <fieldset className="perseus-widget-row">
-                <legend className="inline-options">Width: </legend>
-                <Pill
-                    {...commonOptionProps}
-                    kind={
-                        this.props.size === "normal" ? "accent" : "transparent"
-                    }
-                    onClick={() => {
-                        this.change("size")("normal");
-                    }}
-                >
-                    Normal (80px)
-                </Pill>
-                <Pill
-                    {...commonOptionProps}
-                    kind={
-                        this.props.size === "small" ? "accent" : "transparent"
-                    }
-                    onClick={() => {
-                        this.change("size")("small");
-                    }}
-                >
-                    Small (40px)
-                </Pill>
-                <InfoTip>
-                    <p>
-                        Use size "Normal" for all text boxes, unless there are
-                        multiple text boxes in one line and the answer area is
-                        too narrow to fit them.
-                    </p>
-                </InfoTip>
-            </fieldset>
+            <View style={fieldStyles.field}>
+                <View style={fieldStyles.labelRow}>
+                    <BodyText weight="semi">Width</BodyText>
+                    <InfoTip>
+                        <p>
+                            Use size "Normal" for all text boxes, unless there
+                            are multiple text boxes in one line and the answer
+                            area is too narrow to fit them.
+                        </p>
+                    </InfoTip>
+                </View>
+                <SegmentedControl
+                    aria-label="Width"
+                    disabled={editingDisabled}
+                    selectedValue={this.props.size}
+                    onChange={(value) => this.change("size")(value)}
+                    options={[
+                        {value: "normal", label: "Normal (80px)"},
+                        {value: "small", label: "Small (40px)"},
+                    ]}
+                />
+            </View>
         );
 
         const rightAlign = (
-            <fieldset className="perseus-widget-row">
-                <legend className="inline-options">Alignment: </legend>
-                <Pill
-                    {...commonOptionProps}
-                    kind={this.props.rightAlign ? "transparent" : "accent"}
-                    onClick={() => {
-                        this.props.onChange({rightAlign: false});
-                    }}
-                >
-                    Left
-                </Pill>
-                <Pill
-                    {...commonOptionProps}
-                    kind={this.props.rightAlign ? "accent" : "transparent"}
-                    onClick={() => {
-                        this.props.onChange({rightAlign: true});
-                    }}
-                >
-                    Right
-                </Pill>
-            </fieldset>
+            <View style={fieldStyles.field}>
+                <BodyText weight="semi">Alignment</BodyText>
+                <SegmentedControl
+                    aria-label="Alignment"
+                    disabled={editingDisabled}
+                    selectedValue={this.props.rightAlign ? "right" : "left"}
+                    onChange={(value) =>
+                        this.props.onChange({rightAlign: value === "right"})
+                    }
+                    options={[
+                        {value: "left", label: "Left"},
+                        {value: "right", label: "Right"},
+                    ]}
+                />
+            </View>
         );
 
         const labelText = (
-            <>
-                <div className="perseus-widget-row">
-                    {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- TODO(LEMS-2871): Address a11y error */}
-                    <label>Answer Field Aria label</label>
+            <View style={fieldStyles.field}>
+                <View style={fieldStyles.labelRow}>
+                    <BodyText weight="semi">Answer Field Aria label</BodyText>
                     <InfoTip>
                         <p>
                             Text to describe the Answer Field for screenreader
                             users.
                         </p>
                     </InfoTip>
-                </div>
+                </View>
                 <TextInput
                     labelText="aria label"
                     value={this.props.labelText}
                     onChange={this.change("labelText")}
                 />
-            </>
+            </View>
         );
 
         const coefficientCheck = (
-            <fieldset className="perseus-widget-row">
-                <legend className="inline-options">Number style: </legend>
-                <Pill
-                    {...commonOptionProps}
-                    kind={this.props.coefficient ? "transparent" : "accent"}
-                    onClick={() => {
-                        this.props.onChange({coefficient: false});
-                    }}
-                >
-                    Standard
-                </Pill>
-                <Pill
-                    {...commonOptionProps}
-                    kind={this.props.coefficient ? "accent" : "transparent"}
-                    onClick={() => {
-                        this.props.onChange({coefficient: true});
-                    }}
-                >
-                    Coefficient
-                </Pill>
-                <InfoTip>
-                    <p>
-                        A coefficient style number allows the student to use -
-                        for -1 and an empty string to mean 1.
-                    </p>
-                </InfoTip>
-            </fieldset>
+            <View style={fieldStyles.field}>
+                <View style={fieldStyles.labelRow}>
+                    <BodyText weight="semi">Number style</BodyText>
+                    <InfoTip>
+                        <p>
+                            A coefficient style number allows the student to use
+                            - for -1 and an empty string to mean 1.
+                        </p>
+                    </InfoTip>
+                </View>
+                <SegmentedControl
+                    aria-label="Number style"
+                    disabled={editingDisabled}
+                    selectedValue={
+                        this.props.coefficient ? "coefficient" : "standard"
+                    }
+                    onChange={(value) =>
+                        this.props.onChange({
+                            coefficient: value === "coefficient",
+                        })
+                    }
+                    options={[
+                        {value: "standard", label: "Standard"},
+                        {value: "coefficient", label: "Coefficient"},
+                    ]}
+                />
+            </View>
         );
 
         const instructions = {
@@ -583,11 +517,7 @@ class NumericInputEditor extends React.Component<Props, State> {
                                 this.onToggleAnswers(i);
                             }}
                             header={
-                                <BodyText
-                                    size="medium"
-                                    weight="bold"
-                                    tag="span"
-                                >
+                                <BodyText weight="bold" tag="span">
                                     {answerHeading}
                                 </BodyText>
                             }
@@ -598,8 +528,13 @@ class NumericInputEditor extends React.Component<Props, State> {
                                     (answer.maxError ? " with-max-error" : "")
                                 }
                             >
-                                <label>
-                                    User input:
+                                <View
+                                    tag="label"
+                                    style={fieldStyles.inlineField}
+                                >
+                                    <BodyText weight="semi">
+                                        User input
+                                    </BodyText>
                                     <NumberInput
                                         value={answer.value}
                                         className="numeric-input-value"
@@ -647,7 +582,7 @@ class NumericInputEditor extends React.Component<Props, State> {
                                             });
                                         }}
                                     />
-                                </label>
+                                </View>
                                 <span className="max-error-plusmn">
                                     &plusmn;
                                 </span>
@@ -659,51 +594,35 @@ class NumericInputEditor extends React.Component<Props, State> {
                                     onChange={this.updateAnswer(i, "maxError")}
                                 />
                             </div>
-                            <fieldset className="perseus-widget-row">
-                                <legend className="inline-options">
-                                    Status:
-                                </legend>
-                                <RadioOption
-                                    answerIndex={i}
-                                    answerProperty="status"
-                                    value="correct"
-                                    onClick={() => {
-                                        this.onEvaluationChange(i, "correct");
-                                    }}
-                                >
-                                    Correct
-                                </RadioOption>
-                                <RadioOption
-                                    answerIndex={i}
-                                    answerProperty="status"
-                                    value="wrong"
-                                    onClick={() => {
-                                        this.onEvaluationChange(i, "wrong");
-                                    }}
-                                >
-                                    Wrong
-                                </RadioOption>
-                                <RadioOption
-                                    answerIndex={i}
-                                    answerProperty="status"
-                                    value="ungraded"
-                                    onClick={() => {
-                                        this.onEvaluationChange(i, "ungraded");
-                                    }}
-                                >
-                                    Ungraded
-                                </RadioOption>
-                            </fieldset>
+                            <View style={fieldStyles.field}>
+                                <BodyText weight="semi">Status</BodyText>
+                                <SegmentedControl
+                                    aria-label="Status"
+                                    disabled={editingDisabled}
+                                    selectedValue={answers[i]["status"]}
+                                    onChange={(value) =>
+                                        this.onEvaluationChange(i, value)
+                                    }
+                                    options={[
+                                        {value: "correct", label: "Correct"},
+                                        {value: "wrong", label: "Wrong"},
+                                        {value: "ungraded", label: "Ungraded"},
+                                    ]}
+                                />
+                            </View>
                             {unsimplifiedAnswers(i)}
-                            <div className="perseus-widget-row">
-                                (Articles only) Message shown to user:
-                            </div>
-                            {editor}
+                            <View style={fieldStyles.field}>
+                                <BodyText weight="semi">
+                                    (Articles only) Message shown to user
+                                </BodyText>
+                                {editor}
+                            </View>
                             {suggestedAnswerTypes(i)}
                             <Button
                                 startIcon={trashIcon}
                                 aria-label={`Delete ${answerHeading}`}
                                 className="delete-item-button"
+                                disabled={editingDisabled}
                                 onClick={() => {
                                     this.onTrashAnswer(i);
                                 }}
@@ -745,7 +664,11 @@ class NumericInputEditor extends React.Component<Props, State> {
                 >
                     <div className="perseus-editor-accordion-content">
                         {generateInputAnswerEditors()}
-                        <Button kind="tertiary" onClick={this.addAnswer}>
+                        <Button
+                            kind="tertiary"
+                            disabled={editingDisabled}
+                            onClick={this.addAnswer}
+                        >
                             Add new answer
                         </Button>
                     </div>
diff --git a/packages/perseus-editor/src/widgets/radio/editor.tsx b/packages/perseus-editor/src/widgets/radio/editor.tsx
index 60fa85fa1f3..8aa89a149c6 100644
--- a/packages/perseus-editor/src/widgets/radio/editor.tsx
+++ b/packages/perseus-editor/src/widgets/radio/editor.tsx
@@ -322,7 +322,8 @@ class RadioEditor extends React.Component<RadioEditorProps> {
 
     render(): React.ReactNode {
         const numCorrect = deriveNumCorrect(this.props.choices);
-        const isEditingDisabled = this.props.apiOptions.editingDisabled;
+        const isEditingDisabled =
+            this.props.apiOptions.editingDisabled ?? false;
 
         return (
             <div>
@@ -373,6 +374,7 @@ class RadioEditor extends React.Component<RadioEditorProps> {
                         ref={this.getChoiceRef(choice.id)}
                         index={index}
                         choice={choice}
+                        editingDisabled={isEditingDisabled}
                         multipleSelect={this.props.multipleSelect}
                         onStatusChange={this.onStatusChange}
                         onContentChange={this.onContentChange}
@@ -392,6 +394,7 @@ class RadioEditor extends React.Component<RadioEditorProps> {
                         size="small"
                         kind="tertiary"
                         startIcon={plusIcon}
+                        disabled={isEditingDisabled}
                         onClick={this.addChoice.bind(this, false)}
                         style={{marginInlineEnd: "2.4rem"}}
                     >
@@ -402,6 +405,7 @@ class RadioEditor extends React.Component<RadioEditorProps> {
                             size="small"
                             kind="tertiary"
                             startIcon={plusIcon}
+                            disabled={isEditingDisabled}
                             onClick={this.addChoice.bind(this, true)}
                         >
                             None of the above
diff --git a/packages/perseus-editor/src/widgets/radio/radio-option-settings-actions.tsx b/packages/perseus-editor/src/widgets/radio/radio-option-settings-actions.tsx
index db30abc4d52..b6768ac5e01 100644
--- a/packages/perseus-editor/src/widgets/radio/radio-option-settings-actions.tsx
+++ b/packages/perseus-editor/src/widgets/radio/radio-option-settings-actions.tsx
@@ -16,6 +16,7 @@ interface RadioOptionSettingsActionsProps {
     content: string;
     showDelete: boolean;
     showMove: boolean;
+    editingDisabled: boolean;
     onDelete: () => void;
     onMove: (movement: ChoiceMovementType) => void;
 }
@@ -24,6 +25,7 @@ export function RadioOptionSettingsActions({
     content,
     showDelete,
     showMove,
+    editingDisabled,
     onDelete,
     onMove,
 }: RadioOptionSettingsActionsProps) {
@@ -34,6 +36,7 @@ export function RadioOptionSettingsActions({
                     size="small"
                     kind="tertiary"
                     startIcon={trashIcon}
+                    disabled={editingDisabled}
                     onClick={() => {
                         if (
                             // eslint-disable-next-line no-alert
@@ -58,6 +61,7 @@ export function RadioOptionSettingsActions({
                         kind="tertiary"
                         size="xsmall"
                         aria-label="Move choice to the top"
+                        disabled={editingDisabled}
                         onClick={() => onMove("top")}
                     />
                     <IconButton
@@ -65,6 +69,7 @@ export function RadioOptionSettingsActions({
                         kind="tertiary"
                         size="xsmall"
                         aria-label="Move choice up"
+                        disabled={editingDisabled}
                         onClick={() => onMove("up")}
                     />
                     <IconButton
@@ -72,6 +77,7 @@ export function RadioOptionSettingsActions({
                         kind="tertiary"
                         size="xsmall"
                         aria-label="Move choice down"
+                        disabled={editingDisabled}
                         onClick={() => onMove("down")}
                     />
                     <IconButton
@@ -79,6 +85,7 @@ export function RadioOptionSettingsActions({
                         kind="tertiary"
                         size="xsmall"
                         aria-label="Move choice to the bottom"
+                        disabled={editingDisabled}
                         onClick={() => onMove("bottom")}
                     />
                 </>
diff --git a/packages/perseus-editor/src/widgets/radio/radio-option-settings.tsx b/packages/perseus-editor/src/widgets/radio/radio-option-settings.tsx
index 1d16b1bbace..c76d15840f7 100644
--- a/packages/perseus-editor/src/widgets/radio/radio-option-settings.tsx
+++ b/packages/perseus-editor/src/widgets/radio/radio-option-settings.tsx
@@ -1,9 +1,11 @@
+import {View} from "@khanacademy/wonder-blocks-core";
 import {TextArea} from "@khanacademy/wonder-blocks-form";
-import Pill from "@khanacademy/wonder-blocks-pill";
-import {semanticColor, sizing} from "@khanacademy/wonder-blocks-tokens";
+import {sizing} from "@khanacademy/wonder-blocks-tokens";
 import {BodyText} from "@khanacademy/wonder-blocks-typography";
 import * as React from "react";
 
+import {SegmentedControl} from "../../components/segmented-control";
+
 import styles from "./radio-editor.module.css";
 import {RadioOptionContentAndImageEditor} from "./radio-option-content-and-image-editor";
 import {RadioOptionSettingsActions} from "./radio-option-settings-actions";
@@ -20,6 +22,8 @@ export type RadioOptionSettingsHandle = {
 interface RadioOptionSettingsProps {
     index: number;
     choice: PerseusRadioChoice;
+    // Whether the whole editor is disabled (apiOptions.editingDisabled).
+    editingDisabled: boolean;
     multipleSelect: boolean;
     onStatusChange: (choiceIndex: number, correct: boolean) => void;
     onContentChange: (choiceIndex: number, content: string) => void;
@@ -37,6 +41,7 @@ export const RadioOptionSettings = React.forwardRef<
     {
         index,
         choice,
+        editingDisabled,
         multipleSelect,
         onStatusChange,
         onContentChange,
@@ -65,57 +70,39 @@ export const RadioOptionSettings = React.forwardRef<
         <div className={styles.tile}>
             {/* Correct / Incorrect status selection */}
             <fieldset className="perseus-widget-row">
-                <RadioStatusPill
-                    index={index}
-                    correct={correct}
-                    multipleSelect={multipleSelect}
-                    onClick={() => {
-                        onStatusChange(index, !correct);
-                    }}
-                />
-                <BodyText
-                    size="small"
-                    weight="bold"
-                    tag="span"
-                    style={{
-                        display: "inline",
-                        marginInlineEnd: sizing.size_080,
-                    }}
-                >
-                    Status
-                </BodyText>
-                <Pill
-                    kind={correct ? "accent" : "transparent"}
-                    onClick={() => {
-                        onStatusChange(index, true);
-                    }}
-                    style={{
-                        marginInlineEnd: sizing.size_080,
-                        // Higher contrast on the default outline for
-                        // secondary pills
-                        outlineColor: correct
-                            ? semanticColor.core.background.instructive.default
-                            : semanticColor.core.border.neutral.default,
-                    }}
-                >
-                    Correct
-                </Pill>
-                <Pill
-                    kind={correct ? "transparent" : "accent"}
-                    onClick={() => {
-                        onStatusChange(index, false);
-                    }}
+                <View
                     style={{
-                        marginInlineEnd: sizing.size_080,
-                        // Higher contrast on the default outline for
-                        // secondary pills
-                        outlineColor: !correct
-                            ? semanticColor.core.background.instructive.default
-                            : semanticColor.core.border.neutral.default,
+                        flexDirection: "row",
+                        alignItems: "center",
+                        flexWrap: "wrap",
                     }}
                 >
-                    Incorrect
-                </Pill>
+                    <RadioStatusPill
+                        index={index}
+                        correct={correct}
+                        multipleSelect={multipleSelect}
+                    />
+                    <BodyText
+                        size="small"
+                        weight="bold"
+                        tag="span"
+                        style={{marginInlineEnd: sizing.size_080}}
+                    >
+                        Status
+                    </BodyText>
+                    <SegmentedControl
+                        aria-label="Choice status"
+                        disabled={editingDisabled}
+                        selectedValue={correct ? "correct" : "incorrect"}
+                        onChange={(value) => {
+                            onStatusChange(index, value === "correct");
+                        }}
+                        options={[
+                            {value: "correct", label: "Correct"},
+                            {value: "incorrect", label: "Incorrect"},
+                        ]}
+                    />
+                </View>
             </fieldset>
 
             {/* Content and rationale text areas */}
@@ -143,6 +130,7 @@ export const RadioOptionSettings = React.forwardRef<
                 id={rationaleTextAreaId}
                 value={rationale ?? ""}
                 placeholder={`Why is this choice ${correct ? "correct" : "incorrect"}?`}
+                disabled={editingDisabled}
                 onChange={(value) => {
                     onRationaleChange(index, value);
                 }}
@@ -154,6 +142,7 @@ export const RadioOptionSettings = React.forwardRef<
                 content={content}
                 showDelete={showDelete}
                 showMove={showMove}
+                editingDisabled={editingDisabled}
                 onDelete={onDelete}
                 onMove={(movement) => onMove(index, movement)}
             />
diff --git a/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx b/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx
index a5bf6206bae..62063ffdb68 100644
--- a/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx
+++ b/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx
@@ -1,60 +1,52 @@
+import {StatusBadge} from "@khanacademy/wonder-blocks-badge";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import Pill from "@khanacademy/wonder-blocks-pill";
-import {semanticColor, sizing, border} from "@khanacademy/wonder-blocks-tokens";
+import {border, sizing} from "@khanacademy/wonder-blocks-tokens";
 import checkIcon from "@phosphor-icons/core/bold/check-bold.svg";
 import minusCircleIcon from "@phosphor-icons/core/bold/minus-circle-bold.svg";
+import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
 interface RadioStatusPillProps {
     index: number;
     correct?: boolean;
     multipleSelect: boolean;
-    onClick: () => void;
 }
 
+/**
+ * A read-only status indicator showing whether a choice is correct (a green
+ * check) or incorrect (a red minus), labelled with the choice letter (A, B,
+ * C...). Status is changed via the adjacent segmented control, so this is no
+ * longer interactive — it is a Wonder Blocks `StatusBadge`.
+ */
 export function RadioStatusPill({
     index,
     correct,
     multipleSelect,
-    onClick,
 }: RadioStatusPillProps) {
     return (
-        <Pill
-            size="large"
-            // TODO(LEMS-3686): Update to use CSS modules when we can
-            // use them with Wonder Blocks.
-            style={{
-                // Space between the pill and the text
-                marginInlineEnd: sizing.size_080,
-                color: correct
-                    ? semanticColor.core.foreground.knockout.default
-                    : semanticColor.core.foreground.critical.default,
-                backgroundColor: correct
-                    ? semanticColor.core.background.success.strong
-                    : semanticColor.core.background.critical.subtle,
-                // Round for single select, square for multiple select
-                borderRadius: multipleSelect
-                    ? border.radius.radius_040
-                    : sizing.size_240,
-                border: `1px solid ${correct ? semanticColor.core.border.success.strong : semanticColor.core.border.critical.default}`,
-                width: sizing.size_560,
-                flexDirection: "row",
+        <StatusBadge
+            kind={correct ? "success" : "critical"}
+            icon={<PhosphorIcon icon={correct ? checkIcon : minusCircleIcon} />}
+            label={String.fromCharCode(65 + index)}
+            styles={{
+                root: [
+                    styles.badge,
+                    // Round for single select, square for multiple select.
+                    multipleSelect ? styles.square : styles.round,
+                ],
             }}
-            onClick={onClick}
-        >
-            <>
-                <PhosphorIcon
-                    size="small"
-                    icon={correct ? checkIcon : minusCircleIcon}
-                    style={{marginInlineEnd: sizing.size_060}}
-                    color={
-                        correct
-                            ? semanticColor.core.foreground.knockout.default
-                            : semanticColor.core.foreground.critical.default
-                    }
-                />
-                {String.fromCharCode(65 + index)}
-            </>
-        </Pill>
+        />
     );
 }
+
+const styles = StyleSheet.create({
+    badge: {
+        marginInlineEnd: sizing.size_080,
+    },
+    round: {
+        borderRadius: sizing.size_240,
+    },
+    square: {
+        borderRadius: border.radius.radius_040,
+    },
+});
diff --git a/packages/perseus/src/components/button-group.tsx b/packages/perseus/src/components/button-group.tsx
index 4a504d79870..d79746cc328 100644
--- a/packages/perseus/src/components/button-group.tsx
+++ b/packages/perseus/src/components/button-group.tsx
@@ -26,6 +26,11 @@ type Props = {
      * Customizes the selected button's styling.
      */
     selectedButtonStyle?: CSSProperties;
+
+    /**
+     * When true, all buttons are disabled (non-interactive and visually muted).
+     */
+    disabled?: boolean;
 };
 
 type DefaultProps = {
@@ -75,11 +80,13 @@ class ButtonGroup extends React.Component<Props> {
                     type="button"
                     ref={"button" + i}
                     key={"" + i}
+                    disabled={this.props.disabled}
                     className={css(
                         styles.buttonStyle,
                         button.value === value && styles.selectedStyle,
                         button.value === value &&
                             this.props.selectedButtonStyle,
+                        this.props.disabled && styles.disabledStyle,
                     )}
                     onClick={() => this.toggleSelect(button.value)}
                 >
@@ -136,6 +143,15 @@ const styles = StyleSheet.create({
     selectedStyle: {
         backgroundColor: "#ddd",
     },
+
+    disabledStyle: {
+        cursor: "not-allowed",
+        backgroundColor: "#f0f0f1",
+        color: "#888d93",
+        ":hover": {
+            backgroundColor: "#f0f0f1",
+        },
+    },
 });
 
 export default ButtonGroup;
diff --git a/packages/perseus/src/widgets/label-image/answer-pill.tsx b/packages/perseus/src/widgets/label-image/answer-pill.tsx
index 6c561a039e1..b68e1727e63 100644
--- a/packages/perseus/src/widgets/label-image/answer-pill.tsx
+++ b/packages/perseus/src/widgets/label-image/answer-pill.tsx
@@ -1,3 +1,10 @@
+// TODO(LEMS-4131): `Pill` is deprecated (use `Badge`/`StatusBadge`). This is
+// the only remaining `Pill` after the editor Pill migration. It is intentionally
+// left for now because it is a RUNTIME, learner-facing component (rendered by
+// label-image/marker.tsx), not part of the editor — so it is out of scope for
+// the editor disabled-state work and should be migrated under its own
+// runtime-scoped ticket with its own QA. Note it is interactive (has onClick),
+// so the replacement is an interactive control, not a Badge.
 import Pill from "@khanacademy/wonder-blocks-pill";
 import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet, type CSSProperties} from "aphrodite";

From 2f6fb20d70376977b566fae76fb00f68e5d16059 Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Thu, 11 Jun 2026 08:50:05 -0700
Subject: [PATCH 03/10] [LEMS-4131/poc-improve-editor-controls-contrast] add
 wonder blocks badge to replace the deprecated pill component

---
 pnpm-lock.yaml      | 29 +++++++++++++++++++++++++++++
 pnpm-workspace.yaml |  2 ++
 2 files changed, 31 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6b1a5304d64..8653912bba2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,6 +15,9 @@ catalogs:
     '@khanacademy/wonder-blocks-announcer':
       specifier: 1.1.1
       version: 1.1.1
+    '@khanacademy/wonder-blocks-badge':
+      specifier: 1.1.14
+      version: 1.1.14
     '@khanacademy/wonder-blocks-banner':
       specifier: 5.1.2
       version: 5.1.2
@@ -798,6 +801,9 @@ importers:
       '@khanacademy/wonder-blocks-accordion':
         specifier: catalog:devDeps
         version: 3.1.61(@phosphor-icons/core@2.0.2)(aphrodite@1.2.5)(react-dom@18.2.0(react@18.2.0))(react-router-dom-v5-compat@6.30.0(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@5.3.4(react@18.2.0))(react@18.2.0)
+      '@khanacademy/wonder-blocks-badge':
+        specifier: catalog:devDeps
+        version: 1.1.14(@phosphor-icons/core@2.0.2)(aphrodite@1.2.5)(react-dom@18.2.0(react@18.2.0))(react-router-dom-v5-compat@6.30.0(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@5.3.4(react@18.2.0))(react@18.2.0)
       '@khanacademy/wonder-blocks-banner':
         specifier: catalog:devDeps
         version: 5.1.2(@phosphor-icons/core@2.0.2)(aphrodite@1.2.5)(react-dom@18.2.0(react@18.2.0))(react-router-dom-v5-compat@6.30.0(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@5.3.4(react@18.2.0))(react@18.2.0)
@@ -2385,6 +2391,13 @@ packages:
       aphrodite: ^1.2.5
       react: 18.2.0
 
+  '@khanacademy/wonder-blocks-badge@1.1.14':
+    resolution: {integrity: sha512-DU00dSY2hUVI1dwuv+HylrFHb9dgcSAwgLKt6MAVxZEQviO5J0a97PYU1ERWzuq47FYSL4jN7Iv9H89AbXMMiw==}
+    peerDependencies:
+      '@phosphor-icons/core': ^2.0.2
+      aphrodite: ^1.2.5
+      react: 18.2.0
+
   '@khanacademy/wonder-blocks-banner@5.1.2':
     resolution: {integrity: sha512-B1SVwdF6YV+N4efLDTBDY6fKNM5MdpgXy/i8ZSNWQnYeoSVnQK4pVzs+tZpWejnpbu5Mz2sJj8pfeiS1Tfl/hw==}
     peerDependencies:
@@ -11437,6 +11450,22 @@ snapshots:
       - react-router-dom
       - react-router-dom-v5-compat
 
+  '@khanacademy/wonder-blocks-badge@1.1.14(@phosphor-icons/core@2.0.2)(aphrodite@1.2.5)(react-dom@18.2.0(react@18.2.0))(react-router-dom-v5-compat@6.30.0(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@5.3.4(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@khanacademy/wonder-blocks-core': 12.4.4(aphrodite@1.2.5)(react-dom@18.2.0(react@18.2.0))(react-router-dom-v5-compat@6.30.0(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@5.3.4(react@18.2.0))(react@18.2.0)
+      '@khanacademy/wonder-blocks-icon': 5.3.16(@phosphor-icons/core@2.0.2)(aphrodite@1.2.5)(react-dom@18.2.0(react@18.2.0))(react-router-dom-v5-compat@6.30.0(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@5.3.4(react@18.2.0))(react@18.2.0)
+      '@khanacademy/wonder-blocks-styles': 0.2.46(aphrodite@1.2.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@khanacademy/wonder-blocks-tokens': 16.6.0(aphrodite@1.2.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@khanacademy/wonder-blocks-typography': 4.3.6(aphrodite@1.2.5)(react-dom@18.2.0(react@18.2.0))(react-router-dom-v5-compat@6.30.0(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@5.3.4(react@18.2.0))(react@18.2.0)
+      '@phosphor-icons/core': 2.0.2
+      aphrodite: 1.2.5
+      react: 18.2.0
+    transitivePeerDependencies:
+      - react-dom
+      - react-router
+      - react-router-dom
+      - react-router-dom-v5-compat
+
   '@khanacademy/wonder-blocks-banner@5.1.2(@phosphor-icons/core@2.0.2)(aphrodite@1.2.5)(react-dom@18.2.0(react@18.2.0))(react-router-dom-v5-compat@6.30.0(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@5.3.4(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@khanacademy/wonder-blocks-button': 11.6.2(@phosphor-icons/core@2.0.2)(aphrodite@1.2.5)(react-dom@18.2.0(react@18.2.0))(react-router-dom-v5-compat@6.30.0(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@5.3.4(react@18.2.0))(react@18.2.0)
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index bb73f7840ad..33360f1609c 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -65,6 +65,7 @@ catalogs:
         "@khanacademy/mathjax-renderer": ^3.0.0
         "@khanacademy/wonder-blocks-accordion": ^3.1.61
         "@khanacademy/wonder-blocks-announcer": ^1.1.1
+        "@khanacademy/wonder-blocks-badge": ^1.1.14
         "@khanacademy/wonder-blocks-banner": ^5.1.2
         "@khanacademy/wonder-blocks-button": ^11.6.2
         "@khanacademy/wonder-blocks-clickable": ^8.2.1
@@ -106,6 +107,7 @@ catalogs:
         "@khanacademy/mathjax-renderer": 3.0.0
         "@khanacademy/wonder-blocks-accordion": 3.1.61
         "@khanacademy/wonder-blocks-announcer": 1.1.1
+        "@khanacademy/wonder-blocks-badge": 1.1.14
         "@khanacademy/wonder-blocks-banner": 5.1.2
         "@khanacademy/wonder-blocks-button": 11.6.2
         "@khanacademy/wonder-blocks-clickable": 8.2.1

From 8030e4a3975ec607baa883a05d7d586f518b1009 Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Thu, 11 Jun 2026 10:59:42 -0700
Subject: [PATCH 04/10] [LEMS-4131/poc-improve-editor-controls-contrast] fix
 for free response button disabled

---
 .../src/widgets/free-response-editor.tsx          | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/perseus-editor/src/widgets/free-response-editor.tsx b/packages/perseus-editor/src/widgets/free-response-editor.tsx
index f9dc34a091f..ebc39ee4c23 100644
--- a/packages/perseus-editor/src/widgets/free-response-editor.tsx
+++ b/packages/perseus-editor/src/widgets/free-response-editor.tsx
@@ -11,6 +11,7 @@ import trashIcon from "@phosphor-icons/core/regular/trash.svg";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import type {APIOptionsWithDefaults} from "@khanacademy/perseus";
 import type {
     PerseusFreeResponseWidgetOptions,
     FreeResponseDefaultWidgetOptions,
@@ -19,6 +20,7 @@ import type {
 import type {ChangeEventHandler} from "react";
 
 type Props = PerseusFreeResponseWidgetOptions & {
+    apiOptions?: APIOptionsWithDefaults;
     onChange: (options: Partial<PerseusFreeResponseWidgetOptions>) => void;
 };
 
@@ -94,13 +96,16 @@ class FreeResponseEditor extends React.Component<Props> {
         });
     };
 
-    renderCriteriaList: () => React.ReactNode = () => {
+    renderCriteriaList: (editingDisabled: boolean) => React.ReactNode = (
+        editingDisabled,
+    ) => {
         const isDeletable = this.props.scoringCriteria.length > 1;
 
         return this.props.scoringCriteria.map((criterion, index) => {
             return (
                 <CriterionEditor
                     criterion={criterion}
+                    editingDisabled={editingDisabled}
                     index={index}
                     isDeletable={isDeletable}
                     key={index}
@@ -112,6 +117,8 @@ class FreeResponseEditor extends React.Component<Props> {
     };
 
     render(): React.ReactNode {
+        const editingDisabled = this.props.apiOptions?.editingDisabled ?? false;
+
         return (
             <View>
                 <LabeledField
@@ -171,10 +178,11 @@ class FreeResponseEditor extends React.Component<Props> {
                 <View>
                     <View style={styles.criteriaList} tag="fieldset">
                         <BodyText tag="legend">Scoring criteria</BodyText>
-                        {this.renderCriteriaList()}
+                        {this.renderCriteriaList(editingDisabled)}
                     </View>
                     <View>
                         <Button
+                            disabled={editingDisabled}
                             onClick={this.handleAddCriterion}
                             startIcon={plusCircleIcon}
                         >
@@ -190,6 +198,7 @@ class FreeResponseEditor extends React.Component<Props> {
 const CriterionEditor = function (props: {
     index: number;
     isDeletable: boolean;
+    editingDisabled: boolean;
     criterion: PerseusFreeResponseWidgetScoringCriterion;
     onChange: (
         index: number,
@@ -214,7 +223,7 @@ const CriterionEditor = function (props: {
                     <Button
                         aria-label={`Delete criterion ${props.index + 1}`}
                         actionType="destructive"
-                        disabled={!props.isDeletable}
+                        disabled={!props.isDeletable || props.editingDisabled}
                         kind="tertiary"
                         onClick={() => props.onDelete(props.index)}
                         size="small"

From 04c16be5ea8cf0ba01b1a4480c5a832c8e40f139 Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Thu, 11 Jun 2026 12:15:23 -0700
Subject: [PATCH 05/10] [LEMS-4131/poc-improve-editor-controls-contrast] fix
 image fields, disabled

---
 .../image-editor/components/decorative-toggle.tsx   |  3 +++
 .../image-editor/components/image-scale-input.tsx   |  9 ++++++---
 .../image-editor/components/image-settings.tsx      | 13 +++++++++----
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/perseus-editor/src/widgets/image-editor/components/decorative-toggle.tsx b/packages/perseus-editor/src/widgets/image-editor/components/decorative-toggle.tsx
index fb3a6ee30c3..731a05b17a2 100644
--- a/packages/perseus-editor/src/widgets/image-editor/components/decorative-toggle.tsx
+++ b/packages/perseus-editor/src/widgets/image-editor/components/decorative-toggle.tsx
@@ -12,12 +12,14 @@ const {InfoTip} = components;
 interface Props {
     decorative?: boolean;
     hasPopulatedFields?: boolean;
+    editingDisabled?: boolean;
     onChange: ImageEditorProps["onChange"];
 }
 
 export default function DecorativeToggle({
     decorative,
     hasPopulatedFields,
+    editingDisabled = false,
     onChange,
 }: Props) {
     function handleDecorativeToggle(newValue: boolean) {
@@ -54,6 +56,7 @@ export default function DecorativeToggle({
                 <LabeledSwitch
                     label="Decorative"
                     checked={decorative ?? false}
+                    disabled={editingDisabled}
                     onChange={handleDecorativeToggle}
                 />
                 <InfoTip>
diff --git a/packages/perseus-editor/src/widgets/image-editor/components/image-scale-input.tsx b/packages/perseus-editor/src/widgets/image-editor/components/image-scale-input.tsx
index 4a36427e6d2..6c4b35bd475 100644
--- a/packages/perseus-editor/src/widgets/image-editor/components/image-scale-input.tsx
+++ b/packages/perseus-editor/src/widgets/image-editor/components/image-scale-input.tsx
@@ -20,12 +20,14 @@ const LARGE_DIMENSION_THRESHOLD = 1048576;
 interface Props {
     backgroundImage: PerseusImageBackground;
     scale: number;
+    editingDisabled?: boolean;
     onChange: ImageEditorProps["onChange"];
 }
 
 export default function ImageScaleInput({
     backgroundImage,
     scale,
+    editingDisabled = false,
     onChange,
 }: Props) {
     const width = backgroundImage.width ?? 0;
@@ -122,6 +124,7 @@ export default function ImageScaleInput({
                 kind="tertiary"
                 size="small"
                 startIcon={arrowCounterClockwise}
+                disabled={editingDisabled}
                 onClick={handleResetToOriginalSize}
             >
                 Recalculate natural size
@@ -154,7 +157,7 @@ export default function ImageScaleInput({
                         value={scale.toString()}
                         min={0}
                         onChange={handleScaleChange}
-                        disabled={hasInvalidDimensions}
+                        disabled={hasInvalidDimensions || editingDisabled}
                     />
                 }
                 styles={wbFieldStyles}
@@ -167,7 +170,7 @@ export default function ImageScaleInput({
                             value={(width * scale).toString()}
                             min={0}
                             onChange={handleScaledWidthChange}
-                            disabled={hasInvalidDimensions}
+                            disabled={hasInvalidDimensions || editingDisabled}
                         />
                     }
                     styles={wbFieldStyles}
@@ -180,7 +183,7 @@ export default function ImageScaleInput({
                             value={(height * scale).toString()}
                             min={0}
                             onChange={handleScaledHeightChange}
-                            disabled={hasInvalidDimensions}
+                            disabled={hasInvalidDimensions || editingDisabled}
                         />
                     }
                     styles={wbFieldStyles}
diff --git a/packages/perseus-editor/src/widgets/image-editor/components/image-settings.tsx b/packages/perseus-editor/src/widgets/image-editor/components/image-settings.tsx
index e76bfdad1c7..0f8e208a400 100644
--- a/packages/perseus-editor/src/widgets/image-editor/components/image-settings.tsx
+++ b/packages/perseus-editor/src/widgets/image-editor/components/image-settings.tsx
@@ -24,6 +24,7 @@ const altTextTooShortError =
 
 export default function ImageSettings({
     alt,
+    apiOptions,
     backgroundImage,
     scale = 1,
     caption,
@@ -40,6 +41,8 @@ export default function ImageSettings({
         return null;
     }
 
+    const editingDisabled = apiOptions?.editingDisabled ?? false;
+
     const hasPopulatedFields = Boolean(
         alt || caption || title || longDescription,
     );
@@ -87,6 +90,7 @@ export default function ImageSettings({
             <ImageScaleInput
                 backgroundImage={backgroundImage}
                 scale={scale}
+                editingDisabled={editingDisabled}
                 onChange={onChange}
             />
 
@@ -94,6 +98,7 @@ export default function ImageSettings({
             <DecorativeToggle
                 decorative={decorative}
                 hasPopulatedFields={hasPopulatedFields}
+                editingDisabled={editingDisabled}
                 onChange={onChange}
             />
 
@@ -106,7 +111,7 @@ export default function ImageSettings({
                     <TextArea
                         value={title ?? ""}
                         onChange={(value) => onChange({title: value})}
-                        disabled={decorative}
+                        disabled={decorative || editingDisabled}
                         autoResize={true}
                     />
                 }
@@ -123,7 +128,7 @@ export default function ImageSettings({
                             value={alt ?? ""}
                             onBlur={(e) => handleAltFieldBlur(e.target.value)}
                             onChange={handleAltFieldChange}
-                            disabled={decorative}
+                            disabled={decorative || editingDisabled}
                             autoResize={true}
                         />
                     }
@@ -153,7 +158,7 @@ export default function ImageSettings({
                     <TextArea
                         value={longDescription ?? ""}
                         onChange={(value) => onChange({longDescription: value})}
-                        disabled={decorative}
+                        disabled={decorative || editingDisabled}
                         autoResize={true}
                     />
                 }
@@ -167,7 +172,7 @@ export default function ImageSettings({
                     <TextArea
                         value={caption ?? ""}
                         onChange={(value) => onChange({caption: value})}
-                        disabled={decorative}
+                        disabled={decorative || editingDisabled}
                         autoResize={true}
                     />
                 }

From cbefeed55be092c452588ff4cfab7b18da7ad29c Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Thu, 11 Jun 2026 13:25:03 -0700
Subject: [PATCH 06/10] [LEMS-4131/poc-improve-editor-controls-contrast] update
 for interactive graph

---
 .../components/graph-type-selector.tsx        |  2 ++
 .../interactive-graph-settings.test.tsx       | 12 ++++-----
 .../components/interactive-graph-settings.tsx |  9 +++++--
 .../components/interactive-graph-sr-tree.tsx  | 25 ++++++++++++++++---
 .../interactive-graph-editor.tsx              |  8 ++++++
 .../locked-ellipse-settings.tsx               |  5 ++++
 .../locked-figures/locked-figure-aria.tsx     |  9 ++++++-
 .../locked-figure-settings-actions.tsx        |  8 +++++-
 .../locked-figures/locked-figure-settings.tsx |  7 ++++++
 .../locked-figures/locked-figures-section.tsx |  1 +
 .../locked-function-settings.tsx              |  5 ++++
 .../locked-figures/locked-label-settings.tsx  |  4 +++
 .../locked-figures/locked-line-settings.tsx   |  5 ++++
 .../locked-figures/locked-point-settings.tsx  |  9 +++++++
 .../locked-polygon-settings.tsx               |  6 +++++
 .../locked-figures/locked-vector-settings.tsx |  5 ++++
 .../start-coords/start-coords-settings.tsx    |  4 ++-
 17 files changed, 109 insertions(+), 15 deletions(-)

diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/graph-type-selector.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/graph-type-selector.tsx
index 560b486edc7..304d01aeb44 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/graph-type-selector.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/graph-type-selector.tsx
@@ -5,6 +5,7 @@ import * as React from "react";
 
 type GraphTypeSelectorProps = {
     graphType: string;
+    disabled?: boolean;
     onChange: (newGraphType: string) => void;
 };
 
@@ -13,6 +14,7 @@ const GraphTypeSelector = (props: GraphTypeSelectorProps) => {
         <SingleSelect
             selectedValue={props.graphType}
             onChange={props.onChange}
+            disabled={props.disabled}
             placeholder="Select an answer type"
             style={styles.singleSelectShort}
         >
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.test.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.test.tsx
index 83ffd2a7322..78dced8ace3 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.test.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.test.tsx
@@ -97,9 +97,9 @@ describe("InteractiveGraphSettings", () => {
         // Assert
         expect(screen.getByText("x Label")).toBeInTheDocument();
         expect(screen.getByText("y Label")).toBeInTheDocument();
-        expect(screen.getByText("Markings:")).toBeInTheDocument();
+        expect(screen.getByText("Markings")).toBeInTheDocument();
         expect(screen.getByText("Snap Step")).toBeInTheDocument();
-        expect(screen.getByText("Background image URL:")).toBeInTheDocument();
+        expect(screen.getByText("Background image URL")).toBeInTheDocument();
         expect(screen.getByText("Show protractor")).toBeInTheDocument();
     });
 
@@ -143,7 +143,7 @@ describe("InteractiveGraphSettings", () => {
 
         // Act
         const input = screen.getByRole("textbox", {
-            name: "Background image URL:",
+            name: "Background image URL",
         });
         await userEvent.type(input, "https://example.com/image.png");
         await userEvent.tab();
@@ -181,7 +181,7 @@ describe("InteractiveGraphSettings", () => {
 
         // Act
         const input = screen.getByRole("textbox", {
-            name: "Background image URL:",
+            name: "Background image URL",
         });
         await userEvent.type(input, "https://example.com/image.png");
         await userEvent.tab();
@@ -214,7 +214,7 @@ describe("InteractiveGraphSettings", () => {
 
         // Act
         const input = screen.getByRole("textbox", {
-            name: "Background image URL:",
+            name: "Background image URL",
         });
         await userEvent.clear(input);
         await userEvent.tab();
@@ -247,7 +247,7 @@ describe("InteractiveGraphSettings", () => {
 
         // Act
         const input = screen.getByRole("textbox", {
-            name: "Background image URL:",
+            name: "Background image URL",
         });
         input.focus();
         // Disabling this because we need to test keypress events that are
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx
index d12f4c966f3..b937187448a 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx
@@ -538,6 +538,8 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
     };
 
     render() {
+        const editingDisabled = this.props.apiOptions?.editingDisabled ?? false;
+
         return (
             <>
                 <Heading
@@ -556,6 +558,7 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
                                     <ButtonGroup
                                         value={this.props.labelLocation}
                                         allowEmpty={false}
+                                        disabled={editingDisabled}
                                         buttons={[
                                             {
                                                 value: "onAxis",
@@ -682,6 +685,7 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
                                     <Button
                                         size="small"
                                         kind="tertiary"
+                                        disabled={editingDisabled}
                                         onClick={() => {
                                             this.changeStepsBasedOnRange();
                                         }}
@@ -706,10 +710,11 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
                                 </div>
                             </div>
                             <div className="perseus-widget-row">
-                                <LabeledRow label="Markings:">
+                                <LabeledRow label="Markings">
                                     <ButtonGroup
                                         value={this.props.markings}
                                         allowEmpty={false}
+                                        disabled={editingDisabled}
                                         buttons={[
                                             {value: "axes", content: "Axes"},
                                             {value: "graph", content: "Graph"},
@@ -732,7 +737,7 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
                         </div>
 
                         <LabeledRow
-                            label="Background image URL:"
+                            label="Background image URL"
                             style={styles.resetSpaceTop}
                         >
                             <input
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-sr-tree.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-sr-tree.tsx
index 15efa96054a..13caaef9dc3 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-sr-tree.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-sr-tree.tsx
@@ -3,7 +3,7 @@ import {NeutralBadge, StatusBadge} from "@khanacademy/wonder-blocks-badge";
 import {addStyle, View} from "@khanacademy/wonder-blocks-core";
 import {Spring, Strut} from "@khanacademy/wonder-blocks-layout";
 import Switch from "@khanacademy/wonder-blocks-switch";
-import {spacing} from "@khanacademy/wonder-blocks-tokens";
+import {font, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {BodyText} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -108,7 +108,11 @@ function SRTree(props: Props) {
                         <StatusBadge
                             kind="success"
                             label={aria.roleOrTag}
-                            styles={{root: styles.smallSpaceRight}}
+                            showBorder={false}
+                            styles={{
+                                root: styles.smallSpaceRight,
+                                label: styles.badgeLabel,
+                            }}
                         />
                     )}
                     {aria.className}
@@ -119,12 +123,20 @@ function SRTree(props: Props) {
                                     <StatusBadge
                                         kind="info"
                                         label={value.name}
-                                        styles={{root: styles.smallSpaceRight}}
+                                        showBorder={false}
+                                        styles={{
+                                            root: styles.smallSpaceRight,
+                                            label: styles.badgeLabel,
+                                        }}
                                     />
                                 ) : (
                                     <NeutralBadge
                                         label={value.name}
-                                        styles={{root: styles.smallSpaceRight}}
+                                        showBorder={false}
+                                        styles={{
+                                            root: styles.smallSpaceRight,
+                                            label: styles.badgeLabel,
+                                        }}
                                     />
                                 )}
                                 {value.value}
@@ -202,6 +214,11 @@ const styles = StyleSheet.create({
     smallSpaceRight: {
         marginRight: spacing.xxSmall_6,
     },
+    // Match the pre-POC Pill look: badges default to a bold label, but the
+    // decorative tags in this tree should read at the regular body weight.
+    badgeLabel: {
+        fontWeight: font.weight.regular,
+    },
     indentListLeft: {
         listStyle: "revert",
         marginLeft: spacing.small_12,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx
index fc35e10f562..c16acebcacf 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx
@@ -438,6 +438,10 @@ class InteractiveGraphEditor extends React.Component<Props> {
                     <View>
                         <LabeledRow label="Answer type" labelSize="medium">
                             <GraphTypeSelector
+                                disabled={
+                                    this.props.apiOptions?.editingDisabled ??
+                                    false
+                                }
                                 graphType={
                                     this.props.graph?.type ??
                                     InteractiveGraph.defaultProps.userInput.type
@@ -514,6 +518,10 @@ class InteractiveGraphEditor extends React.Component<Props> {
                                     {...this.props.graph}
                                     range={this.props.range}
                                     step={this.props.step}
+                                    editingDisabled={
+                                        this.props.apiOptions
+                                            ?.editingDisabled ?? false
+                                    }
                                     onChange={this.changeStartCoords}
                                     onChangePointLabels={this.changePointLabels}
                                 />
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 9a36cf72d06..00e37d51991 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
@@ -71,6 +71,7 @@ const LockedEllipseSettings = (props: Props) => {
         onChangeProps,
         onMove,
         onRemove,
+        editingDisabled = false,
     } = props;
 
     /**
@@ -271,6 +272,7 @@ const LockedEllipseSettings = (props: Props) => {
             <LockedFigureAria
                 ariaLabel={ariaLabel}
                 getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
+                editingDisabled={editingDisabled}
                 onChangeProps={(newProps) => {
                     onChangeProps(newProps);
                 }}
@@ -286,6 +288,7 @@ const LockedEllipseSettings = (props: Props) => {
                     {...label}
                     key={labelIndex}
                     expanded={true}
+                    editingDisabled={editingDisabled}
                     onChangeProps={(newLabel) => {
                         handleLabelChange(newLabel, labelIndex);
                     }}
@@ -298,6 +301,7 @@ const LockedEllipseSettings = (props: Props) => {
             <Button
                 kind="tertiary"
                 startIcon={plusCircle}
+                disabled={editingDisabled}
                 onClick={() => {
                     const newLabel = {
                         ...getDefaultFigureForType("label"),
@@ -323,6 +327,7 @@ const LockedEllipseSettings = (props: Props) => {
             {/* Actions */}
             <LockedFigureSettingsActions
                 figureType={props.type}
+                editingDisabled={editingDisabled}
                 onMove={onMove}
                 onRemove={onRemove}
             />
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx
index d305130e0ff..fa42316b9ed 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx
@@ -18,11 +18,17 @@ type Props = {
      * for the locked figure with math details converted to spoken words.
      */
     getPrepopulatedAriaLabel: () => Promise<string>;
+    editingDisabled?: boolean;
     onChangeProps: (props: {ariaLabel?: string | undefined}) => void;
 };
 
 function LockedFigureAria(props: Props) {
-    const {ariaLabel, getPrepopulatedAriaLabel, onChangeProps} = props;
+    const {
+        ariaLabel,
+        getPrepopulatedAriaLabel,
+        editingDisabled = false,
+        onChangeProps,
+    } = props;
     const id = React.useId();
     const ariaLabelId = `aria-label-${id}`;
 
@@ -73,6 +79,7 @@ function LockedFigureAria(props: Props) {
             <Button
                 kind="tertiary"
                 startIcon={pencilCircle}
+                disabled={editingDisabled}
                 style={styles.button}
                 onClick={() => {
                     setLoading(true);
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-settings-actions.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-settings-actions.tsx
index 6e6e4d6f1e2..73f60f9ee67 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-settings-actions.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-settings-actions.tsx
@@ -26,12 +26,13 @@ export type LockedFigureSettingsMovementType =
 
 type Props = {
     figureType: LockedFigureType;
+    editingDisabled?: boolean;
     onMove?: (movement: LockedFigureSettingsMovementType) => void;
     onRemove: () => void;
 };
 
 const LockedFigureSettingsActions = (props: Props) => {
-    const {figureType, onMove, onRemove} = props;
+    const {figureType, editingDisabled = false, onMove, onRemove} = props;
 
     return (
         <View style={styles.container}>
@@ -40,6 +41,7 @@ const LockedFigureSettingsActions = (props: Props) => {
                 aria-label={`Delete locked ${figureType}`}
                 onClick={onRemove}
                 kind="tertiary"
+                disabled={editingDisabled}
                 style={styles.deleteButton}
             >
                 Delete
@@ -54,6 +56,7 @@ const LockedFigureSettingsActions = (props: Props) => {
                         kind="tertiary"
                         size="small"
                         aria-label={`Move locked ${figureType} to the back`}
+                        disabled={editingDisabled}
                         onClick={() => onMove("back")}
                     />
                     <IconButton
@@ -61,6 +64,7 @@ const LockedFigureSettingsActions = (props: Props) => {
                         kind="tertiary"
                         size="small"
                         aria-label={`Move locked ${figureType} backward`}
+                        disabled={editingDisabled}
                         onClick={() => onMove("backward")}
                     />
                     <IconButton
@@ -68,6 +72,7 @@ const LockedFigureSettingsActions = (props: Props) => {
                         kind="tertiary"
                         size="small"
                         aria-label={`Move locked ${figureType} forward`}
+                        disabled={editingDisabled}
                         onClick={() => onMove("forward")}
                     />
                     <IconButton
@@ -75,6 +80,7 @@ const LockedFigureSettingsActions = (props: Props) => {
                         kind="tertiary"
                         size="small"
                         aria-label={`Move locked ${figureType} to the front`}
+                        disabled={editingDisabled}
                         onClick={() => onMove("front")}
                     />
                 </>
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-settings.tsx
index 7a66ab0ecc5..f46a2ede991 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-settings.tsx
@@ -45,6 +45,13 @@ export type LockedFigureSettingsCommonProps = {
      * Called when the accordion is expanded or collapsed.
      */
     onToggle?: (expanded: boolean) => void;
+
+    /**
+     * Whether editing is disabled for the whole editor. When true, the
+     * figure's action controls (auto-generate, add label, delete, move)
+     * are disabled.
+     */
+    editingDisabled?: boolean;
 };
 
 // Union this type with other locked figure types when they are added.
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figures-section.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figures-section.tsx
index 2839bbcca8f..dfd30267e6a 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figures-section.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figures-section.tsx
@@ -172,6 +172,7 @@ const LockedFiguresSection = (props: Props) => {
                                     setExpandedStates(newExpanded);
                                 }}
                                 {...figure}
+                                editingDisabled={editingDisabled}
                                 onChangeProps={(newProps) =>
                                     changeProps(index, newProps)
                                 }
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 93c6bbfa658..f84b1f3d973 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
@@ -66,6 +66,7 @@ const LockedFunctionSettings = (props: Props) => {
         onChangeProps,
         onMove,
         onRemove,
+        editingDisabled = false,
     } = props;
     const labels = props.labels;
     const equationPrefix = directionalAxis === "x" ? "y=" : "x=";
@@ -345,6 +346,7 @@ const LockedFunctionSettings = (props: Props) => {
             <LockedFigureAria
                 ariaLabel={ariaLabel}
                 getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
+                editingDisabled={editingDisabled}
                 onChangeProps={(newProps) => {
                     onChangeProps(newProps);
                 }}
@@ -360,6 +362,7 @@ const LockedFunctionSettings = (props: Props) => {
                     key={labelIndex}
                     {...label}
                     expanded={true}
+                    editingDisabled={editingDisabled}
                     onChangeProps={(newLabel) => {
                         handleLabelChange(newLabel, labelIndex);
                     }}
@@ -372,6 +375,7 @@ const LockedFunctionSettings = (props: Props) => {
             <Button
                 kind="tertiary"
                 startIcon={plusCircle}
+                disabled={editingDisabled}
                 onClick={() => {
                     const newLabel = {
                         ...getDefaultFigureForType("label"),
@@ -394,6 +398,7 @@ const LockedFunctionSettings = (props: Props) => {
             {/* Actions */}
             <LockedFigureSettingsActions
                 figureType={props.type}
+                editingDisabled={editingDisabled}
                 onMove={onMove}
                 onRemove={onRemove}
             />
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx
index b9b99334f03..9e3202c8027 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx
@@ -48,6 +48,8 @@ export type Props = LockedLabelType & {
      * Called when the delete button is pressed.
      */
     onRemove: () => void;
+    /** Whether editing is disabled for the whole editor. */
+    editingDisabled?: boolean;
 
     // Accordion props. Used for standalone labels for the expand/collapse
     // button functionality. Not used within other locked figure settings.
@@ -77,6 +79,7 @@ export default function LockedLabelSettings(props: Props) {
         onRemove,
         onToggle,
         containerStyle,
+        editingDisabled = false,
     } = props;
 
     return (
@@ -188,6 +191,7 @@ export default function LockedLabelSettings(props: Props) {
             {/* Actions */}
             <LockedFigureSettingsActions
                 figureType={type}
+                editingDisabled={editingDisabled}
                 onMove={onMove}
                 onRemove={onRemove}
             />
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 a9e14680962..df68acb32ce 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
@@ -69,6 +69,7 @@ const LockedLineSettings = (props: Props) => {
         onChangeProps,
         onMove,
         onRemove,
+        editingDisabled = false,
     } = props;
     const [point1, point2] = points;
 
@@ -311,6 +312,7 @@ const LockedLineSettings = (props: Props) => {
             <LockedFigureAria
                 ariaLabel={ariaLabel}
                 getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
+                editingDisabled={editingDisabled}
                 onChangeProps={(newProps) => {
                     onChangeProps(newProps);
                 }}
@@ -327,6 +329,7 @@ const LockedLineSettings = (props: Props) => {
                     {...label}
                     key={labelIndex}
                     expanded={true}
+                    editingDisabled={editingDisabled}
                     onChangeProps={(newLabel) => {
                         handleLabelChange(newLabel, labelIndex);
                     }}
@@ -339,6 +342,7 @@ const LockedLineSettings = (props: Props) => {
             <Button
                 kind="tertiary"
                 startIcon={plusCircle}
+                disabled={editingDisabled}
                 onClick={() => {
                     // Additional vertical offset for each label so
                     // they don't overlap.
@@ -367,6 +371,7 @@ const LockedLineSettings = (props: Props) => {
             {/* Actions */}
             <LockedFigureSettingsActions
                 figureType={props.type}
+                editingDisabled={editingDisabled}
                 onMove={onMove}
                 onRemove={onRemove}
             />
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 b88d094358c..102a56627ca 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
@@ -75,6 +75,10 @@ export type Props = LockedPointType & {
      * Called when the point is removed.
      */
     onRemove?: () => void;
+    /**
+     * Whether editing is disabled for the whole editor.
+     */
+    editingDisabled?: boolean;
 };
 
 const LockedPointSettings = (props: Props) => {
@@ -94,6 +98,7 @@ const LockedPointSettings = (props: Props) => {
         expanded,
         onTogglePoint,
         onToggle,
+        editingDisabled = false,
     } = props;
 
     const isDefiningPoint = !onMove && !onRemove;
@@ -238,6 +243,7 @@ const LockedPointSettings = (props: Props) => {
                     <LockedFigureAria
                         ariaLabel={ariaLabel}
                         getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
+                        editingDisabled={editingDisabled}
                         onChangeProps={(newProps) => {
                             onChangeProps(newProps);
                         }}
@@ -258,6 +264,7 @@ const LockedPointSettings = (props: Props) => {
                         !isDefiningPoint && styles.lockedPointLabelContainer
                     }
                     expanded={true}
+                    editingDisabled={editingDisabled}
                     onChangeProps={(newLabel) => {
                         handleLabelChange(newLabel, labelIndex);
                     }}
@@ -269,6 +276,7 @@ const LockedPointSettings = (props: Props) => {
             <Button
                 kind="tertiary"
                 startIcon={plusCircle}
+                disabled={editingDisabled}
                 onClick={() => {
                     const newLabel = {
                         ...getDefaultFigureForType("label"),
@@ -297,6 +305,7 @@ const LockedPointSettings = (props: Props) => {
             {onRemove && (
                 <LockedFigureSettingsActions
                     figureType={props.type}
+                    editingDisabled={editingDisabled}
                     onMove={onMove}
                     onRemove={onRemove}
                 />
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 b10dfee6c74..5e564f22134 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
@@ -65,6 +65,7 @@ const LockedPolygonSettings = (props: Props) => {
         onChangeProps,
         onMove,
         onRemove,
+        editingDisabled = false,
     } = props;
 
     /**
@@ -318,6 +319,7 @@ const LockedPolygonSettings = (props: Props) => {
                     <Button
                         kind="tertiary"
                         startIcon={plusCircle}
+                        disabled={editingDisabled}
                         onClick={() => {
                             props.onChangeProps({
                                 points: [...points, [0, 0]],
@@ -371,6 +373,7 @@ const LockedPolygonSettings = (props: Props) => {
             <LockedFigureAria
                 ariaLabel={ariaLabel}
                 getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
+                editingDisabled={editingDisabled}
                 onChangeProps={(newProps) => {
                     onChangeProps(newProps);
                 }}
@@ -386,6 +389,7 @@ const LockedPolygonSettings = (props: Props) => {
                     {...label}
                     key={labelIndex}
                     expanded={true}
+                    editingDisabled={editingDisabled}
                     onChangeProps={(newLabel) => {
                         handleLabelChange(newLabel, labelIndex);
                     }}
@@ -398,6 +402,7 @@ const LockedPolygonSettings = (props: Props) => {
             <Button
                 kind="tertiary"
                 startIcon={plusCircle}
+                disabled={editingDisabled}
                 onClick={() => {
                     const newLabel = {
                         ...getDefaultFigureForType("label"),
@@ -423,6 +428,7 @@ const LockedPolygonSettings = (props: Props) => {
             {/* Actions */}
             <LockedFigureSettingsActions
                 figureType={props.type}
+                editingDisabled={editingDisabled}
                 onMove={onMove}
                 onRemove={onRemove}
             />
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 308eac42396..94fa9ad68dd 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
@@ -65,6 +65,7 @@ const LockedVectorSettings = (props: Props) => {
         onChangeProps,
         onMove,
         onRemove,
+        editingDisabled = false,
     } = props;
     const [tail, tip] = points;
     const lineLabel = `Vector (${tail[0]}, ${tail[1]}), (${tip[0]}, ${tip[1]})`;
@@ -240,6 +241,7 @@ const LockedVectorSettings = (props: Props) => {
             <LockedFigureAria
                 ariaLabel={ariaLabel}
                 getPrepopulatedAriaLabel={getPrepopulatedAriaLabel}
+                editingDisabled={editingDisabled}
                 onChangeProps={(newProps) => {
                     onChangeProps(newProps);
                 }}
@@ -255,6 +257,7 @@ const LockedVectorSettings = (props: Props) => {
                     {...label}
                     key={labelIndex}
                     expanded={true}
+                    editingDisabled={editingDisabled}
                     onChangeProps={(newLabel) => {
                         handleLabelChange(newLabel, labelIndex);
                     }}
@@ -267,6 +270,7 @@ const LockedVectorSettings = (props: Props) => {
             <Button
                 kind="tertiary"
                 startIcon={plusCircle}
+                disabled={editingDisabled}
                 onClick={() => {
                     // Additional vertical offset for each label so
                     // they don't overlap.
@@ -295,6 +299,7 @@ const LockedVectorSettings = (props: Props) => {
             {/* Actions */}
             <LockedFigureSettingsActions
                 figureType={props.type}
+                editingDisabled={editingDisabled}
                 onMove={onMove}
                 onRemove={onRemove}
             />
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-settings.tsx
index 15fc2051e05..90699fe0c5a 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-settings.tsx
@@ -43,6 +43,7 @@ interface StartCoordsSettingsProps {
     range: [x: Range, y: Range];
     step: [x: number, y: number];
     allowReflexAngles?: boolean;
+    editingDisabled?: boolean;
     onChange: (startCoords: StartCoords) => void;
     onChangePointLabels: (pointLabels: ReadonlyArray<string>) => void;
 }
@@ -229,7 +230,7 @@ const StartCoordsSettingsInner = (props: Props) => {
 };
 
 const StartCoordsSettings = (props: Props) => {
-    const {range, step, onChange} = props;
+    const {range, step, editingDisabled, onChange} = props;
     const [isOpen, setIsOpen] = React.useState(true);
 
     return (
@@ -254,6 +255,7 @@ const StartCoordsSettings = (props: Props) => {
                             startIcon={arrowCounterClockwise}
                             kind="tertiary"
                             size="small"
+                            disabled={editingDisabled}
                             onClick={() => {
                                 onChange(
                                     getDefaultGraphStartCoords(

From 99b7f6ec456d89bf29a98803af70200eb4a1c55b Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Thu, 11 Jun 2026 14:24:53 -0700
Subject: [PATCH 07/10] [LEMS-4131/poc-improve-editor-controls-contrast] add
 missing editingDisabled in locked figures

---
 .../src/components/coordinate-pair-input.tsx       | 13 ++++++++++++-
 .../components/interactive-graph-description.tsx   | 10 +++++++++-
 .../components/interactive-graph-sr-tree.tsx       |  2 ++
 .../interactive-graph-editor.tsx                   |  6 ++++++
 .../locked-figures/color-select.tsx                |  4 +++-
 .../locked-figures/line-stroke-select.tsx          |  9 ++++++++-
 .../locked-figures/line-weight-select.tsx          |  9 ++++++++-
 .../locked-figures/locked-ellipse-settings.tsx     |  6 ++++++
 .../locked-figures/locked-figure-aria.tsx          |  1 +
 .../locked-figures/locked-function-settings.tsx    | 14 +++++++++++++-
 .../locked-figures/locked-label-settings.tsx       |  4 ++++
 .../locked-figures/locked-line-settings.tsx        |  6 ++++++
 .../locked-figures/locked-point-settings.tsx       |  4 ++++
 .../locked-figures/locked-polygon-settings.tsx     | 11 +++++++++++
 .../locked-figures/locked-vector-settings.tsx      |  4 ++++
 15 files changed, 97 insertions(+), 6 deletions(-)

diff --git a/packages/perseus-editor/src/components/coordinate-pair-input.tsx b/packages/perseus-editor/src/components/coordinate-pair-input.tsx
index 53313e128a0..3d97332d089 100644
--- a/packages/perseus-editor/src/components/coordinate-pair-input.tsx
+++ b/packages/perseus-editor/src/components/coordinate-pair-input.tsx
@@ -14,6 +14,7 @@ type Props = {
     coord: [number, number];
     labels?: [string, string];
     error?: boolean;
+    disabled?: boolean;
     style?: StyleType;
     // TODO(LEMS-3995) simplifying styling after custom label work + change deprecated WonderBlocks component / aphrodite
     labelStyle?: StyleType;
@@ -21,7 +22,15 @@ type Props = {
 };
 
 const CoordinatePairInput = (props: Props) => {
-    const {coord, labels, error, style, labelStyle, onChange} = props;
+    const {
+        coord,
+        labels,
+        error,
+        disabled = false,
+        style,
+        labelStyle,
+        onChange,
+    } = props;
 
     const xLabel = labels ? labels[0] : "x coord";
     const yLabel = labels ? labels[1] : "y coord";
@@ -71,6 +80,7 @@ const CoordinatePairInput = (props: Props) => {
                 <Strut size={spacing.xxSmall_6} />
                 <ScrolllessNumberTextField
                     value={coordState[0]}
+                    disabled={disabled}
                     onChange={(newValue) => handleCoordChange(newValue, 0)}
                     style={[
                         styles.textField,
@@ -91,6 +101,7 @@ const CoordinatePairInput = (props: Props) => {
                 <Strut size={spacing.xxSmall_6} />
                 <ScrolllessNumberTextField
                     value={coordState[1]}
+                    disabled={disabled}
                     onChange={(newValue) => handleCoordChange(newValue, 1)}
                     style={[
                         styles.textField,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-description.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-description.tsx
index 273a876622a..83cef4b5d5c 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-description.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-description.tsx
@@ -13,11 +13,17 @@ import type {Props as EditorProps} from "../interactive-graph-editor";
 type Props = {
     ariaLabelValue: string;
     ariaDescriptionValue: string;
+    editingDisabled?: boolean;
     onChange: (graphProps: Partial<EditorProps>) => void;
 };
 
 export default function InteractiveGraphDescription(props: Props) {
-    const {ariaLabelValue, ariaDescriptionValue, onChange} = props;
+    const {
+        ariaLabelValue,
+        ariaDescriptionValue,
+        editingDisabled = false,
+        onChange,
+    } = props;
 
     const [isOpen, setIsOpen] = React.useState(true);
 
@@ -49,6 +55,7 @@ export default function InteractiveGraphDescription(props: Props) {
                         Title
                         <TextField
                             value={ariaLabelValue}
+                            disabled={editingDisabled}
                             onChange={(newValue) =>
                                 onChange({
                                     fullGraphAriaLabel:
@@ -72,6 +79,7 @@ export default function InteractiveGraphDescription(props: Props) {
                     <TextArea
                         id={descriptionTextAreaId}
                         value={ariaDescriptionValue}
+                        disabled={editingDisabled}
                         onChange={(newValue) =>
                             onChange({
                                 fullGraphAriaDescription:
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-sr-tree.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-sr-tree.tsx
index 13caaef9dc3..71bee4365a1 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-sr-tree.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-sr-tree.tsx
@@ -158,6 +158,7 @@ function InteractiveGraphSRTree({
     fullGraphAriaLabel,
     fullGraphAriaDescription,
     lockedFigures,
+    editingDisabled = false,
 }) {
     const [isExpanded, setIsExpanded] = React.useState(true);
     const [showTags, setShowTags] = React.useState(false);
@@ -190,6 +191,7 @@ function InteractiveGraphSRTree({
                         <Switch
                             id={switchId}
                             checked={showTags}
+                            disabled={editingDisabled}
                             onChange={setShowTags}
                         />
                         <Strut size={spacing.xSmall_8} />
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx
index c16acebcacf..67eefc60659 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx
@@ -465,6 +465,9 @@ class InteractiveGraphEditor extends React.Component<Props> {
                             ariaDescriptionValue={
                                 this.props.fullGraphAriaDescription ?? ""
                             }
+                            editingDisabled={
+                                this.props.apiOptions?.editingDisabled ?? false
+                            }
                             onChange={this.props.onChange}
                         />
                         <InteractiveGraphCorrectAnswer
@@ -535,6 +538,9 @@ class InteractiveGraphEditor extends React.Component<Props> {
                                 this.props.fullGraphAriaDescription
                             }
                             lockedFigures={this.props.lockedFigures}
+                            editingDisabled={
+                                this.props.apiOptions?.editingDisabled ?? false
+                            }
                         />
                         <InteractiveGraphSettings
                             box={getInteractiveBoxFromSizeClass(sizeClass)}
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-select.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-select.tsx
index 6957e66911d..1f2a6ef4266 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-select.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-select.tsx
@@ -15,11 +15,12 @@ import type {StyleType} from "@khanacademy/wonder-blocks-core";
 type Props = {
     selectedValue: LockedFigureColor;
     style?: StyleType;
+    editingDisabled?: boolean;
     onChange: (newColor: LockedFigureColor) => void;
 };
 
 const ColorSelect = (props: Props) => {
-    const {selectedValue, style, onChange} = props;
+    const {selectedValue, style, editingDisabled = false, onChange} = props;
 
     return (
         <View style={[styles.row, style]}>
@@ -28,6 +29,7 @@ const ColorSelect = (props: Props) => {
                 <Strut size={spacing.xxSmall_6} />
                 <SingleSelect
                     selectedValue={selectedValue}
+                    disabled={editingDisabled}
                     // TODO(LEMS-2656): remove TS suppression
                     // eslint-disable-next-line no-restricted-syntax
                     onChange={onChange as any}
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-stroke-select.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-stroke-select.tsx
index 07ad34d248b..19b847a60f9 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-stroke-select.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-stroke-select.tsx
@@ -12,10 +12,16 @@ type Props = {
     selectedValue: StyleOptions;
     onChange: (newValue: StyleOptions) => void;
     containerStyle?: StyleType;
+    editingDisabled?: boolean;
 };
 
 const LineStrokeSelect = (props: Props) => {
-    const {selectedValue, containerStyle, onChange} = props;
+    const {
+        selectedValue,
+        containerStyle,
+        editingDisabled = false,
+        onChange,
+    } = props;
 
     return (
         <BodyText tag="label" style={[styles.lineStrokeSelect, containerStyle]}>
@@ -23,6 +29,7 @@ const LineStrokeSelect = (props: Props) => {
             <Strut size={spacing.xxxSmall_4} />
             <SingleSelect
                 selectedValue={selectedValue}
+                disabled={editingDisabled}
                 // eslint-disable-next-line no-restricted-syntax
                 onChange={onChange as any}
                 // Placeholder is required, but never gets used.
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-weight-select.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-weight-select.tsx
index 19ea21188b0..8ef329bab69 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-weight-select.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-weight-select.tsx
@@ -11,10 +11,16 @@ type Props = {
     selectedValue: StrokeWeight;
     onChange: (newValue: StrokeWeight) => void;
     containerStyle?: StyleType;
+    editingDisabled?: boolean;
 };
 
 const LineWeightSelect = (props: Props) => {
-    const {selectedValue, containerStyle, onChange} = props;
+    const {
+        selectedValue,
+        containerStyle,
+        editingDisabled = false,
+        onChange,
+    } = props;
 
     return (
         <BodyText
@@ -34,6 +40,7 @@ const LineWeightSelect = (props: Props) => {
             <Strut size={spacing.xxxSmall_4} />
             <SingleSelect
                 selectedValue={selectedValue}
+                disabled={editingDisabled}
                 // eslint-disable-next-line no-restricted-syntax
                 onChange={(value) => onChange(value as StrokeWeight)}
                 // Placeholder is required, but never gets used.
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 00e37d51991..cadc8b4f158 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
@@ -187,6 +187,7 @@ const LockedEllipseSettings = (props: Props) => {
             <View style={styles.row}>
                 <CoordinatePairInput
                     coord={center}
+                    disabled={editingDisabled}
                     style={styles.spaceUnder}
                     onChange={handleCenterChange}
                 />
@@ -200,6 +201,7 @@ const LockedEllipseSettings = (props: Props) => {
             {/* Radius */}
             <CoordinatePairInput
                 coord={radius}
+                disabled={editingDisabled}
                 labels={["x radius", "y radius"]}
                 style={styles.spaceUnder}
                 onChange={(newCoords: Coord) =>
@@ -220,6 +222,7 @@ const LockedEllipseSettings = (props: Props) => {
                 {/* Color */}
                 <ColorSelect
                     selectedValue={color}
+                    editingDisabled={editingDisabled}
                     onChange={handleColorChange}
                 />
                 <Strut size={spacing.medium_16} />
@@ -233,6 +236,7 @@ const LockedEllipseSettings = (props: Props) => {
                     <Strut size={spacing.xxSmall_6} />
                     <SingleSelect
                         selectedValue={fillStyle}
+                        disabled={editingDisabled}
                         // TODO(LEMS-2656): remove TS suppression
                         onChange={
                             // eslint-disable-next-line no-restricted-syntax
@@ -256,6 +260,7 @@ const LockedEllipseSettings = (props: Props) => {
             {/* Stroke style */}
             <LineStrokeSelect
                 selectedValue={strokeStyle}
+                editingDisabled={editingDisabled}
                 onChange={(value) => onChangeProps({strokeStyle: value})}
                 containerStyle={{marginBottom: sizing.size_080}}
             />
@@ -263,6 +268,7 @@ const LockedEllipseSettings = (props: Props) => {
             {/* Weight */}
             <LineWeightSelect
                 selectedValue={weight}
+                editingDisabled={editingDisabled}
                 onChange={(value) => onChangeProps({weight: value})}
             />
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx
index fa42316b9ed..4ed42dd765c 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx
@@ -65,6 +65,7 @@ function LockedFigureAria(props: Props) {
             <TextArea
                 id={ariaLabelId}
                 value={loading ? "Loading..." : ariaLabel ?? ""}
+                disabled={editingDisabled}
                 onChange={(newValue) => {
                     onChangeProps({
                         // Save as undefined if the field is empty.
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 f84b1f3d973..dfd9071389c 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
@@ -210,6 +210,7 @@ const LockedFunctionSettings = (props: Props) => {
                 {/* Line color settings */}
                 <ColorSelect
                     selectedValue={lineColor}
+                    editingDisabled={editingDisabled}
                     onChange={handleColorChange}
                 />
                 <Strut size={spacing.small_12} />
@@ -217,6 +218,7 @@ const LockedFunctionSettings = (props: Props) => {
                 {/* Line style settings */}
                 <LineStrokeSelect
                     selectedValue={strokeStyle}
+                    editingDisabled={editingDisabled}
                     onChange={(newValue) => {
                         handlePropChange("strokeStyle", newValue);
                     }}
@@ -226,6 +228,7 @@ const LockedFunctionSettings = (props: Props) => {
             {/* Line weight settings */}
             <LineWeightSelect
                 selectedValue={weight}
+                editingDisabled={editingDisabled}
                 onChange={(value) => onChangeProps({weight: value})}
             />
 
@@ -233,6 +236,7 @@ const LockedFunctionSettings = (props: Props) => {
                 {/* Directional axis (x or y) */}
                 <SingleSelect
                     selectedValue={directionalAxis}
+                    disabled={editingDisabled}
                     onChange={(newValue) => {
                         handlePropChange("directionalAxis", newValue);
                     }}
@@ -250,6 +254,7 @@ const LockedFunctionSettings = (props: Props) => {
                     type="text"
                     aria-label="equation"
                     value={equation}
+                    disabled={editingDisabled}
                     onChange={(newValue) => {
                         handlePropChange("equation", newValue);
                     }}
@@ -270,6 +275,7 @@ const LockedFunctionSettings = (props: Props) => {
                         type="number"
                         style={styles.domainMinField}
                         value={domainEntries[0]}
+                        disabled={editingDisabled}
                         onChange={(newValue) => {
                             handleDomainChange(0, newValue);
                         }}
@@ -288,6 +294,7 @@ const LockedFunctionSettings = (props: Props) => {
                         type="number"
                         style={styles.domainMaxField}
                         value={domainEntries[1]}
+                        disabled={editingDisabled}
                         onChange={(newValue) => {
                             handleDomainChange(1, newValue);
                         }}
@@ -311,6 +318,7 @@ const LockedFunctionSettings = (props: Props) => {
                     <Strut size={spacing.xxSmall_6} />
                     <SingleSelect
                         selectedValue={exampleCategory}
+                        disabled={editingDisabled}
                         onChange={setExampleCategory}
                         placeholder="examples"
                     >
@@ -334,6 +342,7 @@ const LockedFunctionSettings = (props: Props) => {
                                 example={example}
                                 index={index}
                                 pasteEquationFn={handlePropChange}
+                                editingDisabled={editingDisabled}
                             />
                         ))}
                     </ul>
@@ -411,10 +420,11 @@ type ItemProps = {
     example: string;
     index: number;
     pasteEquationFn: (property: string, newValue: string) => void;
+    editingDisabled: boolean;
 };
 
 const ExampleItem = (props: ItemProps): React.ReactElement => {
-    const {category, example, index, pasteEquationFn} = props;
+    const {category, example, index, pasteEquationFn, editingDisabled} = props;
     const exampleId = useId();
 
     return (
@@ -423,6 +433,7 @@ const ExampleItem = (props: ItemProps): React.ReactElement => {
                 icon={autoPasteIcon}
                 kind="tertiary"
                 aria-label="paste example"
+                disabled={editingDisabled}
                 aria-describedby={exampleId}
                 onClick={() => pasteEquationFn("equation", example)}
                 size="medium"
@@ -432,6 +443,7 @@ const ExampleItem = (props: ItemProps): React.ReactElement => {
                 icon={copyIcon}
                 kind="tertiary"
                 aria-label="copy example"
+                disabled={editingDisabled}
                 aria-describedby={exampleId}
                 onClick={() => navigator.clipboard.writeText(example)}
                 size="medium"
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx
index 9e3202c8027..d1baed2a7fe 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx
@@ -117,6 +117,7 @@ export default function LockedLabelSettings(props: Props) {
             {/* Coord settings */}
             <CoordinatePairInput
                 coord={coord}
+                disabled={editingDisabled}
                 onChange={(newCoords) => {
                     onChangeProps({coord: newCoords});
                 }}
@@ -133,6 +134,7 @@ export default function LockedLabelSettings(props: Props) {
                     <Strut size={spacing.xSmall_8} />
                     <TextField
                         value={text}
+                        disabled={editingDisabled}
                         placeholder="ex. $x^2$ or $\frac{1}{2}$"
                         onChange={(newValue) =>
                             onChangeProps({
@@ -156,6 +158,7 @@ export default function LockedLabelSettings(props: Props) {
             <View style={styles.row}>
                 <ColorSelect
                     selectedValue={color}
+                    editingDisabled={editingDisabled}
                     onChange={(newColor) => {
                         onChangeProps({color: newColor});
                     }}
@@ -169,6 +172,7 @@ export default function LockedLabelSettings(props: Props) {
                     <Strut size={spacing.xSmall_8} />
                     <SingleSelect
                         selectedValue={size}
+                        disabled={editingDisabled}
                         // TODO(LEMS-2656): remove TS suppression
                         onChange={
                             // eslint-disable-next-line no-restricted-syntax
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 df68acb32ce..0f0188cc32e 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
@@ -237,6 +237,7 @@ const LockedLineSettings = (props: Props) => {
                 <Strut size={spacing.xxxSmall_4} />
                 <SingleSelect
                     selectedValue={kind}
+                    disabled={editingDisabled}
                     // TODO(LEMS-2656): remove TS suppression
                     onChange={
                         // eslint-disable-next-line no-restricted-syntax
@@ -256,6 +257,7 @@ const LockedLineSettings = (props: Props) => {
                 {/* Line color settings */}
                 <ColorSelect
                     selectedValue={lineColor}
+                    editingDisabled={editingDisabled}
                     onChange={handleColorChange}
                 />
                 <Strut size={spacing.small_12} />
@@ -263,6 +265,7 @@ const LockedLineSettings = (props: Props) => {
                 {/* Line style settings */}
                 <LineStrokeSelect
                     selectedValue={lineStyle}
+                    editingDisabled={editingDisabled}
                     onChange={
                         // eslint-disable-next-line no-restricted-syntax
                         ((value: "solid" | "dashed") =>
@@ -272,6 +275,7 @@ const LockedLineSettings = (props: Props) => {
             </View>
             <LineWeightSelect
                 selectedValue={weight}
+                editingDisabled={editingDisabled}
                 onChange={(value: StrokeWeight) =>
                     onChangeProps({weight: value})
                 }
@@ -287,6 +291,7 @@ const LockedLineSettings = (props: Props) => {
                 headerLabel="Point 1"
                 expanded={true}
                 showPoint={showPoint1}
+                editingDisabled={editingDisabled}
                 error={isInvalid ? lengthZeroStr : null}
                 {...point1}
                 onTogglePoint={(newValue) =>
@@ -298,6 +303,7 @@ const LockedLineSettings = (props: Props) => {
                 headerLabel="Point 2"
                 expanded={true}
                 showPoint={showPoint2}
+                editingDisabled={editingDisabled}
                 error={isInvalid ? lengthZeroStr : null}
                 {...point2}
                 onTogglePoint={(newValue) =>
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 102a56627ca..eb825be9d93 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
@@ -202,6 +202,7 @@ const LockedPointSettings = (props: Props) => {
         >
             <CoordinatePairInput
                 coord={coord}
+                disabled={editingDisabled}
                 style={styles.spaceUnder}
                 onChange={handleCoordChange}
                 error={!!error}
@@ -213,6 +214,7 @@ const LockedPointSettings = (props: Props) => {
                     label="show point on graph"
                     checked={!!showPoint}
                     style={showPoint && styles.spaceUnder}
+                    disabled={editingDisabled}
                     onChange={onTogglePoint}
                 />
             )}
@@ -222,12 +224,14 @@ const LockedPointSettings = (props: Props) => {
                 <>
                     <ColorSelect
                         selectedValue={pointColor}
+                        editingDisabled={editingDisabled}
                         onChange={handleColorChange}
                         style={styles.spaceUnder}
                     />
                     <LabeledSwitch
                         label="open point"
                         checked={!filled}
+                        disabled={editingDisabled}
                         onChange={(newValue) => {
                             onChangeProps({filled: !newValue});
                         }}
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 5e564f22134..fe0c2c52249 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
@@ -197,6 +197,7 @@ const LockedPolygonSettings = (props: Props) => {
                 {/* Color */}
                 <ColorSelect
                     selectedValue={color}
+                    editingDisabled={editingDisabled}
                     onChange={handleColorChange}
                 />
                 <Strut size={spacing.medium_16} />
@@ -210,6 +211,7 @@ const LockedPolygonSettings = (props: Props) => {
                     <Strut size={spacing.xxSmall_6} />
                     <SingleSelect
                         selectedValue={fillStyle}
+                        disabled={editingDisabled}
                         // TODO(LEMS-2656): remove TS suppression
                         onChange={
                             // eslint-disable-next-line no-restricted-syntax
@@ -233,6 +235,7 @@ const LockedPolygonSettings = (props: Props) => {
             {/* Stroke style */}
             <LineStrokeSelect
                 selectedValue={strokeStyle}
+                editingDisabled={editingDisabled}
                 onChange={(value) => onChangeProps({strokeStyle: value})}
                 containerStyle={styles.spaceUnder}
             />
@@ -240,6 +243,7 @@ const LockedPolygonSettings = (props: Props) => {
             {/* Weight */}
             <LineWeightSelect
                 selectedValue={weight}
+                editingDisabled={editingDisabled}
                 onChange={(value) =>
                     onChangeProps({
                         weight: value,
@@ -252,6 +256,7 @@ const LockedPolygonSettings = (props: Props) => {
             <LabeledSwitch
                 label="show vertices"
                 checked={showVertices}
+                disabled={editingDisabled}
                 onChange={(newValue: boolean) =>
                     onChangeProps({showVertices: newValue})
                 }
@@ -284,6 +289,7 @@ const LockedPolygonSettings = (props: Props) => {
                             <Strut size={spacing.medium_16} />
                             <CoordinatePairInput
                                 coord={point}
+                                disabled={editingDisabled}
                                 labels={["x", "y"]}
                                 onChange={(newValue: Coord) => {
                                     const newPoints = [...points];
@@ -298,6 +304,7 @@ const LockedPolygonSettings = (props: Props) => {
                                 points.length > 3 && (
                                     <IconButton
                                         aria-label={`Delete polygon point ${pointLabel}`}
+                                        disabled={editingDisabled}
                                         icon={minusCircle}
                                         kind="tertiary"
                                         actionType="destructive"
@@ -335,6 +342,7 @@ const LockedPolygonSettings = (props: Props) => {
                     <View style={styles.movementButtonsContainer}>
                         <IconButton
                             aria-label="Move polygon up"
+                            disabled={editingDisabled}
                             size="small"
                             icon={arrowFatUp}
                             kind="tertiary"
@@ -343,6 +351,7 @@ const LockedPolygonSettings = (props: Props) => {
                         <View style={styles.row}>
                             <IconButton
                                 aria-label="Move polygon left"
+                                disabled={editingDisabled}
                                 size="small"
                                 icon={arrowFatLeft}
                                 kind="tertiary"
@@ -350,6 +359,7 @@ const LockedPolygonSettings = (props: Props) => {
                             />
                             <IconButton
                                 aria-label="Move polygon down"
+                                disabled={editingDisabled}
                                 size="small"
                                 icon={arrowFatDown}
                                 kind="tertiary"
@@ -357,6 +367,7 @@ const LockedPolygonSettings = (props: Props) => {
                             />
                             <IconButton
                                 aria-label="Move polygon right"
+                                disabled={editingDisabled}
                                 size="small"
                                 icon={arrowFatRight}
                                 kind="tertiary"
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 94fa9ad68dd..46568a0f25a 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
@@ -169,6 +169,7 @@ const LockedVectorSettings = (props: Props) => {
             {/* Line color settings */}
             <ColorSelect
                 selectedValue={lineColor}
+                editingDisabled={editingDisabled}
                 onChange={handleColorChange}
                 style={{marginBottom: sizing.size_080}}
             />
@@ -176,6 +177,7 @@ const LockedVectorSettings = (props: Props) => {
             {/* Line weight settings */}
             <LineWeightSelect
                 selectedValue={weight}
+                editingDisabled={editingDisabled}
                 onChange={(value: StrokeWeight) =>
                     onChangeProps({weight: value})
                 }
@@ -205,6 +207,7 @@ const LockedVectorSettings = (props: Props) => {
             >
                 <CoordinatePairInput
                     coord={tail}
+                    disabled={editingDisabled}
                     error={isInvalid}
                     onChange={(newProps) => {
                         handleChangePoint(newProps, 0);
@@ -228,6 +231,7 @@ const LockedVectorSettings = (props: Props) => {
             >
                 <CoordinatePairInput
                     coord={tip}
+                    disabled={editingDisabled}
                     error={isInvalid}
                     onChange={(newProps) => {
                         handleChangePoint(newProps, 1);

From 00cc9c884b0073dac372f7c5c2b8e446a82d3946 Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Thu, 11 Jun 2026 17:02:24 -0700
Subject: [PATCH 08/10] [LEMS-4131/poc-improve-editor-controls-contrast] fix
 for label image, add editingDisabled

---
 .../label-image-editor/answer-choices.tsx     | 25 +++++++++++++++++--
 .../label-image-editor/label-image-editor.tsx |  6 ++++-
 .../label-image-editor/select-image.tsx       | 11 ++++++--
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/packages/perseus-editor/src/widgets/label-image-editor/answer-choices.tsx b/packages/perseus-editor/src/widgets/label-image-editor/answer-choices.tsx
index 94a6abc902f..916e74f5946 100644
--- a/packages/perseus-editor/src/widgets/label-image-editor/answer-choices.tsx
+++ b/packages/perseus-editor/src/widgets/label-image-editor/answer-choices.tsx
@@ -15,6 +15,8 @@ const {Icon} = components;
 type AddAnswerProps = {
     // Callback to add new answer choice.
     onClick: () => void;
+    // Whether the editor is disabled (read-only).
+    editingDisabled: boolean;
 };
 
 type AnswerProps = {
@@ -24,6 +26,8 @@ type AnswerProps = {
     onChange: (answer: string) => void;
     // Callback to remove answer from list of choices.
     onRemove: () => void;
+    // Whether the editor is disabled (read-only).
+    editingDisabled: boolean;
 };
 
 export type AnswerChoicesProps = {
@@ -92,10 +96,15 @@ const DraggableGripIcon = () => (
 /**
  * A button link to add a new answer.
  */
-const AddAnswer = ({onClick}: AddAnswerProps): React.ReactElement => (
+const AddAnswer = ({
+    onClick,
+    editingDisabled,
+}: AddAnswerProps): React.ReactElement => (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events, jsx-a11y/anchor-is-valid -- TODO(LEMS-2871): Address a11y error
     <Link
         className={css(styles.addAnswer, editorStyles.addAnswer)}
+        style={editingDisabled ? styles.disabledLink : undefined}
+        aria-disabled={editingDisabled}
         onClick={onClick}
     >
         <Icon icon={addIcon} size={24} />
@@ -111,10 +120,15 @@ const Answer = ({
     answer,
     onChange,
     onRemove,
+    editingDisabled,
 }: AnswerProps): React.ReactElement => (
     <li className={css(styles.answer)}>
         {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events, jsx-a11y/anchor-is-valid -- TODO(LEMS-2871): Address a11y error, TODO(LEMS-2871): Address a11y error */}
-        <Link onClick={onRemove}>
+        <Link
+            onClick={onRemove}
+            style={editingDisabled ? styles.disabledLink : undefined}
+            aria-disabled={editingDisabled}
+        >
             <Icon icon={removeIcon} size={24} color="#D92916" />
         </Link>
 
@@ -154,6 +168,7 @@ const AnswerChoices = ({
                 <Answer
                     answer={answer}
                     key={index}
+                    editingDisabled={editingDisabled}
                     // Update answer for choice.
                     onChange={(answer) => {
                         if (editingDisabled) {
@@ -180,6 +195,7 @@ const AnswerChoices = ({
         </ul>
 
         <AddAnswer
+            editingDisabled={editingDisabled}
             // Append a new empty answer to choices.
             onClick={() => {
                 if (editingDisabled) {
@@ -232,6 +248,11 @@ const styles = StyleSheet.create({
     disabled: {
         cursor: "not-allowed",
     },
+
+    disabledLink: {
+        cursor: "not-allowed",
+        opacity: 0.5,
+    },
 });
 
 const editorStyles = StyleSheet.create({
diff --git a/packages/perseus-editor/src/widgets/label-image-editor/label-image-editor.tsx b/packages/perseus-editor/src/widgets/label-image-editor/label-image-editor.tsx
index efdbfef7c02..ef0144b0125 100644
--- a/packages/perseus-editor/src/widgets/label-image-editor/label-image-editor.tsx
+++ b/packages/perseus-editor/src/widgets/label-image-editor/label-image-editor.tsx
@@ -213,7 +213,11 @@ class LabelImageEditor extends React.Component<Props> {
 
         return (
             <div>
-                <SelectImage onChange={this.handleImageChange} url={imageUrl} />
+                <SelectImage
+                    onChange={this.handleImageChange}
+                    url={imageUrl}
+                    editingDisabled={editingDisabled}
+                />
 
                 <div className={css(styles.smallSpacer)} />
 
diff --git a/packages/perseus-editor/src/widgets/label-image-editor/select-image.tsx b/packages/perseus-editor/src/widgets/label-image-editor/select-image.tsx
index e6f2fa88902..ac049a01525 100644
--- a/packages/perseus-editor/src/widgets/label-image-editor/select-image.tsx
+++ b/packages/perseus-editor/src/widgets/label-image-editor/select-image.tsx
@@ -15,9 +15,16 @@ export type SelectImageProps = {
     onChange: (url: string) => void;
     // The selected image URL.
     url: string;
+    // Whether the editor is disabled. Can be set via API options
+    // to make the editor read-only when needed.
+    editingDisabled?: boolean;
 };
 
-const SelectImage = ({onChange, url}: SelectImageProps): React.ReactElement => (
+const SelectImage = ({
+    onChange,
+    url,
+    editingDisabled = false,
+}: SelectImageProps): React.ReactElement => (
     <div>
         <div className={css(styles.title)}>Image</div>
 
@@ -32,7 +39,7 @@ const SelectImage = ({onChange, url}: SelectImageProps): React.ReactElement => (
             <div className={css(styles.spacer)} />
 
             <Button
-                disabled={!url}
+                disabled={!url || editingDisabled}
                 aria-label={
                     url
                         ? ""

From 60ea039dbfacd8a4582f428647f103d5716e8ab9 Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Thu, 11 Jun 2026 18:01:32 -0700
Subject: [PATCH 09/10] [LEMS-4131/poc-improve-editor-controls-contrast] fix
 for table editor, add editingDisabled

---
 .../src/widgets/table-editor.test.tsx         | 50 +++++++++++++++++++
 .../src/widgets/table-editor.tsx              | 11 +++-
 2 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 packages/perseus-editor/src/widgets/table-editor.test.tsx

diff --git a/packages/perseus-editor/src/widgets/table-editor.test.tsx b/packages/perseus-editor/src/widgets/table-editor.test.tsx
new file mode 100644
index 00000000000..7e75d84724f
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/table-editor.test.tsx
@@ -0,0 +1,50 @@
+import {render, screen} from "@testing-library/react";
+import * as React from "react";
+
+import TableEditor from "./table-editor";
+
+const baseProps = {
+    rows: 2,
+    columns: 3,
+    headers: ["a", "b", "c"],
+    answers: [
+        ["2", "4", "6"],
+        ["3", "6", "9"],
+    ],
+};
+
+describe("TableEditor", () => {
+    it("renders the answer cells", () => {
+        // Arrange, Act
+        render(<TableEditor {...baseProps} onChange={() => {}} />);
+
+        // Assert (4 and 9 are unique to answer cells; 2/3 also appear in the
+        // row/column size inputs)
+        expect(screen.getByDisplayValue("4")).toBeInTheDocument();
+        expect(screen.getByDisplayValue("9")).toBeInTheDocument();
+    });
+
+    it("leaves the answer cells enabled when editing is allowed", () => {
+        // Arrange, Act
+        render(<TableEditor {...baseProps} onChange={() => {}} />);
+
+        // Assert
+        expect(screen.getByDisplayValue("4")).toBeEnabled();
+        expect(screen.getByDisplayValue("9")).toBeEnabled();
+    });
+
+    it("disables the answer cells when editing is disabled", () => {
+        // Arrange, Act
+        render(
+            <TableEditor
+                {...baseProps}
+                onChange={() => {}}
+                apiOptions={{editingDisabled: true}}
+            />,
+        );
+
+        // Assert
+        expect(screen.getByDisplayValue("4")).toBeDisabled();
+        expect(screen.getByDisplayValue("9")).toBeDisabled();
+    });
+});
diff --git a/packages/perseus-editor/src/widgets/table-editor.tsx b/packages/perseus-editor/src/widgets/table-editor.tsx
index a05a5221512..c88612fffcb 100644
--- a/packages/perseus-editor/src/widgets/table-editor.tsx
+++ b/packages/perseus-editor/src/widgets/table-editor.tsx
@@ -90,6 +90,8 @@ class TableEditor extends React.Component<Props> {
     };
 
     render(): React.ReactNode {
+        const editingDisabled = this.props.apiOptions?.editingDisabled ?? false;
+
         const tableProps: Partial<PropsFor<typeof Table>> = {
             headers: this.props.headers,
             onChange: this.props.onChange,
@@ -103,7 +105,12 @@ class TableEditor extends React.Component<Props> {
                 // user input is actually editing answers
                 this.props.onChange({answers: userInput});
             },
-            apiOptions: this.props.apiOptions,
+            // When editing is disabled, mark the table read-only so its answer
+            // cells render disabled (the widget's inputs key off `readOnly`).
+            apiOptions: {
+                ...this.props.apiOptions,
+                readOnly: editingDisabled || this.props.apiOptions?.readOnly,
+            },
             editableHeaders: true,
             onFocus: () => {},
             onBlur: () => {},
@@ -119,6 +126,7 @@ class TableEditor extends React.Component<Props> {
                         <NumberInput
                             ref={this.numberOfColumns}
                             value={this.props.columns}
+                            disabled={editingDisabled}
                             onChange={(val) => {
                                 if (val) {
                                     this.onSizeInput(this.props.rows, val);
@@ -135,6 +143,7 @@ class TableEditor extends React.Component<Props> {
                             // eslint-disable-next-line react/no-string-refs
                             ref="numberOfRows"
                             value={this.props.rows}
+                            disabled={editingDisabled}
                             onChange={(val) => {
                                 if (val) {
                                     this.onSizeInput(val, this.props.columns);

From ac722c61756602c3cf0d1b34d232d2946395e820 Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Thu, 11 Jun 2026 18:33:42 -0700
Subject: [PATCH 10/10] [LEMS-4131/poc-improve-editor-controls-contrast] fix
 radio status pill color

---
 .../radio-option-content-and-image-editor.tsx    | 12 +++++++++++-
 .../src/widgets/radio/radio-option-settings.tsx  |  1 +
 .../src/widgets/radio/radio-status-pill.tsx      | 16 +++++++++++++++-
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/packages/perseus-editor/src/widgets/radio/radio-option-content-and-image-editor.tsx b/packages/perseus-editor/src/widgets/radio/radio-option-content-and-image-editor.tsx
index 0b024143b62..97eb243edc0 100644
--- a/packages/perseus-editor/src/widgets/radio/radio-option-content-and-image-editor.tsx
+++ b/packages/perseus-editor/src/widgets/radio/radio-option-content-and-image-editor.tsx
@@ -21,6 +21,8 @@ type Props = {
     isNoneOfTheAbove: boolean;
     content: string;
     choiceIndex: number;
+    // Whether the whole editor is disabled (apiOptions.editingDisabled).
+    editingDisabled?: boolean;
     onContentChange: (choiceIndex: number, content: string) => void;
 };
 
@@ -32,7 +34,13 @@ export const RadioOptionContentAndImageEditor = React.forwardRef<
     RadioOptionContentAndImageEditorHandle,
     Props
 >(function RadioOptionContentAndImageEditor(props, ref) {
-    const {content, choiceIndex, onContentChange, isNoneOfTheAbove} = props;
+    const {
+        content,
+        choiceIndex,
+        onContentChange,
+        isNoneOfTheAbove,
+        editingDisabled = false,
+    } = props;
     const uniqueId = React.useId();
     const contentTextAreaId = `${uniqueId}-content-textarea`;
     const textAreaRef = React.useRef<HTMLTextAreaElement>(null);
@@ -202,6 +210,7 @@ export const RadioOptionContentAndImageEditor = React.forwardRef<
                 ref={textAreaRef}
                 value={proxiedContent}
                 placeholder="Type a choice here..."
+                disabled={editingDisabled}
                 onChange={(value) => {
                     handleContentChange(choiceIndex, value);
                 }}
@@ -215,6 +224,7 @@ export const RadioOptionContentAndImageEditor = React.forwardRef<
                     startIcon={plusIcon}
                     size="small"
                     kind="tertiary"
+                    disabled={editingDisabled}
                     style={{alignSelf: "flex-start"}}
                     onClick={() => {
                         setAddingImage(true);
diff --git a/packages/perseus-editor/src/widgets/radio/radio-option-settings.tsx b/packages/perseus-editor/src/widgets/radio/radio-option-settings.tsx
index c76d15840f7..adeb4defb55 100644
--- a/packages/perseus-editor/src/widgets/radio/radio-option-settings.tsx
+++ b/packages/perseus-editor/src/widgets/radio/radio-option-settings.tsx
@@ -111,6 +111,7 @@ export const RadioOptionSettings = React.forwardRef<
                 content={content}
                 choiceIndex={index}
                 isNoneOfTheAbove={isNoneOfTheAbove ?? false}
+                editingDisabled={editingDisabled}
                 onContentChange={onContentChange}
             />
 
diff --git a/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx b/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx
index 62063ffdb68..640ecd44676 100644
--- a/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx
+++ b/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx
@@ -1,6 +1,6 @@
 import {StatusBadge} from "@khanacademy/wonder-blocks-badge";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import {border, sizing} from "@khanacademy/wonder-blocks-tokens";
+import {border, semanticColor, sizing} from "@khanacademy/wonder-blocks-tokens";
 import checkIcon from "@phosphor-icons/core/bold/check-bold.svg";
 import minusCircleIcon from "@phosphor-icons/core/bold/minus-circle-bold.svg";
 import {StyleSheet} from "aphrodite";
@@ -33,7 +33,14 @@ export function RadioStatusPill({
                     styles.badge,
                     // Round for single select, square for multiple select.
                     multipleSelect ? styles.square : styles.round,
+                    // Correct uses the strong (dark green) fill with knockout
+                    // (white) content, matching the runtime choice indicator.
+                    // Incorrect keeps StatusBadge's default subtle critical
+                    // (light red) styling.
+                    correct && styles.correctStrong,
                 ],
+                label: correct ? styles.knockoutForeground : undefined,
+                icon: correct ? styles.knockoutForeground : undefined,
             }}
         />
     );
@@ -49,4 +56,11 @@ const styles = StyleSheet.create({
     square: {
         borderRadius: border.radius.radius_040,
     },
+    correctStrong: {
+        backgroundColor: semanticColor.core.background.success.strong,
+        borderColor: semanticColor.core.border.success.strong,
+    },
+    knockoutForeground: {
+        color: semanticColor.core.foreground.knockout.default,
+    },
 });