Merge pull request #683 from mathjax/a11y_virtual_attached_keyexplorers

A11y virtual attached keyexplorers

Author: dpvc

ts/a11y/explorer.ts

@@ -100,12 +100,12 @@ export function ExplorerMathItemMixin<B extends Constructor<HTMLMATHITEM>>(
     /**
      * The currently attached explorers
      */
-    protected attached: Explorer[] = [];
+    protected attached: string[] = [];
 
     /**
-     * True when a rerendered element should restart the explorer
+     * True when a rerendered element should restart these explorers
      */
-    protected restart: boolean = false;
+    protected restart: string[] = [];
 
     /**
      * True when a rerendered element should regain the focus
@@ -146,16 +146,29 @@ export function ExplorerMathItemMixin<B extends Constructor<HTMLMATHITEM>>(
      */
     public attachExplorers(document: ExplorerMathDocument) {
       this.attached = [];
+      let keyExplorers = [];
       for (let key of Object.keys(this.explorers)) {
         let explorer = this.explorers[key];
+        if (explorer instanceof ke.AbstractKeyExplorer) {
+          explorer.AddEvents();
+          explorer.stoppable = false;
+          keyExplorers.unshift(explorer);
+        }
         if (document.options.a11y[key]) {
           explorer.Attach();
-          this.attached.push(explorer);
+          this.attached.push(key);
         } else {
           explorer.Detach();
         }
       }
-      this.addExplorers(this.attached);
+      // Ensure that the last currently attached key explorer stops propagating
+      // key events.
+      for (let explorer of keyExplorers) {
+        if (explorer.attached) {
+          explorer.stoppable = true;
+          break;
+        }
+      }
     }
 
     /**
@@ -164,9 +177,10 @@ export function ExplorerMathItemMixin<B extends Constructor<HTMLMATHITEM>>(
     public rerender(document: ExplorerMathDocument, start: number = STATE.RERENDER) {
       this.savedId = this.typesetRoot.getAttribute('sre-explorer-id');
       this.refocus = (window.document.activeElement === this.typesetRoot);
-      for (let explorer of this.attached) {
+      for (let key of this.attached) {
+        let explorer = this.explorers[key];
         if (explorer.active) {
-          this.restart = true;
+          this.restart.push(key);
           explorer.Stop();
         }
       }
@@ -179,25 +193,9 @@ export function ExplorerMathItemMixin<B extends Constructor<HTMLMATHITEM>>(
     public updateDocument(document: ExplorerMathDocument) {
       super.updateDocument(document);
       this.refocus && this.typesetRoot.focus();
-      this.restart && this.attached.forEach(x => x.Start());
-      this.refocus = this.restart = false;
-    }
-
-    /**
-     * Adds a list of explorers and makes sure the right one stops propagating.
-     * @param {Explorer[]} explorers The active explorers to be added.
-     */
-    private addExplorers(explorers: Explorer[]) {
-      if (explorers.length <= 1) return;
-      let lastKeyExplorer = null;
-      for (let explorer of this.attached) {
-        if (!(explorer instanceof ke.AbstractKeyExplorer)) continue;
-        explorer.stoppable = false;
-        lastKeyExplorer = explorer;
-      }
-      if (lastKeyExplorer) {
-        lastKeyExplorer.stoppable = true;
-      }
+      this.restart.forEach(x => this.explorers[x].Start());
+      this.restart = [];
+      this.refocus = false;
     }
 
   };

ts/a11y/explorer/KeyExplorer.ts

@@ -64,12 +64,19 @@ export interface KeyExplorer extends Explorer {
  */
 export abstract class AbstractKeyExplorer<T> extends AbstractExplorer<T> implements KeyExplorer {
 
+  /**
+   * Flag indicating if the explorer is attached to an object.
+   */
+  public attached: boolean = false;
+
   /**
    * The attached SRE walker.
    * @type {sre.Walker}
    */
   protected walker: sre.Walker;
 
+  private eventsAttached: boolean = false;
+
   /**
    * @override
    */
@@ -117,11 +124,22 @@ export abstract class AbstractKeyExplorer<T> extends AbstractExplorer<T> impleme
    */
   public Attach() {
     super.Attach();
+    this.attached = true;
     this.oldIndex = this.node.tabIndex;
     this.node.tabIndex = 1;
     this.node.setAttribute('role', 'application');
   }
 
+  /**
+   * @override
+   */
+  public AddEvents() {
+    if (!this.eventsAttached) {
+      super.AddEvents();
+      this.eventsAttached = true;
+    }
+  }
+
   /**
    * @override
    */
@@ -131,7 +149,7 @@ export abstract class AbstractKeyExplorer<T> extends AbstractExplorer<T> impleme
       this.oldIndex = null;
       this.node.removeAttribute('role');
     }
-    super.Detach();
+    this.attached = false;
   }
 
   /**
@@ -194,6 +212,7 @@ export class SpeechExplorer extends AbstractKeyExplorer<string> {
    * @override
    */
   public Start() {
+    if (!this.attached) return;
     let options = this.getOptions();
     // TODO: Check and set locale not only on init, but on every start.
     if (!this.init) {
@@ -354,6 +373,7 @@ export class Magnifier extends AbstractKeyExplorer<HTMLElement> {
    */
   public Start() {
     super.Start();
+    if (!this.attached) return;
     this.region.Show(this.node, this.highlighter);
     this.walker.activate();
     this.Update();