PIE-423

Author: chillenious

packages/elements-react/multiple-choice/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/multiple-choice",
-  "version": "13.1.1-next.1",
+  "version": "13.1.0",
   "description": "React implementation of multiple-choice element synced from pie-elements",
   "dependencies": {
     "@emotion/react": "^11.14.0",

packages/shared/math-rendering-mathjax/src/adapter.ts

@@ -16,30 +16,43 @@ interface MathJaxTexConfig {
 }
 
 interface MathJaxConfig {
+  loader?: {
+    load?: string[];
+  };
   tex?: MathJaxTexConfig;
   options?: {
     enableMenu?: boolean;
     enableExplorer?: boolean;
+    enableAssistiveMml?: boolean;
   };
   startup?: {
     ready?: () => void;
     defaultReady?: () => void;
+    document?: MathJaxDocument;
   };
   chtml?: {
     fontURL?: string;
   };
 }
 
+interface MathJaxDocument {
+  assistiveMml?: () => {
+    updateDocument?: () => unknown;
+  };
+}
+
 interface MathJaxInstance {
   version?: string;
   tex?: MathJaxTexConfig;
   options?: {
     enableMenu?: boolean;
     enableExplorer?: boolean;
+    enableAssistiveMml?: boolean;
   };
   startup: {
     ready?: () => void;
     defaultReady: () => void;
+    document?: MathJaxDocument;
   };
   typesetPromise?: (elements?: Element[]) => Promise<void>;
 }
@@ -71,6 +84,9 @@ function ensureMathjaxLoaded(options: MathjaxOptions): Promise<void> {
     const { useSingleDollar = false, accessibility = true, loadFonts = true, srcUrl } = options;
 
     const config: MathJaxConfig = {
+      loader: {
+        load: accessibility ? ['a11y/assistive-mml'] : [],
+      },
       tex: {
         packages: ['base', 'ams', 'autoload'],
         macros: {
@@ -83,6 +99,7 @@ function ensureMathjaxLoaded(options: MathjaxOptions): Promise<void> {
       options: {
         enableMenu: accessibility,
         enableExplorer: accessibility,
+        enableAssistiveMml: accessibility,
       },
       startup: {
         ready: () => {
@@ -124,6 +141,20 @@ function ensureMathjaxLoaded(options: MathjaxOptions): Promise<void> {
   return mathjaxLoading;
 }
 
+function attachAssistiveMml(): void {
+  const mathDocument = window.MathJax?.startup?.document;
+
+  if (typeof mathDocument?.assistiveMml !== 'function') {
+    return;
+  }
+
+  try {
+    mathDocument.assistiveMml().updateDocument?.();
+  } catch (error) {
+    console.warn('[mathjax-renderer] Failed to attach assistive MathML:', error);
+  }
+}
+
 /**
  * Create a MathJax-based math renderer
  *
@@ -155,6 +186,7 @@ export function createMathjaxRenderer(
     }
 
     await window.MathJax.typesetPromise([element]);
+    attachAssistiveMml();
   };
 }
 

packages/shared/math-rendering-mathjax/tests/adapter.test.ts

@@ -0,0 +1,47 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createMathjaxRenderer } from '../src/adapter.js';
+
+describe('createMathjaxRenderer', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    document.body.innerHTML = '';
+    delete window.MathJax;
+  });
+
+  it('attaches assistive MathML for screen readers after typesetting', async () => {
+    const target = document.createElement('div');
+    target.innerHTML = '\\(x^2 + 1\\)';
+    document.body.append(target);
+
+    const updatedDocument = {
+      assistiveMml: vi.fn(() => {
+        const container = target.querySelector('mjx-container');
+        const assistiveMath = document.createElement('mjx-assistive-mml');
+        assistiveMath.innerHTML =
+          '<math><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mn>1</mn></math>';
+        container?.append(assistiveMath);
+        return updatedDocument;
+      }),
+      updateDocument: vi.fn(() => updatedDocument),
+    };
+    const mathDocument = {
+      assistiveMml: vi.fn(() => updatedDocument.assistiveMml()),
+    };
+
+    window.MathJax = {
+      version: '4.0.0',
+      startup: {
+        defaultReady: vi.fn(),
+        document: mathDocument,
+      },
+      typesetPromise: vi.fn(async () => {
+        target.innerHTML = '<mjx-container>x squared plus 1</mjx-container>';
+      }),
+    };
+
+    await createMathjaxRenderer()(target);
+
+    expect(mathDocument.assistiveMml).toHaveBeenCalled();
+    expect(target.querySelector('mjx-assistive-mml math')).not.toBeNull();
+  });
+});