Adds level of subclassing for clickable menu items.

unpacked/extensions/MathMenu.js

@@ -408,22 +408,23 @@
 
   /*************************************************************/
   /*
-   *  The menu item root subclass
+   *  Abstract class of menu items.
    */
   var ITEM = MENU.ITEM = MathJax.Object.Subclass({
     name: "", // the menu item's label as [id,label] pair
+    node: null,
 
-    Create: function (menu) {
+    Attributes: function() {
-      if (!this.hidden) {
+      return {onmouseup: MENU.Mouseup,
-        var def = {
-          onmouseover: MENU.Mouseover, onmouseout: MENU.Mouseout,
-          onmouseup: MENU.Mouseup, onmousedown: MENU.Mousedown,
               ondragstart: FALSE, onselectstart: FALSE, onselectend: FALSE,
               ontouchstart: MENU.Touchstart, ontouchend: MENU.Touchend,
-          className: "MathJax_MenuItem", menuItem: this
+              className: "MathJax_MenuItem", menuItem: this};
-        };
+    },    
-        if (this.disabled) {def.className += " MathJax_MenuDisabled"}
+    Create: function (menu) {
-        HTML.addElement(menu,"div",def,this.Label(def,menu));
+      if (!this.hidden) {
+        var def = this.Attributes();
+        var label = this.Label(def,menu);
+        this.node = HTML.addElement(menu, "div", def, label);
       }
     },
     Name: function () {return _(this.name[0],this.name[1])},
@@ -479,11 +480,31 @@
     rtlClass: function () {return (this.isRTL() ? " RTL" : "")}
   });
 
+  /*************************************************************/
+  /*
+   *  Abstract class of menu items that are focusable and perform some action
+   */
+  MENU.ENTRY = MENU.ITEM.Subclass({
+
+    Attributes: function() {
+      var def = this.SUPER(arguments).Attributes.apply(this,arguments);
+      def.onmouseover =  MENU.Mouseover;
+      def.onmouseout = MENU.Mouseout;
+      def.onmousedown = MENU.Mousedown;
+      def.role = "menuitem";
+      if (this.disabled) {
+        def.className += " MathJax_MenuDisabled";
+        def["aria-disabled"] = true;
+      }
+      return def;
+    },
+  });
+  
   /*************************************************************/
   /*
    *  A menu item that performs a command when selected
    */
-  MENU.ITEM.COMMAND = MENU.ITEM.Subclass({
+  MENU.ITEM.COMMAND = MENU.ENTRY.Subclass({
     action: function () {},
 
     Init: function (name,action,def) {
@@ -507,7 +528,7 @@
   /*
    *  A menu item that posts a submenu
    */
-  MENU.ITEM.SUBMENU = MENU.ITEM.Subclass({
+  MENU.ITEM.SUBMENU = MENU.ENTRY.Subclass({
     menu: null,        // the submenu
     marker: "\u25BA",  // the submenu arrow
     markerRTL: "\u25C4", // the submenu arrow for RTL
@@ -560,10 +581,15 @@
   /*
    *  A menu item that is one of several radio buttons
    */
-  MENU.ITEM.RADIO = MENU.ITEM.Subclass({
+  MENU.ITEM.RADIO = MENU.ENTRY.Subclass({
     variable: null,     // the variable name
     marker: (isPC ? "\u25CF" : "\u2713"),   // the checkmark
 
+    Attributes: function() {
+      var def = this.SUPER(arguments).Attributes.apply(this,arguments);
+      def.role = "menuitemradio";
+      return def;
+    },
     Init: function (name,variable,def) {
       if (!(name instanceof Array)) {name = [name,name]}  // make [id,label] pair
       this.name = name; this.variable = variable; this.With(def);
@@ -597,10 +623,15 @@
   /*
    *  A menu item that is checkable
    */
-  MENU.ITEM.CHECKBOX = MENU.ITEM.Subclass({
+  MENU.ITEM.CHECKBOX = MENU.ENTRY.Subclass({
     variable: null,     // the variable name
     marker: "\u2713",   // the checkmark
 
+    Attributes: function() {
+      var def = this.SUPER(arguments).Attributes.apply(this,arguments);
+      def.role = "menuitemcheckbox";
+      return def;
+    },
     Init: function (name,variable,def) {
       if (!(name instanceof Array)) {name = [name,name]}  // make [id,label] pair
       this.name = name; this.variable = variable; this.With(def);
@@ -633,7 +664,6 @@
       this.name = name; this.With(def);
     },
     Label: function (def,menu) {
-      delete def.onmouseover, delete def.onmouseout; delete def.onmousedown;
       def.className += " MathJax_MenuLabel";
       return [this.Name()];
     }
@@ -645,7 +675,6 @@
    */
   MENU.ITEM.RULE = MENU.ITEM.Subclass({
     Label: function (def,menu) {
-      delete def.onmouseover, delete def.onmouseout; delete def.onmousedown;
       def.className += " MathJax_MenuRule";
       return null;
     }