Context Menu keyboard and focus improvements

Issue Summary

When the context menu opens, programmatic focus is set to the container with role=menu:

<div class="CtxtMenu_ContextMenu CtxtMenu_Menu" role="menu" style="left: 662.03125px; top: 223.5px;" tabindex="0">...</div>

We have observed students tabbing away (via Tab key) from the menu rather than closing it via the Escape key.

When this happens, the menu remains open and it can only be closed when the menu object is focused upon again. This is cumbersome as the menu is positioned at the end of the DOM. Furthermore, no other (subsequent) mathjax objects can be focused upon with the keyboard until the menu is closed.

Steps to Reproduce:

1. Navigate to the math object with the Tab key
2. Open the context menu (e.g., via spacebar)
3. Confirm menu opens
4. Press Tab key on the keyboard
5. Observe that the menu remains open
6. Observe that no mathjax objects can gain focus until the menu is closed.

Please note that the context menu lacks an accessible name (label) to assist with quick navigation back. Suggest adding a terse aria-label to the DIV with role=menu so users (e.g., JAWS, NVDA) can discern the name of menu and navigate quickly back:

<div aria-label="mathjax context menu" class="CtxtMenu_ContextMenu CtxtMenu_Menu" role="menu" style="left: 662.03125px; top: 223.5px;" tabindex="0">...</div>

Technical details:

• MathJax Version: 4.1.3
• Windows 11, MacOS, Chromebook
• Chrome, Safari

Supporting information:

This can be reproduced on the mathjax demo page with any configuration permitting the mathjax object in the tab order and with the menu enabled.

• https://www.mathjax.org/#demo
• The following JS can be used in the console to observe focus events and troubleshoot: document.addEventListener('focusin', function() {console.log('focused: ', document.activeElement)}, true);