Perseus Editor updates for PEICH (#2514)

PR to merge several changes from PEICH project thus far and expose new editor functionality for our content creators.

All of the changes included have been approved through the PR process. This is simply a formal commit to add to Perseus main now that we're ready to release to content.
- Issues Panel (#2377)
- Adds a warning message in the Issues Panel when a content creator uses a widget marked as inaccessible (#2474)
- Migrate accessibility logic from perseus to perseus-core (#2485)
- Add a basic FreeResponse widget (#2273)
- Add scoring criteria to Free Response Widget (#2286)
- [Free Response Widget] Add ability to customize placeholder (#2297)
- [Free Response Widget] Add optional character limit support (#2332)
- Render TeX in Free Response Widget questions (#2453)
- Update Free Response styles and accessibility (#2486)
- Use LabeledField in FreeResponseEditor (#2493)
- Add Free Response scoring and validation functions (#2498)
- Changeset: Release the new Free Response Widget (#2501)
- Version Packages (#2500)
- Add story for radio widget single select with images and scroll (#2494)
- Update to latest WB packages (#2455)
- Wonder Blocks: Updates WB Button instances to match new API (color -> actionType) (#2491)
- Version Packages (#2506)
- Ensure that our parser can handle empty strings for labelLocation for Interactive Graphs (#2509)
- Add tab navigation to new radio widget (#2510)
- Add typesafe parser for Categorizer's user input type (#2516)
- Update label image widget to handle answerless data and do some cleanup (#2495)
- Remove preferred popover direction from Label Image editor (#2512)
- [feature/peich] Revert bad commits. :(
- Removing manual traversal. (#2517)
- [feature/peich] Exporting violatingWidgets.
- Pass data between EditorPage and ItemEditor via new props (#2526)
- Add isItemAccessible function and enhance types (#2532)
- docs(changeset): Move traversal tests from perseus-editor and perseus into perseus-core (#2544)
- [feature/peich] A few fixes from the merge with main.
- Adding partially inaccessible functions to InteractiveGraph and LabelImage. (#2553)
- [feature/peich] Reverting pnpm lock file changes.

Author: catandthemachines

Reviewers: mark-fitzgerald, ivyolamit, SonicScrewdriver, anakaren-rojas

Required Reviewers:

Approved By: mark-fitzgerald

Checks: ✅ 14 checks were successful

Pull Request URL: #2514

Author: catandthemachines

.changeset/chilly-jokes-teach.md

@@ -0,0 +1,8 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-core": minor
+"@khanacademy/perseus-editor": minor
+"@khanacademy/perseus-linter": minor
+---
+
+Adding partically accessible widget function to interactive graph and label image.

.changeset/evil-needles-clap.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus-core": major
+"@khanacademy/perseus": major
+---
+
+Migrate accessibility logic from perseus to perseus-core

.changeset/green-pumas-know.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-core": patch
+---
+
+Move deleted traversal tests into perseus-core

.changeset/light-pandas-happen.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-core": minor
+---
+
+Add isItemAccessible helper which simplifies common usages of the violatingWidgets() function

.changeset/old-needles-sit.md

@@ -0,0 +1,7 @@
+---
+"@khanacademy/perseus-editor": major
+"@khanacademy/perseus-linter": major
+"@khanacademy/perseus-core": major
+---
+
+Moved checkAccessibilityAndWarn logic into a custom linter rule

.changeset/quick-pants-glow.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": major
+---
+
+This change introduces the Issues Panel container (LEMS-2925), which displays a list of accessibility warnings in the editor. Each warning includes a title, description, impact, and message. The panel also uses icons to indicate whether there are issues or if all checks have passed, improving visibility and clarity for content creators.

.changeset/rich-lamps-bake.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus-editor": major
+"@khanacademy/perseus-core": minor
+---
+
+Pass data between EditorPage and ItemEditor via new props

.changeset/thick-weeks-kneel.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Removed unnecessary logic.

packages/perseus-core/src/accessibility.test.ts

@@ -0,0 +1,184 @@
+import {isItemAccessible} from "./accessibility";
+import {registerCoreWidgets} from "./widgets/core-widget-registry";
+
+import type {PerseusItem} from "./data-schema";
+
+describe("isItemAccessible", () => {
+    beforeEach(() => {
+        registerCoreWidgets();
+    });
+
+    it("should return false if the item contains any inaccessible widgets", () => {
+        const itemData: PerseusItem = {
+            question: {
+                content:
+                    "Match the following items: [[☃ matcher 1]]\n\nHere's an explanation: [[☃ explanation 1]]\n\nAnd a graph: [[☃ interactive-graph 1]]",
+                widgets: {
+                    "explanation 1": {
+                        type: "explanation",
+                        options: {
+                            showPrompt: "Show",
+                            hidePrompt: "Hide",
+                            explanation: "Test explanation",
+                            widgets: {},
+                            static: false,
+                        },
+                    },
+                    "interactive-graph 1": {
+                        type: "interactive-graph",
+                        options: {
+                            graph: {
+                                type: "point",
+                                numPoints: 1,
+                            },
+                            range: [
+                                [-10, 10],
+                                [-10, 10],
+                            ],
+                            step: [1, 1],
+                            markings: "graph",
+                            showProtractor: false,
+                            correct: {
+                                type: "point",
+                                coords: [[0, 0]],
+                            },
+                            lockedFigures: [],
+                        },
+                    },
+                    "matcher 1": {
+                        type: "matcher",
+                        options: {
+                            labels: ["Concepts", "Definitions"],
+                            left: ["A", "B", "C"],
+                            right: ["1", "2", "3"],
+                            orderMatters: false,
+                            padding: true,
+                        },
+                    },
+                },
+                images: {},
+            },
+            hints: [],
+            answerArea: null,
+        };
+
+        expect(isItemAccessible(itemData)).toBe(false);
+    });
+
+    it("should return true if all widgets are accessible", () => {
+        const itemData: PerseusItem = {
+            question: {
+                content:
+                    "Here's an explanation: [[☃ explanation 1]]\n\nChoose an option: [[☃ radio 1]]",
+                widgets: {
+                    "explanation 1": {
+                        type: "explanation",
+                        options: {
+                            showPrompt: "Show",
+                            hidePrompt: "Hide",
+                            explanation: "Test explanation",
+                            widgets: {},
+                            static: false,
+                        },
+                    },
+                    "radio 1": {
+                        type: "radio",
+                        options: {
+                            choices: [
+                                {content: "Option 1", correct: true},
+                                {content: "Option 2", correct: false},
+                            ],
+                        },
+                    },
+                },
+                images: {},
+            },
+            hints: [],
+            answerArea: null,
+        };
+
+        expect(isItemAccessible(itemData)).toBe(true);
+    });
+
+    it("should mark item as inaccessible if widget options are inaccessible", () => {
+        const itemData: PerseusItem = {
+            question: {
+                content: "Here's an image: [[☃ image 1]]",
+                widgets: {
+                    "image 1": {
+                        type: "image",
+                        options: {
+                            backgroundImage: {
+                                url: "https://example.com/image.png",
+                                width: 400,
+                                height: 300,
+                            },
+                            // No alt text makes this image inaccessible
+                            alt: "",
+                        },
+                    },
+                },
+                images: {},
+            },
+            hints: [],
+            answerArea: null,
+        };
+
+        expect(isItemAccessible(itemData)).toBe(false);
+    });
+
+    it("should mark item as accessible if widget options are accessible", () => {
+        const itemData: PerseusItem = {
+            question: {
+                content: "Here's an image: [[☃ image 1]]",
+                widgets: {
+                    "image 1": {
+                        type: "image",
+                        options: {
+                            backgroundImage: {
+                                url: "https://example.com/image.png",
+                                width: 400,
+                                height: 300,
+                            },
+                            // Alt text makes this image accessible
+                            alt: "A descriptive alt text for the image",
+                        },
+                    },
+                },
+                images: {},
+            },
+            hints: [],
+            answerArea: null,
+        };
+
+        expect(isItemAccessible(itemData)).toBe(true);
+    });
+
+    it("should handle empty items", () => {
+        const itemData: PerseusItem = {
+            question: {
+                content: "",
+                widgets: {},
+                images: {},
+            },
+            hints: [],
+            answerArea: null,
+        };
+
+        expect(isItemAccessible(itemData)).toBe(true);
+    });
+
+    it("should handle items with no widgets", () => {
+        const itemData: PerseusItem = {
+            question: {
+                content: "Just some text",
+                widgets: {},
+                images: {},
+            },
+            hints: [],
+            answerArea: null,
+        };
+
+        expect(isItemAccessible(itemData)).toBe(true);
+    });
+});

packages/perseus-core/src/accessibility.ts

@@ -0,0 +1,46 @@
+/**
+ * Identifies whether or not a given perseus item requires the use of a mouse
+ * or screen, based on the widgets it contains.
+ */
+
+import {traverse} from "./traversal";
+import * as Widgets from "./widgets/core-widget-registry";
+
+import type {PerseusItem} from "./data-schema";
+
+/**
+ * Returns a list of widget types that cause a given Perseus item to require
+ * the use of a screen or mouse.
+ *
+ * For now we'll just check the `accessible` field on each of the widgets
+ * in the item data, but in the future we may specify accessibility on
+ * each widget with higher granularity.
+ *
+ * @deprecated This function returns a list of widget _types_ that violate our
+ * accessibility requirements which is not very accurate given that some
+ * instances _could_ be accessible and some not based on their widget options.
+ * In most cases, you should use {@link isItemAccessible} instead.
+ *
+ * @todo Inline this into {@link isItemAccessible}!
+ */
+export function violatingWidgets(itemData: PerseusItem): Array<string> {
+    // TODO(jordan): Hints as well
+    const widgetTypes: Array<string> = [];
+
+    traverse(itemData.question, null, function (info) {
+        if (info.type && !Widgets.isAccessible(info.type, info.options)) {
+            widgetTypes.push(info.type);
+        }
+    });
+
+    // Uniquify the list of widgets (by type)
+    return [...new Set(widgetTypes)];
+}
+
+/**
+ * Returns true if the given Perseus item is accessible (i.e., does not contain
+ * any widgets that violate our accessibility requirements).
+ */
+export function isItemAccessible(itemData: PerseusItem): boolean {
+    return violatingWidgets(itemData).length === 0;
+}