semantic enrichment and keyboard focus to element with aria-hidden

[jmegginson]

When semantic enrichment features of MathJax v4.0.0-beta.7 are enabled, programmatic focus gets set to a <g> element that is a child of <svg> with aria-hidden="true" set. When focus is set to an object that is a descendant of a node with aria-hidden="true" screen readers like JAWS and NVDA will not announce the focused object accurately (or at all).

It is observed that ARIA treeitem roles are set to these <g> tags. This could make sense to set focus to a treeitem only if "Collapsible Math" is enabled but even then the aria-hidden property is set to true on the parent SVG element currently.

To recreate you can add the following JS the Console in dev tools:
document.addEventListener('focusin', function() { console.log('focused: ', document.activeElement) }, true);

With the Console open, navigate with the Tab key and observe that the child <g> elements gain focus when "semantic enrichment" is enabled:

The elements panel will reveal that the parent node has aria-hidden="true" applied

Alternatively you can enable JAWS or NVDA and observe that nothing is announced (no ARIA treeitem roles or accessible labels) when navigating with virtual cursors or browse mode(s).

Note: When Semantic Enrichment is turned off, the <mjx-container> gains focus as expected.

It is suggested that programmatic focus remain on the <mjx-container> element like it does with MathJax v3.2.2. This way the aria-label (and any custom role) that is applied to this container can be conveyed and the various semantic enrichment features (speech and/or braille labels) can be announced.

Config:

• MathJax v4.0.0-beta.7
• Hidden MathML enabled
• Braille label generated

[zorkow]

Thanks for the report.
Some of the issues you mention are due to our current attempt to use the aria tree paradigm to "talk" to screenreaders rather than the old aria live region approach from v3. We are currently honing this and your feedback on future versions is very welcome.