Skip to content

Fix problem with sliders and add keyboard controls.#1534

Open
dpvc wants to merge 1 commit into
developfrom
fix/menu-sliders
Open

Fix problem with sliders and add keyboard controls.#1534
dpvc wants to merge 1 commit into
developfrom
fix/menu-sliders

Conversation

@dpvc

@dpvc dpvc commented Jul 22, 2026

Copy link
Copy Markdown
Member

This PR fixes several problems with the opacity sliders in the MathJax contextual menu.

The first is due to the setTimeout() that I added to

https://github.com/mathjax/context-menu/blame/2156b7db7cac02ca8451deb4ee6075d55b591d37/ts/menu_element.ts#L88

to address a problem with Firefox on Windows voicing the menu items as they are selected. This causes the slider value to be reset to the default value after you let it go. It seems to be caused by the default action of the mouseup event. The solution is to prevent the default action for the mouseup event, as it would have been in the default mouseup() method, but that is never called by the slider's mouseup().

The second is related, where the value could be reset to the default after moving the slider and then coming back to the highlight menu and moving the mouse from the top entry to the slider so that the mouse is over the slider itself (rather than the background). This seems to be due to the timing of the focus events on the slider itself versus the div that holds it, but I couldn't quite figure out why it would get the default value again. The solution in this case seems to be to focus the container first, then focus the slider. I haven't checked if that causes problems in windows Firefox, but since this will only be for the sliders, it is probably not a serious issue even if it does.

These changes are made by using a subclass of the Slider class that overrides the needed methods. This could have been done in a PR for the context menu itself, but I didn't want to make a new context-menu release, as we are planning to move that code into MathJax-src in the future; when that occurs, we can move the subclass methods into the actual Slider class.

The subclass is in ts/ui/Menu/Slider.ts, and is imported into Menu.ts like the RadioCompare extension, and added to the menu parser in the same way. I also added a Slider() method for creating the menu entries for the sliders, similar to the other helper functions for radio buttons, checkboxes, submenus, labels, rules, and so on.

Finally, the new slider subclass also includes support for changing its value via keyboard events. I could not follow the suggested key bindings from WAI, since our menus already use the arrow keys for navigation purposes. So I uses SHIFT-arrow keys to perform those actions that are usually use arrow keys, and also add + and - for increasing and decreasing the values by 1, with CTRL to move by larger amounts (5). I also implemented the Home, End, PageUp and PageDown key bindings that they recommend.

As we know, the menu code needs to be updated to match some of the other WAI requirements, so this can be revisited when we do that overhaul.

@dpvc
dpvc requested a review from zorkow July 22, 2026 18:31
@dpvc dpvc added this to the v4.2 milestone Jul 22, 2026
@codecov

codecov Bot commented Jul 22, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.70%. Comparing base (9ef060f) to head (394a94f).

Additional details and impacted files
@@            Coverage Diff             @@
##           develop    #1534     +/-   ##
==========================================
  Coverage    86.70%   86.70%             
==========================================
  Files          340      340             
  Lines        86264    86264             
  Branches      3246     4906   +1660     
==========================================
  Hits         74798    74798             
+ Misses       11466    11446     -20     
- Partials         0       20     +20     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant