[v4.1.0] No supported way to disable math focus/selection while preserving embedded input controls (regression from v3.2.2 & 2.7.4)

[sobhanadrink]

Is your feature request related to a problem? Please describe.
In MathJax v4.1.0, rendered math becomes focusable and selectable when clicked or when navigating via the Tab key. This activates MathJax Explorer, selection highlighting, and focus behavior by default.

In interactive applications where MathJax output includes embedded HTML form controls (for example elements rendered inside math using custom markup or extensions), this behavior causes usability issues:

• Clicking inside the math activates MathJax selection instead of the intended UI control
• Math containers receive focus during tab navigation even when they should be read-only
• Embedded input fields cannot be interacted with reliably because the parent MathJax container captures focus and selection
• There is no supported configuration option to disable this behavior selectively

This issue does not occur in MathJax v3.2.2 or earlier versions, where embedded input controls inside math could be interacted with without triggering math selection or focus. The behavior appears to be a regression or a behavioral change introduced in MathJax v4.

Describe the solution you'd like
Provide a supported configuration option to restrict or disable MathJax focus/selection behavior on rendered math containers, while still allowing normal interaction with embedded HTML controls.
Possible configuration ideas (illustrative only):

options: {
  selectable: false,
}

The key requirement is to prevent math containers from capturing focus or selection without blocking interaction on child elements.

Describe alternatives you've considered
The following alternatives were tested but are not viable:

• inTabOrder: false (Removes tab focus but does not prevent mouse focus or selection)

Additional context
This issue occurs in interactive applications such as educational platforms, assessments, and math editors where MathJax is used as a visual rendering layer combined with live form inputs.

Attached files include:

• A minimal HTML reproduction file
• A short video demonstrating the issue
• A screenshot highlighting math focus/selection behavior

Expected behavior: Clicking inside the text box allows typing without activating math selection.
Actual behavior: MathJax container captures focus/selection and interferes with input interaction.

A supported configuration-level solution would avoid fragile DOM hacks and preserve both usability and accessibility.

Mathjax-4.1.0-math-selecton.html
https://github.com/user-attachments/assets/2d507417-bc3d-48d4-8948-be7b3600ac6a

[dpvc]

Thanks for the report. You are right, click on these input areas are not being handled properly.

There is no supported configuration option to disable this behavior selectively

There actually are settings that you could use to control this. As you note, it is the expression explorer that is handling the clicking, and the explorer is only active when speech or Braille is being generated, so turning those off will prevent the highlighting and click capturing. E.g.,

MathJax = {
  options: {
    menuOptions: {
      settings: {
        speech: false,
        braille: false,
      }
    }
  }
};

would do it. This would allow the clicking to reach the text input areas.

Math containers receive focus during tab navigation even when they should be read-only

I'm not sure what you mean by that. Because the math expressions have an attached contextual menu, they must be focusable in order to be able to activate that menu. If you disable the menu (I don't recommend that, as there are important options available in the menu) in addition to disabling the speech and Braille, that will prevent the expression from being focusable. In this case, you might as well disable the semantic enrichment entirely:

MathJax = {
  options: {
    enableMenu: false,
    menuOptions: {
      settings: {
        enrich: false,
      }
    }
  }
};

Again, I think it is a mistake to disable the menu entirely, but it is possible if that is the decision you want to make.

I will make a pull request to fix the click-through issue without having to disable the speech and Braille. In the meantime, you can use the following configuration

MathJax = {
  startup: {
    ready() {
      const {SpeechExplorer} = MathJax._.a11y.explorer.KeyExplorer;
      Object.assign(SpeechExplorer.prototype, {
        _AddEvents_: SpeechExplorer.prototype.AddEvents,
        AddEvents() {
          if (!this.eventsAttached) {
            for (const html of Array.from(this.node.querySelectorAll('mjx-html'))) {
              html.addEventListener('click', (event) => {
                if (html.contains(document.activeElement)) {
                  event.stopPropagation();
                }
              });
            }
          }
          this._AddEvents_();
        }
      });
      MathJax.startup.defaultReady();
    }
  }
};

to allow you to activate input areas within the expression even while the explorer is active.

Attached files include: ... A minimal HTML reproduction file

The file doesn't seem to include any input text areas, nor does the movie, so I'm not sure what it is illustrating. If it is the highlighting of expressions when clicked, that is the expected behavior. If there is something else that they are supposed to show, then can you be more specific about that?

[sobhanadrink]

Thanks for the quick response.

The suggested AddEvents configuration on KeyExplorer does not work for our use case, as it prevents users from entering values into active HTML elements embedded within MathML.

