Adding partially inaccessible functions to InteractiveGraph and LabelImage. (#2553)

## Summary:
Adding partially inaccessible functions to InteractiveGraph and LabelImage. These functions detect the state in which these functions are inaccessible. Those states are:

InteractiveGraph:
- interactive graphs with graphie backgrounds.
- interactive graphs with a protractor.

LabelImage:
- label image widgets with background images that don't have alt text

Issue: LEMS-3102

## Test plan:
Run `pnpm test`, all tests should pass
Go to storybook page [chromatic]/?path=/story/perseuseditor-editorpage--demo
- Add interactive graphs with inaccessible states (listed above) and confirm they are flagged as inaccessible.
- Add label image with inaccessible state and confirm it flags as inaccessible.

Author: catandthemachines

Reviewers: jeremywiebe, tatianasnook, catandthemachines

Required Reviewers:

Approved By: tatianasnook, jeremywiebe

Checks: ✅ 8 checks were successful

Pull Request URL: #2553

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.

packages/perseus-core/src/index.ts

@@ -191,3 +191,11 @@ export {registerCoreWidgets} from "./widgets/core-widget-registry";
 
 export {traverse} from "./traversal";
 export {isItemAccessible, violatingWidgets} from "./accessibility";
+export {
+    isLabeledSVG,
+    getRealImageUrl,
+    getBaseUrl,
+    getSvgUrl,
+    getDataUrl,
+    getImageSizeModern,
+} from "./utils/util.graphie";

packages/perseus/src/util.graphie.test.ts renamed to packages/perseus-core/src/utils/util.graphie.test.ts

@@ -1,6 +1,11 @@
+import {isLabeledSVG} from "../../utils/util.graphie";
+
 import getInteractiveGraphPublicWidgetOptions from "./interactive-graph-util";
 
-import type {PerseusInteractiveGraphWidgetOptions} from "../../data-schema";
+import type {
+    PerseusInteractiveGraphWidgetOptions,
+    PerseusWidgetOptions,
+} from "../../data-schema";
 import type {WidgetLogic} from "../logic-export.types";
 
 export type InteractiveGraphDefaultWidgetOptions = Pick<
@@ -44,8 +49,31 @@ const interactiveGraphWidgetLogic: WidgetLogic = {
     name: "interactive-graph",
     defaultWidgetOptions,
     getPublicWidgetOptions: getInteractiveGraphPublicWidgetOptions,
-    // TODO(LEMS-3102): add partially inaccessible function
-    accessible: true,
+    // Function determining if a interactive graph is accessible.
+    // Interactive Graphs are accessible as long as:
+    // 1. They do not contain a protractor
+    // 2. They do not contain a graphie background image
+    accessible: (widgetOptions: PerseusWidgetOptions): boolean => {
+        const interactiveGraphOptions =
+            widgetOptions as PerseusInteractiveGraphWidgetOptions;
+
+        // Return false (inaccessible) if the interactive graph contains
+        // a protractor.
+        if (interactiveGraphOptions.showProtractor) {
+            return false;
+        }
+
+        // Return false (inaccessible) if the interactive graph contains
+        // a graphie background image.
+        if (
+            interactiveGraphOptions.backgroundImage?.url &&
+            isLabeledSVG(interactiveGraphOptions.backgroundImage?.url)
+        ) {
+            return false;
+        }
+
+        return true;
+    },
 };
 
 export default interactiveGraphWidgetLogic;

packages/perseus/src/util.graphie.ts renamed to packages/perseus-core/src/utils/util.graphie.ts

@@ -1,6 +1,9 @@
 import getLabelImagePublicWidgetOptions from "./label-image-util";
 
-import type {PerseusLabelImageWidgetOptions} from "../../data-schema";
+import type {
+    PerseusLabelImageWidgetOptions,
+    PerseusWidgetOptions,
+} from "../../data-schema";
 import type {WidgetLogic} from "../logic-export.types";
 
 export type LabelImageDefaultWidgetOptions = Pick<
@@ -30,8 +33,21 @@ const labelImageWidgetLogic: WidgetLogic = {
     name: "label-image",
     defaultWidgetOptions,
     getPublicWidgetOptions: getLabelImagePublicWidgetOptions,
-    // TODO(LEMS-3103): add partially inaccessible function
-    accessible: true,
+    // Function determining if a label image is accessible.
+    // Label Images is inaccessible if it does not have alt text for the image.
+    accessible: (widgetOptions: PerseusWidgetOptions): boolean => {
+        const labelImageOptions =
+            widgetOptions as PerseusLabelImageWidgetOptions;
+
+        if (
+            labelImageOptions.imageUrl !== "" &&
+            labelImageOptions.imageAlt === ""
+        ) {
+            return false;
+        }
+
+        return true;
+    },
 };
 
 export default labelImageWidgetLogic;

packages/perseus-core/src/widgets/interactive-graph/index.ts

@@ -1,8 +1,14 @@
+import {
+    getRealImageUrl,
+    getBaseUrl,
+    getSvgUrl,
+    getDataUrl,
+    getImageSizeModern,
+    isLabeledSVG,
+} from "@khanacademy/perseus-core";
 import {KhanAnswerTypes} from "@khanacademy/perseus-score";
 import _ from "underscore";
 
-import * as GraphieUtil from "./util.graphie";
-
 import type {Range} from "@khanacademy/perseus-core";
 import type * as React from "react";
 
@@ -537,7 +543,7 @@ function getImageSize(
         }
     };
 
-    img.src = GraphieUtil.getRealImageUrl(url);
+    img.src = getRealImageUrl(url);
 }
 
 /**
@@ -618,12 +624,12 @@ const Util = {
     supportsPassiveEvents,
     captureScratchpadTouchStart,
     getImageSize,
-    getImageSizeModern: GraphieUtil.getImageSizeModern,
-    getRealImageUrl: GraphieUtil.getRealImageUrl,
-    isLabeledSVG: GraphieUtil.isLabeledSVG,
-    getBaseUrl: GraphieUtil.getBaseUrl,
-    getSvgUrl: GraphieUtil.getSvgUrl,
-    getDataUrl: GraphieUtil.getDataUrl,
+    getImageSizeModern: getImageSizeModern,
+    getRealImageUrl: getRealImageUrl,
+    isLabeledSVG: isLabeledSVG,
+    getBaseUrl: getBaseUrl,
+    getSvgUrl: getSvgUrl,
+    getDataUrl: getDataUrl,
     textarea,
     unescapeMathMode,
 } as const;