Merge pull request #1058 from mathjax/fix/ff_safari_issues

Fixes issues with firefox and safari.
mathjax · Apr 4, 2024 · da33c5d · da33c5d
2 parents 3b3bdce + fb70006
commit da33c5d
Show file tree

Hide file tree

Showing 16 changed files with 378 additions and 169 deletions.
diff --git a/components/bin/build b/components/bin/build
@@ -39,7 +39,7 @@ const EXPORTPATTERN =
       /(^export(?:\s+default)?(?:\s+abstract)?\s+(?:[^ {*}]+\s+(?:enum\s+)?[a-zA-Z0-9_.$]+|\{.* as .*\}))/m;
 
 const EXPORT_IGNORE = ['type', 'interface'];
-const EXPORT_PROCESS = ['let', 'const', 'var', 'function', 'class', 'namespace', 'as'];
+const EXPORT_PROCESS = ['let', 'const', 'var', 'function', 'class', 'namespace', 'enum', 'as'];
 
 /**
  * The module type to use ('cjs' or 'mjs')
@@ -159,7 +159,7 @@ function processParts(parts) {
   for (let i = 1; i < parts.length; i += 2) {
     const words = parts[i].split(/\s+/);
     const n = words.length;
-    const type = (words[n - 2] === 'enum' ? words[n - 3] : words[n - 2]);
+    const type = (words[n - 2] === 'enum' && n > 3 ? words[n - 3] : words[n - 2]);
     const name = words[n - 1].replace(/\}$/, '');
 
     if (words[1] === 'default' || type === 'default') {

diff --git a/components/mjs/a11y/explorer/config.json b/components/mjs/a11y/explorer/config.json
@@ -6,7 +6,6 @@
   "webpack": {
     "name": "a11y/explorer",
     "libs": [
-      "components/src/ui/menu/lib",
       "components/src/a11y/semantic-enrich/lib",
       "components/src/a11y/sre/lib",
       "components/src/input/mml/lib",

diff --git a/components/mjs/a11y/explorer/explorer.js b/components/mjs/a11y/explorer/explorer.js
@@ -1,17 +1,7 @@
 import './lib/explorer.js';
 
-import {combineDefaults} from '#js/components/global.js';
 import {ExplorerHandler} from '#js/a11y/explorer.js';
 
 if (MathJax.startup && typeof window !== 'undefined') {
-  if (MathJax.config.options && MathJax.config.options.enableExplorer !== false) {
-    combineDefaults(MathJax.config, 'options', {
-      menuOptions: {
-        settings: {
-          explorer: true
-        }
-      }
-    });
-  }
   MathJax.startup.extendHandler(handler => ExplorerHandler(handler));
 }
diff --git a/components/mjs/a11y/semantic-enrich/config.json b/components/mjs/a11y/semantic-enrich/config.json
@@ -1,7 +1,11 @@
 {
   "build": {
     "component": "a11y/semantic-enrich",
-    "targets": ["a11y/semantic-enrich.ts"]
+    "targets": [
+      "a11y/semantic-enrich.ts",
+      "a11y/speech/SpeechUtil.ts",
+      "a11y/speech/GeneratorPool.ts"
+    ]
   },
   "webpack": {
     "name": "a11y/semantic-enrich",

diff --git a/components/mjs/dependencies.js b/components/mjs/dependencies.js
@@ -18,7 +18,7 @@
 export const dependencies = {
   'a11y/semantic-enrich': ['input/mml', 'a11y/sre'],
   'a11y/complexity': ['a11y/semantic-enrich'],
-  'a11y/explorer': ['a11y/semantic-enrich', 'ui/menu'],
+  'a11y/explorer': ['a11y/semantic-enrich'],
   '[mml]/mml3': ['input/mml'],
   '[tex]/action': ['input/tex-base', '[tex]/newcommand'],
   '[tex]/all-packages': ['input/tex-base'],

diff --git a/components/mjs/ui/menu/config.json b/components/mjs/ui/menu/config.json
@@ -1,7 +1,7 @@
 {
   "build": {
     "component": "ui/menu",
-    "targets": ["ui/menu"],
+    "targets": ["ui/menu", "a11y/speech/SpeechMenu.ts"],
     "excludeSubdirs": true
   },
   "webpack": {

diff --git a/ts/a11y/explorer.ts b/ts/a11y/explorer.ts
@@ -203,7 +203,7 @@ export function ExplorerMathDocumentMixin<B extends MathDocumentConstructor<HTML
         align: 'top',                      // placement of magnified expression
         backgroundColor: 'Blue',           // color for background of selected sub-expression
         backgroundOpacity: 20,             // opacity for background of selected sub-expression
-        braille: false,                    // switch on Braille output
+        braille: true,                     // switch on Braille output
         flame: false,                      // color collapsible sub-expressions
         foregroundColor: 'Black',          // color to use for text of selected sub-expression
         foregroundOpacity: 100,            // opacity for text of selected sub-expression
@@ -219,7 +219,7 @@ export function ExplorerMathDocumentMixin<B extends MathDocumentConstructor<HTML
         speech: true,                      // switch on speech output
         subtitles: true,                   // show speech as a subtitle
         treeColoring: false,               // tree color expression
-        viewBraille: false,                // display Braille output as subtitles
+        viewBraille: true,                 // display Braille output as subtitles
         voicing: false,                    // switch on speech output
       }
     };
@@ -257,7 +257,6 @@ export function ExplorerMathDocumentMixin<B extends MathDocumentConstructor<HTML
      * @return {ExplorerMathDocument}   The MathDocument (so calls can be chained)
      */
     public explorable(): ExplorerMathDocument {
-      this.options.enableSpeech = true;
       if (!this.processed.isSet('explorer')) {
         if (this.options.enableExplorer) {
           if (!this.explorerRegions) {
@@ -320,18 +319,13 @@ export function setA11yOptions(document: HTMLDOCUMENT, options: {[key: string]:
   for (let key in options) {
     if (document.options.a11y[key] !== undefined) {
       setA11yOption(document, key, options[key]);
-      if (key === 'locale') {
-        document.options.sre[key] = options[key];
-      }
-      continue;
-    }
-    if (sreOptions[key] !== undefined) {
+    } else if (sreOptions[key] !== undefined) {
       document.options.sre[key] = options[key];
     }
   }
   // Reinit explorers
   for (let item of document.math) {
-    (item as ExplorerMathItem).explorers.attach();
+    (item as ExplorerMathItem)?.explorers?.attach();
   }
 }
 
@@ -387,6 +381,10 @@ export function setA11yOption(document: HTMLDOCUMENT, option: string, value: str
       break;
     }
     break;
+  case 'locale':
+    document.options.sre.locale = value;
+    document.options.a11y.locale = value;
+    break;
   default:
     document.options.a11y[option] = value;
   }

diff --git a/ts/a11y/explorer/ExplorerPool.ts b/ts/a11y/explorer/ExplorerPool.ts
@@ -204,21 +204,34 @@ export class ExplorerPool {
     this.attach();
   }
 
+  /**
+   * A11y options keys associated with the speech explorer.
+   */
+  private speechExplorerKeys = ['speech', 'braille', 'keyMagnifier'];
+
   /**
    * Attaches the explorers that are currently meant to be active given
    * the document options. Detaches all others.
    */
   public attach() {
     this.attached = [];
     let keyExplorers = [];
-    for (let key of Object.keys(this.explorers)) {
-      let explorer = this.explorers[key];
+    const a11y = this.document.options.a11y;
+    for (let [key, explorer] of Object.entries(this.explorers)) {
       if (explorer instanceof SpeechExplorer) {
         explorer.AddEvents();
         explorer.stoppable = false;
         keyExplorers.unshift(explorer);
+        if (this.speechExplorerKeys.some(
+          exKey => this.document.options.a11y[exKey])) {
+          explorer.Attach();
+          this.attached.push(key);
+        } else {
+          explorer.Detach();
+        }
+        continue;
       }
-      if (this.document.options.a11y[key]) {
+      if (a11y[key] || (key === 'speech' && (a11y.braille || a11y.keyMagnifier))) {
         explorer.Attach();
         this.attached.push(key);
       } else {

diff --git a/ts/a11y/explorer/KeyExplorer.ts b/ts/a11y/explorer/KeyExplorer.ts
@@ -178,6 +178,7 @@ export class SpeechExplorer extends AbstractExplorer<string> implements KeyExplo
       const prev = this.node.querySelector(prevNav);
       if (prev) {
         prev.removeAttribute('tabindex');
+        this.FocusOut(null);
       }
       this.current = clicked;
       if (!this.triggerLinkMouse()) {
@@ -204,6 +205,9 @@ export class SpeechExplorer extends AbstractExplorer<string> implements KeyExplo
    * @override
    */
   public FocusOut(_event: FocusEvent) {
+    // This guard is to FF and Safari, where focus in fires only once on
+    // keyboard.
+    if (!this.active) return;
     this.generators.CleanUp(this.current);
     if (!this.move) {
       this.Stop();
@@ -474,24 +478,25 @@ export class SpeechExplorer extends AbstractExplorer<string> implements KeyExplo
       // the root node by default.
       this.current = this.node.childNodes[0] as HTMLElement;
     }
+    const options = this.document.options;
     let promise = Sre.sreReady();
-    if (this.generators.update(this.document.options)) {
+    if (this.generators.update(options)) {
       promise = promise.then(
         () => this.Speech()
       );
     };
     this.current.setAttribute('tabindex', '0');
     this.current.focus();
     super.Start();
-    if (this.document.options.a11y.subtitles) {
+    if (options.a11y.subtitles && options.a11y.speech && options.enableSpeech) {
       promise.then(
         () => this.region.Show(this.node, this.highlighter));
     }
-    if (this.document.options.a11y.viewBraille) {
+    if (options.a11y.viewBraille && options.a11y.braille && options.enableBraille) {
       promise.then(
         () => this.brailleRegion.Show(this.node, this.highlighter));
     }
-    if (this.document.options.a11y.keyMagnifier) {
+    if (options.a11y.keyMagnifier) {
       this.magnifyRegion.Show(this.node, this.highlighter);
     }
     this.Update();
@@ -566,8 +571,8 @@ export class SpeechExplorer extends AbstractExplorer<string> implements KeyExplo
       }
     }
     if (this.active) {
-      this.stopEvent(event);
       if (this.Move(event)) {
+        this.stopEvent(event);
         this.Update();
         return;
       }
@@ -642,7 +647,8 @@ export class SpeechExplorer extends AbstractExplorer<string> implements KeyExplo
   public semanticFocus() {
     const node = this.current || this.node;
     const id = node.getAttribute('data-semantic-id');
-    const stree = this.generators.speechGenerator.getRebuilt().stree;
+    const stree = this.generators.speechGenerator.getRebuilt()?.stree;
+    if (!stree) return null;
     const snode = stree.root.querySelectorAll((x: any) => x.id.toString() === id)[0];
     return snode || stree.root;
   }

diff --git a/ts/a11y/explorer/Region.ts b/ts/a11y/explorer/Region.ts
@@ -417,6 +417,12 @@ export class SpeechRegion extends LiveRegion {
       setTimeout(() => {
         if (this.voiceRequest) {
           resolve(true);
+        } else {
+          // This case is to make FF and Safari work.
+          setTimeout(() => {
+            this.voiceRequest = true;
+            resolve(true);
+          }, 100);
         }
       }, 100);
     });

diff --git a/ts/a11y/semantic-enrich.ts b/ts/a11y/semantic-enrich.ts
@@ -118,6 +118,11 @@ export interface EnrichedMathItem<N, T, D> extends MathItem<N, T, D> {
    * @param {MathDocument} document  The document where enrichment is occurring
    */
   attachSpeech(document: MathDocument<N, T, D>): void;
+
+  /**
+   * @param {MathDocument} document   The MathDocument for the MathItem
+   */
+  unEnrich(document: MathDocument<N, T, D>): void;
 }
 
 /**
@@ -201,6 +206,19 @@ export function EnrichedMathItemMixin<N, T, D, B extends Constructor<AbstractMat
       this.state(STATE.ENRICHED);
     }
 
+    /**
+     * @param {MathDocument} document   The MathDocument for the MathItem
+     */
+    public unEnrich(document: MathDocument<N, T, D>) {
+      const mml = this.inputData.originalMml;
+      if (!mml) return;
+      const math = new document.options.MathItem('', MmlJax);
+      math.math = mml;
+      math.display = this.display;
+      math.compile(document);
+      this.root = math.root;
+    }
+
     /**
      * Correct the selection values for the maction items from the original MathML
      */
@@ -248,25 +266,28 @@ export function EnrichedMathItemMixin<N, T, D, B extends Constructor<AbstractMat
       if (this.isEscaped || !document.options.enableEnrichment) return;
       let [speech, braille] = this.existingSpeech();
       let [newSpeech, newBraille] = ['', ''];
-      if ((!speech && document.options.enableSpeech) ||
-        (!braille && document.options.enableBraille)) {
+      const options = document.options;
+      if ((!speech && options.enableSpeech) ||
+          (!braille && options.enableBraille)) {
         try {
           [newSpeech, newBraille] = this.generatorPool.computeSpeech(
             this.typesetRoot, this.toMathML(this.root, this));
           if (newSpeech) {
             newSpeech = buildSpeech(newSpeech)[0];
           }
-        } catch (_e) { }
+        } catch (err) {
+          document.options.speechError(document, this, err);
+        }
       }
       speech = speech || newSpeech;
       braille = braille || newBraille;
       if (!speech && !braille) return;
       const adaptor = document.adaptor;
       const node = this.typesetRoot;
-      if (speech) {
+      if (speech && options.enableSpeech) {
         adaptor.setAttribute(node, 'aria-label', speech as string);
       }
-      if (braille) {
+      if (braille && options.enableBraille) {
         adaptor.setAttribute(node, 'aria-braillelabel', braille as string);
       }
       for (const child of adaptor.childNodes(node) as N[]) {
@@ -311,6 +332,13 @@ export interface EnrichedMathDocument<N, T, D> extends AbstractMathDocument<N, T
    * @param {Error} err                  The error being processed
    */
   enrichError(doc: EnrichedMathDocument<N, T, D>, math: EnrichedMathItem<N, T, D>, err: Error): void;
+
+  /**
+   * @param {EnrichedMathDocument} doc   The MathDocument for the error
+   * @paarm {EnrichedMathItem} math      The MathItem causing the error
+   * @param {Error} err                  The error being processed
+   */
+  speechError(doc: EnrichedMathDocument<N, T, D>, math: EnrichedMathItem<N, T, D>, err: Error): void;
 }
 
 /**
@@ -343,6 +371,9 @@ export function EnrichedMathDocumentMixin<N, T, D, B extends MathDocumentConstru
       enrichError: (doc: EnrichedMathDocument<N, T, D>,
                     math: EnrichedMathItem<N, T, D>,
                     err: Error) => doc.enrichError(doc, math, err),
+      speechError: (doc: EnrichedMathDocument<N, T, D>,
+                    math: EnrichedMathItem<N, T, D>,
+                    err: Error) => doc.speechError(doc, math, err),
       renderActions: expandable({
         ...BaseDocument.OPTIONS.renderActions,
         enrich:       [STATE.ENRICHED],
@@ -416,13 +447,24 @@ export function EnrichedMathDocumentMixin<N, T, D, B extends MathDocumentConstru
       console.warn('Enrichment error:', err);
     }
 
+    /**
+     */
+    public speechError(_doc: EnrichedMathDocument<N, T, D>, _math: EnrichedMathItem<N, T, D>, err: Error) {
+      console.warn('Speech generation error:', err);
+    }
+
     /**
      * @override
      */
     public state(state: number, restore: boolean = false) {
       super.state(state, restore);
       if (state < STATE.ENRICHED) {
         this.processed.clear('enriched');
+        if (state >= STATE.COMPILED) {
+          for (const item of this.math) {
+            (item as EnrichedMathItem<N, T, D>).unEnrich(this);
+          }
+        }
       }
       if (state < STATE.ATTACHSPEECH) {
         this.processed.clear('attach-speech');

diff --git a/ts/a11y/speech/GeneratorPool.ts b/ts/a11y/speech/GeneratorPool.ts
@@ -370,13 +370,17 @@ export class GeneratorPool<N, T, D> {
         this.dummyList.forEach(attr => this.copyAttributes(xml, node, attr));
       }
     }
-    const speech = this.getLabel(node);
-    if (speech) {
-      this.adaptor.setAttribute(node, 'aria-label', buildSpeech(speech, locale)[0]);
+    if (this.options.a11y.speech) {
+      const speech = this.getLabel(node);
+      if (speech) {
+        this.adaptor.setAttribute(node, 'aria-label', buildSpeech(speech, locale)[0]);
+      }
     }
-    const braille = this.adaptor.getAttribute(node, 'data-semantic-braille');
-    if (braille) {
-      this.adaptor.setAttribute(node, 'aria-braillelabel', braille);
+    if (this.options.a11y.braille) {
+      const braille = this.adaptor.getAttribute(node, 'data-semantic-braille');
+      if (braille) {
+        this.adaptor.setAttribute(node, 'aria-braillelabel', braille);
+      }
     }
     const xmlChildren = Array.from(xml.childNodes);
     Array.from(this.adaptor.childNodes(node)).forEach(