@khanacademy/perseus 0.0.1 → 0.2.1

package/src/__tests__/__snapshots__/server-item-renderer_test.jsx.snap

@@ -0,0 +1,306 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`server item renderer should snapshot: initial render 1`] = `
+<div>
+  <div>
+    <div>
+      <span
+        class="mock-KatexProvider"
+      >
+        <div
+          class="perseus-renderer perseus-renderer-responsive"
+        >
+          <div
+            class="paragraph"
+            data-perseus-paragraph-index="0"
+          >
+            <div
+              class="paragraph"
+            >
+              Enter the number 
+              <span
+                style="white-space: nowrap;"
+              >
+                <span />
+                <span
+                  class="mock-TeX"
+                />
+                <span />
+              </span>
+              -42
+              <span
+                style="white-space: nowrap;"
+              >
+                <span />
+                <span
+                  class="mock-TeX"
+                />
+                <span />
+              </span>
+               in the box: 
+              <div
+                class="perseus-widget-container widget-nohighlight widget-inline-block"
+              >
+                <span>
+                  <div>
+                    <input
+                      aria-describedby="input-with-examples-aW5wdXQtbnVtYmVyIDE"
+                      autocapitalize="off"
+                      autocomplete="off"
+                      autocorrect="off"
+                      class="perseus-input perseus-interactive perseus-input-size-normal"
+                      spellcheck="false"
+                      type="text"
+                      value=""
+                    />
+                  </div>
+                  <div
+                    style="position: relative; height: 0px; display: none;"
+                  >
+                    <div
+                      class="tooltipContainer"
+                      style="position: absolute; left: 0px;"
+                    >
+                      <div
+                        style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
+                      >
+                        <div
+                          style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
+                        />
+                        <div
+                          style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
+                        />
+                      </div>
+                      <div
+                        class="perseus-formats-tooltip preview-measure"
+                        style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                      >
+                        <div
+                          id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
+                        >
+                          <span
+                            class="mock-KatexProvider"
+                          >
+                            <div
+                              class="perseus-renderer perseus-renderer-responsive"
+                            >
+                              <div
+                                class="paragraph"
+                                data-perseus-paragraph-index="0"
+                              >
+                                <ul>
+                                  <li>
+                                    <strong>
+                                      Your answer should be
+                                    </strong>
+                                  </li>
+                                  <li>
+                                    an integer, like 
+                                    <span
+                                      style="white-space: nowrap;"
+                                    >
+                                      <span />
+                                      <span
+                                        class="mock-TeX"
+                                      >
+                                        6
+                                      </span>
+                                      <span />
+                                    </span>
+                                  </li>
+                                  <li>
+                                    an 
+                                    <em>
+                                      exact
+                                    </em>
+                                     decimal, like 
+                                    <span
+                                      style="white-space: nowrap;"
+                                    >
+                                      <span />
+                                      <span
+                                        class="mock-TeX"
+                                      >
+                                        0.75
+                                      </span>
+                                      <span />
+                                    </span>
+                                  </li>
+                                  <li>
+                                    a 
+                                    <em>
+                                      simplified proper
+                                    </em>
+                                     fraction, like 
+                                    <span
+                                      style="white-space: nowrap;"
+                                    >
+                                      <span />
+                                      <span
+                                        class="mock-TeX"
+                                      >
+                                        3/5
+                                      </span>
+                                      <span />
+                                    </span>
+                                  </li>
+                                  <li>
+                                    a 
+                                    <em>
+                                      simplified improper
+                                    </em>
+                                     fraction, like 
+                                    <span
+                                      style="white-space: nowrap;"
+                                    >
+                                      <span />
+                                      <span
+                                        class="mock-TeX"
+                                      >
+                                        7/4
+                                      </span>
+                                      <span />
+                                    </span>
+                                  </li>
+                                  <li>
+                                    a mixed number, like 
+                                    <span
+                                      style="white-space: nowrap;"
+                                    >
+                                      <span />
+                                      <span
+                                        class="mock-TeX"
+                                      >
+                                        1\\ 3/4
+                                      </span>
+                                      <span />
+                                    </span>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </span>
+    </div>
+    <div
+      class="hintsContainer_1g61p95"
+    >
+      <div
+        class=""
+      >
+        <div
+          class="perseus-hint-renderer"
+          tabindex="-1"
+        >
+          <span
+            class="perseus-sr-only"
+          >
+            Hint #1
+          </span>
+          <span
+            class="perseus-hint-label"
+            style="display: block;"
+          >
+            1 / 3
+          </span>
+          <span
+            class="mock-KatexProvider"
+          >
+            <div
+              class="perseus-renderer perseus-renderer-responsive"
+            >
+              <div
+                class="paragraph"
+                data-perseus-paragraph-index="0"
+              >
+                <div
+                  class="paragraph"
+                >
+                  Hint #1
+                </div>
+              </div>
+            </div>
+          </span>
+        </div>
+        <div
+          class="perseus-hint-renderer"
+          tabindex="-1"
+        >
+          <span
+            class="perseus-sr-only"
+          >
+            Hint #2
+          </span>
+          <span
+            class="perseus-hint-label"
+            style="display: block;"
+          >
+            2 / 3
+          </span>
+          <span
+            class="mock-KatexProvider"
+          >
+            <div
+              class="perseus-renderer perseus-renderer-responsive"
+            >
+              <div
+                class="paragraph"
+                data-perseus-paragraph-index="0"
+              >
+                <div
+                  class="paragraph"
+                >
+                  Hint #2
+                </div>
+              </div>
+            </div>
+          </span>
+        </div>
+        <div
+          class="perseus-hint-renderer last-hint last-rendered"
+          tabindex="-1"
+        >
+          <span
+            class="perseus-sr-only"
+          >
+            Hint #3
+          </span>
+          <span
+            class="perseus-hint-label"
+            style="display: block;"
+          >
+            3 / 3
+          </span>
+          <span
+            class="mock-KatexProvider"
+          >
+            <div
+              class="perseus-renderer perseus-renderer-responsive"
+            >
+              <div
+                class="paragraph"
+                data-perseus-paragraph-index="0"
+              >
+                <div
+                  class="paragraph"
+                >
+                  Hint #3
+                </div>
+              </div>
+            </div>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/__tests__/a11y_test.jsx

@@ -0,0 +1,304 @@
+// @flow
+import {violatingWidgets} from "../a11y.js";
+import {registerAllWidgetsForTesting} from "../util/register-all-widgets-for-testing.js";
+
+const noWidgets = {
+    question: {
+        content: "Hello, world!",
+        images: {},
+        widgets: {},
+    },
+    answerArea: {
+        calculator: false,
+    },
+    itemDataVersion: {
+        major: 0,
+        minor: 1,
+    },
+    hints: [],
+};
+
+const oneAccessibleWidget = {
+    question: {
+        content: "Hello, world!\n\n[[☃ radio 1]]",
+        images: {},
+        widgets: {
+            "radio 1": {
+                type: "radio",
+                graded: true,
+                options: {
+                    choices: [
+                        {
+                            content: "hello",
+                            correct: true,
+                        },
+                        {
+                            content: "goodbye",
+                            correct: false,
+                        },
+                    ],
+                    randomize: false,
+                    multipleSelect: false,
+                    displayCount: null,
+                    hasNoneOfTheAbove: false,
+                    onePerLine: true,
+                    deselectEnabled: false,
+                },
+                version: {
+                    major: 1,
+                    minor: 0,
+                },
+            },
+        },
+    },
+    answerArea: {
+        calculator: false,
+    },
+    itemDataVersion: {
+        major: 0,
+        minor: 1,
+    },
+    hints: [],
+};
+
+const oneInaccessibleWidget = {
+    question: {
+        content: "Hello, world!\n\n[[☃ radio 1]]\n\n[[☃ matrix 1]]\n\n",
+        images: {},
+        widgets: {
+            "radio 1": {
+                type: "radio",
+                graded: true,
+                options: {
+                    choices: [
+                        {
+                            content: "hello",
+                            correct: true,
+                        },
+                        {
+                            content: "goodbye",
+                            correct: false,
+                        },
+                    ],
+                    randomize: false,
+                    multipleSelect: false,
+                    displayCount: null,
+                    hasNoneOfTheAbove: false,
+                    onePerLine: true,
+                    deselectEnabled: false,
+                },
+                version: {
+                    major: 1,
+                    minor: 0,
+                },
+            },
+            "matrix 1": {
+                type: "matrix",
+                graded: true,
+                options: {
+                    matrixBoardSize: [3, 3],
+                    answers: [[]],
+                    prefix: "",
+                    suffix: "",
+                    cursorPosition: [0, 0],
+                },
+                version: {
+                    major: 0,
+                    minor: 0,
+                },
+            },
+        },
+    },
+    answerArea: {
+        calculator: false,
+    },
+    itemDataVersion: {
+        major: 0,
+        minor: 1,
+    },
+    hints: [],
+};
+
+const imageWithAltText = {
+    question: {
+        content: "hello\n\n[[☃ image 1]]\n\n",
+        images: {},
+        widgets: {
+            "image 1": {
+                type: "image",
+                graded: true,
+                options: {
+                    title: "",
+                    range: [
+                        [0, 10],
+                        [0, 10],
+                    ],
+                    box: [350, 150],
+                    backgroundImage: {
+                        url: "http://placehold.it/350x150",
+                        width: 350,
+                        height: 150,
+                    },
+                    labels: [],
+                    alt: "oh cool",
+                    caption: "",
+                },
+                version: {
+                    major: 0,
+                    minor: 0,
+                },
+            },
+        },
+    },
+    answerArea: {
+        calculator: false,
+    },
+    itemDataVersion: {
+        major: 0,
+        minor: 1,
+    },
+    hints: [],
+};
+
+const imageWithoutAltText = {
+    question: {
+        content: "hello\n\n[[☃ image 1]]\n\n",
+        images: {},
+        widgets: {
+            "image 1": {
+                type: "image",
+                graded: true,
+                options: {
+                    title: "",
+                    range: [
+                        [0, 10],
+                        [0, 10],
+                    ],
+                    box: [350, 150],
+                    backgroundImage: {
+                        url: "http://placehold.it/350x150",
+                        width: 350,
+                        height: 150,
+                    },
+                    labels: [],
+                    alt: "",
+                    caption: "",
+                },
+                version: {
+                    major: 0,
+                    minor: 0,
+                },
+            },
+        },
+    },
+    answerArea: {
+        calculator: false,
+    },
+    itemDataVersion: {
+        major: 0,
+        minor: 1,
+    },
+    hints: [],
+};
+
+const emptyImageWithoutAltText = {
+    question: {
+        content: "hello\n\n[[☃ image 1]]\n\n",
+        images: {},
+        widgets: {
+            "image 1": {
+                type: "image",
+                graded: true,
+                options: {
+                    title: "",
+                    range: [
+                        [0, 10],
+                        [0, 10],
+                    ],
+                    box: [350, 150],
+                    labels: [],
+                    alt: "",
+                    caption: "",
+                },
+                version: {
+                    major: 0,
+                    minor: 0,
+                },
+            },
+        },
+    },
+    answerArea: {
+        calculator: false,
+    },
+    itemDataVersion: {
+        major: 0,
+        minor: 1,
+    },
+    hints: [],
+};
+
+describe("a11y", () => {
+    beforeAll(() => {
+        registerAllWidgetsForTesting();
+    });
+
+    describe("violatingWidgets", () => {
+        describe("Current Perseus Version", () => {
+            it("should pass for no widgets", () => {
+                const result = violatingWidgets(noWidgets);
+                expect(result).toHaveLength(0);
+            });
+
+            it("should pass for accessible widgets", () => {
+                const result = violatingWidgets(oneAccessibleWidget);
+                expect(result).toHaveLength(0);
+            });
+
+            it("should pick out out inaccessible widgets", () => {
+                // NOTE: when the matrix widget is accessible this will fail
+                const result = violatingWidgets(oneInaccessibleWidget);
+                expect(result).toHaveLength(1);
+                expect(result[0]).toBe("matrix");
+            });
+
+            it("should pass for images with alt text", () => {
+                const result = violatingWidgets(imageWithAltText);
+                expect(result).toHaveLength(0);
+            });
+
+            it("should pick out images without alt text", () => {
+                const result = violatingWidgets(imageWithoutAltText);
+                expect(result).toHaveLength(1);
+                expect(result[0]).toBe("image");
+            });
+
+            it("should ignore blank images", () => {
+                const result = violatingWidgets(emptyImageWithoutAltText);
+                expect(result).toHaveLength(0);
+            });
+
+            it("should handle all these same cases in multi-items", () => {
+                const decorateItem = (item) => ({
+                    __type: "content",
+                    ...item.question,
+                });
+                const result = violatingWidgets({
+                    _multi: {
+                        sharedContext: decorateItem(oneInaccessibleWidget),
+                        questions: [
+                            decorateItem(noWidgets),
+                            decorateItem(oneAccessibleWidget),
+                            decorateItem(imageWithAltText),
+                            decorateItem(imageWithoutAltText),
+                            decorateItem(emptyImageWithoutAltText),
+                        ],
+                    },
+                });
+                result.sort(); // don't depend on iteration order
+                expect(result).toHaveLength(2);
+                expect(result[0]).toBe("image");
+                expect(result[1]).toBe("matrix");
+            });
+        });
+    });
+});