Based on your suggestions, we tried an alternative approach by disabling KeyExplorer event handling, since it is not required in our context. The following configuration resolves the issue by allowing interaction with HTML-in-MathML input elements:

window.MathJax = {
    startup: {
        ready() {
            const { SpeechExplorer } = MathJax._.a11y.explorer.KeyExplorer;
            SpeechExplorer.prototype.AddEvents = function () {
                this.RemoveEvents();
            };

            MathJax.startup.defaultReady();
        }
    },
};

Please let us know if there is a supported or recommended way to achieve this behavior without overriding AddEvents, or if a more targeted configuration option is planned.

[dpvc]

The suggested AddEvents configuration on KeyExplorer does not work for our use case, as it prevents users from entering values into active HTML elements embedded within MathML.

Right. I guess I didn't test it enough. There are several other functions that need adjusting as well. Here is a new configuration to try:

MathJax = {
  startup: {
    ready() {
      const {SpeechExplorer} = MathJax._.a11y.explorer.KeyExplorer;
      Object.assign(SpeechExplorer.prototype, {
        _AddEvents_: SpeechExplorer.prototype.AddEvents,
        AddEvents() {
          if (!this.eventsAttached) {
            for (const html of Array.from(this.node.querySelectorAll('mjx-html'))) {
              const stop = (event) => {
                if (html.contains(document.activeElement)) {
                  event.stopPropagation();
                }
              };
              html.addEventListener('click', stop);
              html.addEventListener('keydown', stop);
              html.addEventListener('dblclick', stop);
            }
          }
          this._AddEvents_();
        },
      });
      MathJax.startup.defaultReady();
    }
  }
};

This should allow the keystrokes and double-clicking to pass through to the embedded active HTML elements as well.

The following configuration resolves the issue by allowing interaction with HTML-in-MathML input elements:

I wouldn't do that (and if you do, you probably can just use a blank AddEvents() function, since there are no event handler to remove).

Please let us know if there is a supported or recommended way to achieve this behavior without overriding AddEvents

As I mentioned above, the first configuration I gave in my earlier comment would disable the explorer in a supported way, and the second would disable the menu and explorer entirely. No need to override the internal function (I was just trying to give you a way to have the embedded elements be focusable without disabling the explorer).

or if a more targeted configuration option is planned.

No additional options are planned, as the speech/braille settings serve the purpose, and I have made a PR to update the AddEvents() function, and will modify it to include the changes here.

[sobhanadrink]

Thanks for your quick responses.
Finally, we are using the following configuration settings to enable speech-text without the Explorer option.

    startup: {
        ready() {
            const { SpeechExplorer } = MathJax._.a11y.explorer.KeyExplorer;
            SpeechExplorer.prototype.AddEvents = function () { };
            MathJax.startup.defaultReady();
        }
    }

Thank you, please close the issue after your confirmation.

[dpvc]

I expect that your code will do as you request: allow speech text without allowing the explorer to be active. Note, however, that there will be lots of useless attributes in the math output (that are needed for the explorer), and that creating and adding them will be a waste of time in this setting.

Also, did you try my updated configuration above? If you did, can you let us know why that was not satisfactory? The next release will include effectively that code, so if there are still problems with that approach, it would be helpful to use to know them.

[sobhanadrink]

Thank you for the clarification and for sharing the updated configuration.

Our requirement is to enable speech text only (aria-label), without activating the Explorer, and to avoid math content being selected or intercepting focus during:

• tab / keyboard navigation
• mouse click or double-click
  (These issues are demonstrated in the sample video previously attached.)

We did test your suggested configuration. While it improves the behavior, it does not fully resolve all cases in our application. Specifically:

• In some scenarios, focus does not reliably move to input elements during tab navigation.
• In other cases, keyboard input is blocked or lost when interacting with embedded controls (e.g., form fields adjacent to or within math content).

These appear to be caused by Explorer-related event handling still intercepting focus and keyboard events, even when propagation is partially stopped.

Because of these inconsistencies, we opted for disabling the Explorer event handling entirely while keeping speech text enabled:

startup: {
  ready() {
    const { SpeechExplorer } = MathJax._.a11y.explorer.KeyExplorer;
    SpeechExplorer.prototype.AddEvents = function () {};
    MathJax.startup.defaultReady();
  }
}

This approach has so far met our functional requirements more consistently, despite the additional (unused) Explorer attributes that you noted.

If the upcoming release includes a refined version of your proposed solution that avoids these focus and input-handling issues, we would be happy to test it again and provide feedback.