Fix keyboard explorer to work for all necessary modalities.

zorkow · zorkow · commit aeb50675c509 · 2024-03-06T17:57:56.000+01:00
diff --git a/ts/a11y/explorer.ts b/ts/a11y/explorer.ts
@@ -257,7 +257,12 @@ 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.options.a11y.speech) {
+        this.options.enableSpeech = true;
+      }
+      if (this.options.a11y.braille) {
+        this.options.enableBraille = true;
+      }
       if (!this.processed.isSet('explorer')) {
         if (this.options.enableExplorer) {
           if (!this.explorerRegions) {
diff --git a/ts/a11y/explorer/ExplorerPool.ts b/ts/a11y/explorer/ExplorerPool.ts
@@ -204,19 +204,31 @@ 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];
+    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]) {
         explorer.Attach();
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()) {
@@ -486,11 +487,13 @@ export class SpeechExplorer extends AbstractExplorer<string> implements KeyExplo
     this.current.setAttribute('tabindex', '0');
     this.current.focus();
     super.Start();
-    if (this.document.options.a11y.subtitles) {
+    if (this.document.options.a11y.speech &&
+      this.document.options.a11y.subtitles) {
       promise.then(
         () => this.region.Show(this.node, this.highlighter));
     }
-    if (this.document.options.a11y.viewBraille) {
+    if (this.document.options.a11y.braille &&
+      this.document.options.a11y.viewBraille) {
       promise.then(
         () => this.brailleRegion.Show(this.node, this.highlighter));
     }
@@ -645,7 +648,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/semantic-enrich.ts b/ts/a11y/semantic-enrich.ts
@@ -263,10 +263,10 @@ export function EnrichedMathItemMixin<N, T, D, B extends Constructor<AbstractMat
       if (!speech && !braille) return;
       const adaptor = document.adaptor;
       const node = this.typesetRoot;
-      if (speech) {
+      if (speech && document.options.enableSpeech) {
         adaptor.setAttribute(node, 'aria-label', speech as string);
       }
-      if (braille) {
+      if (braille && document.options.enableBraille) {
         adaptor.setAttribute(node, 'aria-braillelabel', braille as string);
       }
       for (const child of adaptor.childNodes(node) as N[]) {
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(

Original file line number	Diff line number	Diff line change
`@@ -263,10 +263,10 @@ export function EnrichedMathItemMixin<N, T, D, B extends Constructor<AbstractMat`
`263`	`263`	`if (!speech && !braille) return;`
`264`	`264`	`const adaptor = document.adaptor;`
`265`	`265`	`const node = this.typesetRoot;`
`266`		`- if (speech) {`
	`266`	`+ if (speech && document.options.enableSpeech) {`
`267`	`267`	`adaptor.setAttribute(node, 'aria-label', speech as string);`
`268`	`268`	`}`
`269`		`- if (braille) {`
	`269`	`+ if (braille && document.options.enableBraille) {`
`270`	`270`	`adaptor.setAttribute(node, 'aria-braillelabel', braille as string);`
`271`	`271`	`}`
`272`	`272`	`for (const child of adaptor.childNodes(node) as N[]) {`
Original file line number	Diff line number	Diff line change
`@@ -370,13 +370,17 @@ export class GeneratorPool<N, T, D> {`
`370`	`370`	`this.dummyList.forEach(attr => this.copyAttributes(xml, node, attr));`
`371`	`371`	`}`
`372`	`372`	`}`
`373`		`- const speech = this.getLabel(node);`
`374`		`- if (speech) {`
`375`		`- this.adaptor.setAttribute(node, 'aria-label', buildSpeech(speech, locale)[0]);`
	`373`	`+ if (this.options.a11y.speech) {`
	`374`	`+ const speech = this.getLabel(node);`
	`375`	`+ if (speech) {`
	`376`	`+ this.adaptor.setAttribute(node, 'aria-label', buildSpeech(speech, locale)[0]);`
	`377`	`+ }`
`376`	`378`	`}`
`377`		`- const braille = this.adaptor.getAttribute(node, 'data-semantic-braille');`
`378`		`- if (braille) {`
`379`		`- this.adaptor.setAttribute(node, 'aria-braillelabel', braille);`
	`379`	`+ if (this.options.a11y.braille) {`
	`380`	`+ const braille = this.adaptor.getAttribute(node, 'data-semantic-braille');`
	`381`	`+ if (braille) {`
	`382`	`+ this.adaptor.setAttribute(node, 'aria-braillelabel', braille);`
	`383`	`+ }`
`380`	`384`	`}`
`381`	`385`	`const xmlChildren = Array.from(xml.childNodes);`
`382`	`386`	`Array.from(this.adaptor.childNodes(node)).forEach(`