Opened 6 years ago

Closed 4 years ago

#16929 closed task (patchwelcome)

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

Reported by: bill Owned by: bill
Priority: undecided Milestone: 1.13
Component: Dijit Version: 1.8.3
Keywords: Cc:
Blocked By: Blocking:

Description

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.

Change History (10)

comment:1 Changed 6 years ago by bill

Milestone: tbd2.0
Status: newassigned

comment:2 Changed 6 years ago by sunxcint

How about using inline DIVs for MenuItems??

comment:3 Changed 6 years ago by 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.

comment:4 Changed 6 years ago by sunxcint

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

comment:5 Changed 6 years ago by bill

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

comment:6 in reply to:  5 Changed 6 years ago by 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).

comment:7 Changed 6 years ago by 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.

comment:8 Changed 6 years ago by sunxcint

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

comment:9 Changed 6 years ago by 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.

comment:10 Changed 4 years ago by dylan

Milestone: 2.01.12
Resolution: patchwelcome
Status: assignedclosed

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

Note: See TracTickets for help on using tickets.