MathJax icon indicating copy to clipboard operation
MathJax copied to clipboard

Context Menu not accessible for low vision users who rely on zooming functionality

Open randall-krauskopf opened this issue 1 year ago • 3 comments

Issue Summary

The context menu sub menu positioning does not meet the WCAG 1.4.10 Reflow specification which is preventing consumers of this project from meeting accessibility standards.

I've also opened up a similar issue in the context-menu repo.

Steps to Reproduce:

  1. Load any MathJax equation that triggers the context menu
  2. Using the chrome debugger tools, set the viewport to 320x256
  3. Select the Desktop interaction from the "Device Type" menu so you can still right click and not use the tap functionality that it tries to simulate in the chrome debugger.
  4. Right click to bring up the context menu
  5. Observe that sub menus overlap the parent menu and obscure information

Expected behavior is that in narrower viewports the sub menus open up underneath the parent menu without any overlap and the user can still see all of the menu options in both the parent menu and sub menu.

I've provided additional demos of the bug as well as expected behavior in the Supporting Information section

Technical details:

  • MathJax Version: 3.2
  • Client OS: Sonoma 14.5
  • Browser: Chrome 126.0.6478.127

I am using the following MathJax configuration:

MathJax = {
  options: {
      enableMenu: true,
      renderActions: {
        addMenu: [100000],
      },
      safeOptions: {
        allow: {
          URLs: 'none',
          classes: 'none',
          cssIDs: 'none',
          styles: 'safe',
        },
        lengthMax: 2,
        safeStyles: {},
        styleLengths: {},
      },
    },
  };

and loading MathJax via a webpack configuration from an npm module

Supporting information:

Demo Video

https://github.com/user-attachments/assets/e8a96b74-e14a-4e1c-8298-73cf6b5234d6

Example of non-overlap

This sub-menu component stacks the new sub menus vertically, while the user now needs to scroll to view the new menus there is no loss of information.

Demo Video

https://github.com/user-attachments/assets/0d0edb8b-b3f7-4ce9-8325-a63cf607f160

randall-krauskopf avatar Jul 03 '24 15:07 randall-krauskopf

Thanks for the report. We will look into updating the menu to be more compliant.

dpvc avatar Jul 05 '24 12:07 dpvc

Thanks for the report. We will look into updating the menu to be more compliant.

Any movement on this?

weboverhauls avatar May 05 '25 19:05 weboverhauls

To do this, the menu code will need some non-trivial changes. Because the submenus open and close on hover (as opposed to only when clicked or on right-arrow), placing the sub-menus below the bottom of the currently open menu will mean that you won't be able to use the mouse to select the items in a submenu that has been positioned below, as passing over other menu items on the way to the submenu will cause the submenu to close before you get to it. We would have to move to a mechanism that only opens and closes a submenu on click or right-arrow (not just on hovering), for example, and that will take a bit of work that we haven't been able to get to yet.

dpvc avatar May 25 '25 19:05 dpvc