Merge pull request #1040 from mathjax/refactor/speechgenerator-pool

Introduces a speechgenerator pool
mathjax · Feb 8, 2024 · 42fd15d · 42fd15d
2 parents f5ddfc7 + 17c4e8d
commit 42fd15d
Show file tree

Hide file tree

Showing 12 changed files with 660 additions and 283 deletions.
diff --git a/ts/a11y/complexity/collapse.ts b/ts/a11y/complexity/collapse.ts
@@ -505,7 +505,9 @@ export class Collapse {
 
     const attributes = node.attributes.getAllAttributes();
     for (const name of Object.keys(attributes)) {
-      if (name.substring(0, 14) === 'data-semantic-') {
+      if (name.substring(0, 14) === 'data-semantic-' ||
+        name.substring(0, 5) === 'aria-' ||
+        name === 'role') {
         mrow.attributes.set(name, attributes[name]);
         delete attributes[name];
       }

diff --git a/ts/a11y/explorer.ts b/ts/a11y/explorer.ts
@@ -96,14 +96,9 @@ export function ExplorerMathItemMixin<B extends Constructor<HTMLMATHITEM>>(
     public explorers: ExplorerPool;
 
     /**
-     * True when a rerendered element should regain the focus
+     * Semantic id of the rerendered element that should regain the focus.
      */
-    protected refocus: boolean = false;
-
-    /**
-     * Save explorer id during rerendering.
-     */
-    protected savedId: string = null;
+    protected refocus: number = null;
 
     /**
      * Add the explorer to the output for this math item
@@ -116,10 +111,6 @@ export function ExplorerMathItemMixin<B extends Constructor<HTMLMATHITEM>>(
       if (!this.isEscaped && (document.options.enableExplorer || force)) {
         const node = this.typesetRoot;
         const mml = toMathML(this.root);
-        if (this.savedId) {
-          this.typesetRoot.setAttribute('sre-explorer-id', this.savedId);
-          this.savedId = null;
-        }
         if (!this.explorers) {
           this.explorers = new ExplorerPool();
         }
@@ -132,9 +123,12 @@ export function ExplorerMathItemMixin<B extends Constructor<HTMLMATHITEM>>(
      * @override
      */
     public rerender(document: ExplorerMathDocument, start: number = STATE.RERENDER) {
-      this.savedId = this.typesetRoot.getAttribute('sre-explorer-id');
-      this.refocus = (hasWindow ? window.document.activeElement === this.typesetRoot : false);
       if (this.explorers) {
+        let speech = this.explorers.speech;
+        if (speech && speech.attached && speech.active) {
+          const focus = speech.semanticFocus();
+          this.refocus = focus ? focus.id : null;
+        }
         this.explorers.reattach();
       }
       super.rerender(document, start);
@@ -145,11 +139,13 @@ export function ExplorerMathItemMixin<B extends Constructor<HTMLMATHITEM>>(
      */
     public updateDocument(document: ExplorerMathDocument) {
       super.updateDocument(document);
-      this.refocus && this.typesetRoot.focus();
+      if (this.explorers?.speech) {
+        this.explorers.speech.restarted = this.refocus;
+      }
+      this.refocus = null;
       if (this.explorers) {
         this.explorers.restart();
       }
-      this.refocus = false;
     }
 
   };

diff --git a/ts/a11y/explorer/ExplorerPool.ts b/ts/a11y/explorer/ExplorerPool.ts
@@ -26,7 +26,7 @@ import {LiveRegion, SpeechRegion, ToolTip, HoverRegion} from './Region.js';
 import type { ExplorerMathDocument, ExplorerMathItem } from '../explorer.js';
 
 import {Explorer} from './Explorer.js';
-import * as ke from './KeyExplorer.js';
+import {SpeechExplorer} from './KeyExplorer.js';
 import * as me from './MouseExplorer.js';
 import {TreeColorer, FlameColorer} from './TreeExplorer.js';
 
@@ -87,9 +87,9 @@ type ExplorerInit = (doc: ExplorerMathDocument, pool: ExplorerPool,
  */
 let allExplorers: {[options: string]: ExplorerInit} = {
   speech: (doc: ExplorerMathDocument, pool: ExplorerPool, node: HTMLElement, ...rest: any[]) => {
-    let explorer = ke.SpeechExplorer.create(
+    let explorer = SpeechExplorer.create(
       doc, pool, doc.explorerRegions.speechRegion, node,
-      doc.explorerRegions.brailleRegion, doc.explorerRegions.magnifier, rest[0], rest[1]) as ke.SpeechExplorer;
+      doc.explorerRegions.brailleRegion, doc.explorerRegions.magnifier, rest[0], rest[1]) as SpeechExplorer;
     explorer.sound = true;
     return explorer;
   },
@@ -213,7 +213,7 @@ export class ExplorerPool {
     let keyExplorers = [];
     for (let key of Object.keys(this.explorers)) {
       let explorer = this.explorers[key];
-      if (explorer instanceof ke.SpeechExplorer) {
+      if (explorer instanceof SpeechExplorer) {
         explorer.AddEvents();
         explorer.stoppable = false;
         keyExplorers.unshift(explorer);
@@ -253,7 +253,9 @@ export class ExplorerPool {
    * Restarts explorers after a MathItem is rerendered.
    */
   public restart() {
-    this._restart.forEach(x => this.explorers[x].Start());
+    this._restart.forEach(x => {
+      this.explorers[x].Start(); 
+    });
     this._restart = [];
   }
 
@@ -275,7 +277,7 @@ export class ExplorerPool {
       {color: 'red'}, {color: 'black'},
       {renderer: this.document.outputJax.name, browser: 'v3'}
     );
-    ((this.explorers['speech'] as ke.SpeechExplorer).region as SpeechRegion).highlighter =
+    (this.speech.region as SpeechRegion).highlighter =
       this.secondaryHighlighter;
   }
 
@@ -295,6 +297,16 @@ export class ExplorerPool {
     this.highlighter.unhighlight();
   }
 
+  /**
+   * Convenience method to return the speech explorer of the pool with the
+   * correct type.
+   *
+   * @return {SpeechExplorer}
+   */
+  public get speech(): SpeechExplorer {
+    return this.explorers['speech'] as SpeechExplorer;
+  }
+
   /**
    * Retrieves color assignment for the document options.
    *