Menu: implement with <div> rather than <table>

[bill]

Change Menu and MenuItem (plus subclasses) from <table> (and <tr> and <td>) to <div>'s. This will allow RadioMenuItem's to be put into groups as recommended in ​http://www.w3.org/TR/wai-aria/roles#menuitemradio, ex:

<div data-dojo-type=Menu>
      <div role=group>
            <div data-dojo-type=RadioMenuItem>Red</div>
            <div data-dojo-type=RadioMenuItem>Green</div>
            <div data-dojo-type=RadioMenuItem>Blue</div>
      </div>
      <div data-dojo-type=MenuSeparator></div>
      <div role=group>
            <div data-dojo-type=RadioMenuItem>Small</div>
            <div data-dojo-type=RadioMenuItem>Medium</div>
            <div data-dojo-type=RadioMenuItem>Large</div>
      </div>
</div>

It also allows the theme more customization of the menu's style.

Using <div>'s is admittedly harder than using <table>'s: the icon and right arrow can be positioned using float:left and float:right, or via judicious use of margins and position:absolute, etc. The accelerator key is harder since the width will vary based on the font, but I think it can be done, assuming full-zoom rather than text-only zoom.

See also similar ticket for Toolbar, #16266.

[sunxcint]

How about using inline DIVs for MenuItems??

[bill]

Not sure what you are getting at, you want multiple MenuItems? on a single row?

On another note, I realized now one can also form groups by ​using multiple <tbody> nodes.

[sunxcint]

I meant to use inline DIVs inside a MenuItem? so that one MenuItem? will be a single row.

[bill]

Sure, that's what this ticket is about, but the hard part is doing alignment (like the current table).

[sunxcint]

Replying to bill:

Sure, that's what this ticket is about, but the hard part is doing alignment (like the current table).

You suggested using block-level DIVs with floats. And I wanted to know whether you have considered inline DIVS(rather than block-level DIVs).

[bill]

OK I see, well I considered it a bit, but I'm skeptical we could make the alignment work. Somehow all the menu labels would need to be the same width. A lot of web developers would simply say something like width: 200px for the inline-div with the label, but the problem that cuts off the text if/when (1) the user has set a large font size via a custom user stylesheet or (2) the app is translated to a wordy language like German and the strings get long.

Perhaps you are thinking of some approach that I didn't consider.

[sunxcint]

The accelerator key would need to be the same width too, right?

[bill]

Right... even getting the accelerators the same width is problematic, especially if only some menu items have accelerators, and/or if some menu items have long accelerators lift shift-ctrl-x.

[dylan]

Given that no one has shown interest in creating a patch in the past 2+ years, I'm closing this as patchwelcome.