mathjax
Activating Accessibility in Context-Menu causes either nothing or a critical error and all math to disappear
Update: This actually also happens inside MathJax's own Demo: https://www.mathjax.org/#demo
Issue Summary
Using MathJax 3.2.2, we want to have the explorer deactivated by default so the page loads quickly but allow the user to enable the exploration by activating the accessibility features via the context menu "Accessibility" -> "Activate".
If the user has had the explorer activated via their values in the Local Storage, MathJax correctly adds the explorable content to the Math on page load. Activating and Deactivating the Accessibility from the Context Menu works as expected.
If the user has had the explorer deactivated - as we wish by default because it increases page load times by a factor between 10 and 20 - there is no explorable content inserted into the math, which I would expect.
Activating the "Accessibility" options in the Context Menu causes a rerender as expected, but no new explorable content gets added. Debugging into the MathJax object of the page I can see that the "explorable" renderAction is not added to any part inside the complex object tree, nor does a deferred load to the "a11y/explorer.js" or anything similar happen.
Trying to find out what causes this I created a minimal page with no configuration whatsoever where I insert a piece of math that gets rendered by MathJax in order to see if at least in this minimal environment the turning on and off of the accessibility option would work.
Instead I get a critical error: "Mathjax retry" when turning on the option. Reloading the page again has the Accessibility option enabled via LocalStorage so after that it works fine, though with the additional load time incurred.
Steps to Reproduce:
- Consider the absolute minimal webpage in the appendix.
- Check that "Accessibility" is turned off.
- "Activate" "Accessibility"
- See the math disappear
- Console logs an error: "Mathjax retry"
Technical details:
- MathJax Version: 3.2.2
- Client OS: Windows
- Browser: Firefox 119.0.1 and Chrome 119.0.6045.106
I am using the following MathJax configuration:
None at all for the example, though our actual webpage where simply nothing happens instead of having an error occur uses this:
window.MathJax = {
loader: {
load: [
"[tex]/ams",
"a11y/assistive-mml",
"a11y/explorer",
"a11y/semantic-enrich",
"a11y/complexity",
"a11y/sre",
],
typeset: false,
},
svg: {
scale: config.math.scale || 1.0, // global scaling factor for all expressions
minScale: 0.5, // smallest scaling factor to use
mtextInheritFont: true, // true to make mtext elements use surrounding font
merrorInheritFont: true, // true to make merror text use surrounding font
mathmlSpacing: false, // true for MathML spacing rules, false for TeX rules
skipAttributes: {}, // RFDa and other attributes NOT to copy to the output
exFactor: 0.5, // default size of ex in em units
displayAlign: "center", // default for indentalign when set to 'auto'
displayIndent: "0", // default for indentshift when set to 'auto'
fontCache: "none", // or 'global' or 'none'
localID: null, // ID to use for local font cache (for single equation processing)
internalSpeechTitles: true, // insert <title> tags with speech content
titleID: 0, // initial id number to use for aria-labeledby titles
},
tex: {
tags: "ams",
packages: {
"[+]": ["ams"],
},
inlineMath: [
// start/end delimiter pairs for in-line math
["$", "$"],
["\\(", "\\)"],
],
displayMath: [
// start/end delimiter pairs for display math
["$$", "$$"],
["\\[", "\\]"],
],
},
options: {
enableMenu: false,
enableMenu: true,
enableEnrichment: false,
enableComplexity: false,
enableExplorer: true,
menuOptions: {
settings: {
assistiveMml: true,
collapsible: false, // messes up spacing in some equations
explorer: false,
},
},
a11y: {
backgroundColor: "Green",
backgroundOpacity: 50,
foregroundColor: "Black",
foregroundOpacity: 100,
},
},
};
Loading MathJax via:
<script type="text/javascript" id="MathJax-script" defer src="/self-hosted/vendor/mathjax/tex-svg-full.js"></script>
Supporting information:
Minimal Webpage code:
<!DOCTYPE html>
<html>
<head>
<title>Math Test</title>
<script type="text/javascript" id="MathJax-script" defer src="/self-hosted/vendor/mathjax/tex-svg-full.js"></script>
</head>
<body>
<h1>MathJax Testpage</h1>
<span>$$f(x) = t - \vec{2}$$</span>
</body>
</html>
Console Error:
This is resolved in v4.0 (now out in beta release) via the mathjax/MathJax-src#830. For now, however, you can use the configuration
MathJax = {
startup: {
ready() {
const {mathjax} = MathJax._.mathjax;
const {STATE} = MathJax._.core.MathItem;
const {Menu} = MathJax._.ui.menu.Menu;
const rerender = Menu.prototype.rerender;
Menu.prototype.rerender = function (start = STATE.TYPESET) {
mathjax.handleRetriesFor(() => rerender.call(this, start));
}
MathJax.startup.defaultReady();
}
}
};
as a work-around. This should make the assistive tools work the way you are asking for them to work (not one activated by default, but allowing users to activate them if they want them), without additional configuration. You don't need to load the explorer or other a11y extensions, as they will load automatically when needed, and the assistive-mml extension is included in the tex-svg-full combined component, so don't need to be loaded either. Similarly, the [tex]/ams package is included in tex-svg-full, so no need to load that or add it to the tex package list (it is already there). I would not set any of the enable options, as the defaults for those are already what you want, and the menuOptions settings are already the defaults, so they aren't needed, either.
