mathjax / mathjax/MathJax

Context Menu keyboard and focus improvements

Open
#3,609 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Accepted Ready for Review
Dominant language
JavaScript
Stars
10.9k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

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);

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the MathJax demo page and reproduce the context-menu behavior using the tab sequence described in the issue; use the provided focusin listener to observe focus movement. Done means tabbing away no longer leaves the menu blocking subsequent MathJax objects, and the role=menu element has a terse accessible name.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.