Merge pull request #1264 from mathjax/fix/explorer-refocus

Fix refocusing the selected node after a rerender.

Author: dpvc

ts/a11y/complexity.ts

@@ -26,7 +26,6 @@ import { Handler } from '../core/Handler.js';
 import { MathDocumentConstructor } from '../core/MathDocument.js';
 import { STATE, newState } from '../core/MathItem.js';
 import { MathML } from '../input/mathml.js';
-import { MmlNode } from '../core/MmlTree/MmlNode.js';
 import {
   EnrichHandler,
   EnrichedMathItem,
@@ -69,6 +68,11 @@ newState('COMPLEXITY', 40);
  * @template D  The Document class
  */
 export interface ComplexityMathItem<N, T, D> extends EnrichedMathItem<N, T, D> {
+  /**
+   * The starting collapse ID for this expression
+   */
+  initialID: number;
+
   /**
    * @param {ComplexityMathDocument} document   The MathDocument for the MathItem
    * @param {boolean} force                     True to force the computation even if enableComplexity is false
@@ -80,7 +84,7 @@ export interface ComplexityMathItem<N, T, D> extends EnrichedMathItem<N, T, D> {
  * The mixin for adding complexity to MathItems
  *
  * @param {B} BaseMathItem       The MathItem class to be extended
- * @param {function(MmlNode): void} computeComplexity Method of complexity computation.
+ * @param {(math: ComplexityMathItem<N,T,D>) => void} computeComplexity Method of complexity computation.
  * @returns {ComplexityMathItem}  The complexity MathItem class
  *
  * @template N  The HTMLElement node class
@@ -90,9 +94,14 @@ export interface ComplexityMathItem<N, T, D> extends EnrichedMathItem<N, T, D> {
  */
 export function ComplexityMathItemMixin<N, T, D, B extends EMItemC<N, T, D>>(
   BaseMathItem: B,
-  computeComplexity: (node: MmlNode) => void
+  computeComplexity: (math: ComplexityMathItem<N, T, D>) => void
 ): CMItemC<N, T, D> & B {
   return class extends BaseMathItem {
+    /**
+     * The starting collapse ID for this expression
+     */
+    public initialID: number = null;
+
     /**
      * @param {ComplexityMathDocument} document   The MathDocument for the MathItem
      * @param {boolean} force                     True to force the computation even if enableComplexity is false
@@ -104,7 +113,7 @@ export function ComplexityMathItemMixin<N, T, D, B extends EMItemC<N, T, D>>(
       if (this.state() >= STATE.COMPLEXITY) return;
       if (!this.isEscaped && (document.options.enableComplexity || force)) {
         this.enrich(document, true);
-        computeComplexity(this.root);
+        computeComplexity(this);
       }
       this.state(STATE.COMPLEXITY);
     }
@@ -184,8 +193,12 @@ export function ComplexityMathDocumentMixin<N, T, D, B extends EMDocC<N, T, D>>(
         this.mmlFactory,
         visitorOptions
       );
-      const computeComplexity = (node: MmlNode) =>
-        this.complexityVisitor.visitTree(node);
+      const computeComplexity = (math: ComplexityMathItem<N, T, D>) => {
+        math.initialID = this.complexityVisitor.visitTree(
+          math.root,
+          math.initialID
+        );
+      };
       this.options.MathItem = ComplexityMathItemMixin<
         N,
         T,

ts/a11y/complexity/collapse.ts

@@ -531,16 +531,29 @@ export class Collapse {
   /**
    * Add maction nodes to the nodes in the tree that can collapse
    *
-   * @param {MmlNode} node   The root of the tree to check
+   * @param {MmlNode} node     The root of the tree to check
+   * @param {number|null} id   The initial id to use
+   * @returns {number}         The initial id used
    */
-  public makeCollapse(node: MmlNode) {
+  public makeCollapse(node: MmlNode, id: number | null): number {
+    let oldCount = null;
+    if (id === null) {
+      id = this.idCount;
+    } else {
+      oldCount = this.idCount;
+      this.idCount = id;
+    }
     const nodes: MmlNode[] = [];
     node.walkTree((child: MmlNode) => {
       if (child.getProperty('collapse-marker')) {
         nodes.push(child);
       }
     });
     this.makeActions(nodes);
+    if (oldCount !== null) {
+      this.idCount = oldCount;
+    }
+    return id;
   }
 
   /**

ts/a11y/complexity/visitor.ts

@@ -107,11 +107,12 @@ export class ComplexityVisitor extends MmlVisitor {
   /**
    * @override
    */
-  public visitTree(node: MmlNode) {
+  public visitTree(node: MmlNode, id: number) {
     super.visitTree(node, true);
     if (this.options.makeCollapsible) {
-      this.collapse.makeCollapse(node);
+      id = this.collapse.makeCollapse(node, id);
     }
+    return id;
   }
 
   /**

ts/a11y/explorer.ts

@@ -85,11 +85,27 @@ export interface ExplorerMathItem extends HTMLMATHITEM {
    */
   explorers: ExplorerPool;
 
+  /**
+   * Semantic id of the rerendered element that should regain the focus.
+   */
+  refocus: string;
+
   /**
    * @param {HTMLDocument} document  The document where the Explorer is being added
    * @param {boolean} force          True to force the explorer even if enableExplorer is false
    */
   explorable(document: HTMLDOCUMENT, force?: boolean): void;
+
+  /**
+   * @param {ExplorerMathDocument} document  The explorer document being used
+   * @returns {HTMLElement}                  The temporary focus element, if any
+   */
+  setTemporaryFocus(document: ExplorerMathDocument): HTMLElement;
+
+  /**
+   * @param {HTMLElement} focus  The temporary focus element, if any
+   */
+  clearTemporaryFocus(focus: HTMLElement): void;
 }
 
 /**
@@ -143,9 +159,9 @@ export function ExplorerMathItemMixin<B extends Constructor<HTMLMATHITEM>>(
     public explorers: ExplorerPool;
 
     /**
-     * Semantic id of the rerendered element that should regain the focus.
+     * @override
      */
-    protected refocus: string = null;
+    public refocus: string = null;
 
     /**
      * @override
@@ -192,21 +208,64 @@ export function ExplorerMathItemMixin<B extends Constructor<HTMLMATHITEM>>(
       this.state(STATE.EXPLORER);
     }
 
+    /**
+     * @override
+     */
+    public state(state: number = null, restore: boolean = false) {
+      if (state < STATE.EXPLORER && this.explorers) {
+        for (const explorer of Object.values(this.explorers.explorers)) {
+          if (explorer.active) {
+            explorer.Stop();
+          }
+        }
+      }
+      return super.state(state, restore);
+    }
+
     /**
      * @override
      */
     public rerender(
       document: ExplorerMathDocument,
       start: number = STATE.RERENDER
     ) {
+      const focus = this.setTemporaryFocus(document);
+      super.rerender(document, start);
+      this.clearTemporaryFocus(focus);
+    }
+
+    /**
+     * Focuses a temporary element during rerendering
+     *
+     * @param {ExplorerMathDocument} document   The explorer document to use
+     * @returns {HTMLElement}                   The temporary focus element, if any
+     */
+    public setTemporaryFocus(document: ExplorerMathDocument): HTMLElement {
+      let focus = null;
       if (this.explorers) {
         const speech = this.explorers.speech;
-        if (speech && speech.attached) {
+        focus = speech?.attached ? document.tmpFocus : null;
+        if (focus) {
           this.refocus = speech.semanticFocus() ?? null;
+          const adaptor = document.adaptor;
+          adaptor.append(adaptor.body(), focus);
         }
         this.explorers.reattach();
+        focus?.focus();
+      }
+      return focus;
+    }
+
+    /**
+     * Removes the temporary element after rerendering
+     *
+     * @param {HTMLElement} focus  The temporary focus element, if any
+     */
+    public clearTemporaryFocus(focus: HTMLElement) {
+      if (focus) {
+        const promise = this.outputData.speechPromise ?? Promise.resolve();
+        promise.then(() => setTimeout(() => focus.remove(), 100));
       }
-      super.rerender(document, start);
     }
   };
 }
@@ -220,11 +279,21 @@ export interface ExplorerMathDocument extends HTMLDOCUMENT {
    */
   infoIcon: HTMLElement;
 
+  /**
+   * An element ot use for temporary focus during rerendering
+   */
+  tmpFocus: HTMLElement;
+
   /**
    * The objects needed for the explorer
    */
   explorerRegions: RegionPool;
 
+  /**
+   * The MathItem with the active KeyExplorer, if any
+   */
+  activeItem: ExplorerMathItem;
+
   /**
    * Add the Explorer to the MathItems in the MathDocument
    *
@@ -401,11 +470,21 @@ export function ExplorerMathDocumentMixin<
      */
     public infoIcon: HTMLElement;
 
+    /**
+     * An element ot use for temporary focus during rerendering
+     */
+    public tmpFocus: HTMLElement;
+
     /**
      * The objects needed for the explorer
      */
     public explorerRegions: RegionPool = null;
 
+    /**
+     * The MathItem with the active KeyExplorer, if any
+     */
+    public activeItem: ExplorerMathItem = null;
+
     /**
      * Extend the MathItem class used for this MathDocument
      *   and create the visitor and explorer objects needed for the explorer
@@ -425,8 +504,11 @@ export function ExplorerMathDocumentMixin<
       if (!options.a11y.speechRules) {
         options.a11y.speechRules = `${options.sre.domain}-${options.sre.style}`;
       }
-      options.MathItem = ExplorerMathItemMixin(options.MathItem, toMathML);
-      options.MathItem.roleDescription = options.roleDescription;
+      const mathItem = (options.MathItem = ExplorerMathItemMixin(
+        options.MathItem,
+        toMathML
+      ));
+      mathItem.roleDescription = options.roleDescription;
       this.explorerRegions = new RegionPool(this);
       if ('addStyles' in this) {
         (this as any).addStyles(
@@ -448,6 +530,22 @@ export function ExplorerMathDocumentMixin<
           SVGNS
         ),
       ]);
+      this.tmpFocus = this.adaptor.node('mjx-focus', {
+        tabIndex: 0,
+        style: {
+          outline: 'none',
+          display: 'block',
+          position: 'absolute',
+          top: 0,
+          left: '-10px',
+          width: '1px',
+          height: '1px',
+          overflow: 'hidden',
+        },
+        role: mathItem.ariaRole,
+        'aria-label': mathItem.none,
+        'aria-roledescription': mathItem.none,
+      });
     }
 
     /**
@@ -467,6 +565,17 @@ export function ExplorerMathDocumentMixin<
       return this;
     }
 
+    /**
+     * @override
+     */
+    public rerender(start?: number) {
+      const active = this.activeItem;
+      const focus = active?.setTemporaryFocus(this);
+      super.rerender(start);
+      active?.clearTemporaryFocus(focus);
+      return this;
+    }
+
     /**
      * @override
      */

ts/a11y/explorer/KeyExplorer.ts

@@ -850,7 +850,9 @@ export class SpeechExplorer
     if (this.speech) {
       this.speech.remove();
       this.speech = null;
-      this.node.append(this.img);
+      if (this.img) {
+        this.node.append(this.img);
+      }
       this.node.setAttribute('tabindex', '0');
     }
   }
@@ -937,6 +939,13 @@ export class SpeechExplorer
     }
   }
 
+  /**
+   * Set focus on the current node
+   */
+  public focus() {
+    this.node.focus();
+  }
+
   /********************************************************************/
   /*
    * Utility functions
@@ -1132,6 +1141,7 @@ export class SpeechExplorer
     // If we aren't attached or already active, return
     //
     if (!this.attached || this.active) return;
+    this.document.activeItem = this.item;
     //
     // If there is no speech, request the speech and wait for it
     //
@@ -1322,14 +1332,17 @@ export class SpeechExplorer
   public semanticFocus(): string {
     const focus = [];
     let name = 'data-semantic-id';
-    let node = this.current || this.node;
+    let node = this.current || this.refocus || this.node;
     const action = this.actionable(node);
     if (action) {
       name = action.hasAttribute('data-maction-id') ? 'data-maction-id' : 'id';
       node = action;
       focus.push(nav);
     }
-    focus.unshift(`[${name}="${node.getAttribute(name)}"]`);
+    const attr = node.getAttribute(name);
+    if (attr) {
+      focus.unshift(`[${name}="${attr}"]`);
+    }
     return focus.join(' ');
   }
 }

ts/a11y/explorer/Region.ts

@@ -640,6 +640,10 @@ export class HoverRegion extends AbstractRegion<HTMLElement> {
     if (!this.div) return;
     this.Clear();
     const mjx = this.cloneNode(node);
+    const selected = mjx.querySelector('[data-mjx-clone]') as HTMLElement;
+    this.inner.style.backgroundColor = node.style.backgroundColor;
+    selected.style.backgroundColor = '';
+    selected.classList.remove('mjx-selected');
     this.inner.appendChild(mjx);
     this.position(node);
   }
@@ -652,6 +656,7 @@ export class HoverRegion extends AbstractRegion<HTMLElement> {
    */
   private cloneNode(node: HTMLElement): HTMLElement {
     let mjx = node.cloneNode(true) as HTMLElement;
+    mjx.setAttribute('data-mjx-clone', 'true');
     if (mjx.nodeName !== 'MJX-CONTAINER') {
       // remove element spacing (could be done in CSS)
       if (mjx.nodeName !== 'g') {