[whatwg] Web Applications 1.0 and Menu Labels

[Matthew Raymond]

MENU LABELS AND THE <A> ELEMENT:

    I was looking at the example in the "2.1. Tutorial" section of Web 
Applications 1.0[1] when I noticed something. Here's a snipped version 
of the example:

<menubar>
  <li>
   <a href="#file">File</a>
   <menu id="file">
    <li><button type="button" onclick="fnew()">New...</button></li>
    <li><button type="button" onclick="fopen()">Open...</button></li>
   </menu>
  </li>
</menubar>

    Notice that the <a> element is being used in place of a 
<menulabel>[2]. This doesn't really make sense because it overloads the 
semantics of <a> without reason. Consider the above example with 
<menulabel> added:

<menubar>
  <li>
   <menulabel><a href="#file">File</a></menulabel>
   <menu id="file">
    <li><button type="button" onclick="fnew()">New...</button></li>
    <li><button type="button" onclick="fopen()">Open...</button></li>
   </menu>
  </li>
</menubar>

    The above example degrades in exactly the same way. The difference 
is that only <menulabel> is used to label menus. As a result, webmasters 
don't have to memorize an additional rule about the use of <a>. 
Furthermore, since there's no apparent reason to have a hyperlink inside 
a menu label, the UAs would need to ignore <a> elements inside 
<menulabel> elements anyways.


THE <MENULABEL> AND <LABEL> ELEMENTS:

    I noticed that <menulabel> in the WA1 spec is associated with the 
immediate menu item:

    "The semantic of the menulabel element is that it labels its 
following sibling element, which must be a menu element. [...] A 
menulabel whose next sibling element is not a menu element is 
semantically [meaningless]."[3]

    I like this method of association, and I'd like to see it used with 
<label> as well. I've already seen people using markup like the 
following in HTML4 web pages:

<label>Text</label><input type="text" name="text1">

    So, by associating otherwise unassociated <label> elements such as 
the one above with controls that are immediate siblings, we add semantic 
meaning to many web pages that already use this kind of 
association-by-proximity. I'd also like to see <menulabel> use the 
association methods available with <label>, like implicit association...

<menubar id="appmenu">
  <menulabel label="File">
   <menu>
    <command label="New..." onclick="fnew()"/>
    <command label="Open..." onclick="fopen()"/>
    <command label="Save" onclick="fsave()" id="save"/>
    <command label="Save as..." onclick="fsaveas()"/>
   </menu>
  </menulabel>
</menubar>

...Or using the |for| attribute...

<menubar id="appmenu">
  <menulabel label="File" for="file"/>
  <menulabel label="Edit" for="edit"/>
  <menulabel label="Help" for="help"/>

  <menu id="file">
   <command label="New..." onclick="fnew()"/>
   <command label="Open..." onclick="fopen()"/>
   <command label="Save" onclick="fsave()" id="save"/>
   <command label="Save as..." onclick="fsaveas()"/>
  </menu>

  <menu id="edit">
   <command label="Copy" onclick="ecopy()"/>
   <command label="Cut" onclick="ecut()"/>
   <command label="Paste" onclick="epaste()"/>
  </menu>

  <menu id="help">
   <a href="help.html">Help</a>
   <a href="about.html">About</a>
  </menu>
</menubar>


<MENULABEL>, <COMMAND> ATTRIBUTES AND SUBMENUS:

    There are surprisingly few examples in the WA1 specification 
regarding submenus. Logically, a menu system with submenus might look 
like this:

<menubar id="appmenu">
  <menulabel label="File">
   <menu>
    <menulabel label="New...">
     <menu>
      <command label="New Document" onclick="fnew_document()"/>
      <command label="New Image" onclick="fnew_image()"/>
      <command label="New Database" onclick="fnew_database()"/>
     </menu>
    </menulabel>
    <command label="Open..." onclick="fopen()"/>
    <command label="Save" onclick="fsave()" id="save"/>
    <command label="Save as..." onclick="fsaveas()"/>
   </menu>
  </menulabel>
</menubar>

    As you can see, in this scenario, <menulabel> is at the same level 
as <command> element.[4] It will naturally have some of the 
characteristics of <command>. Therefore, some of the attributes of 
<command> may need to be transferred to <menulabel> when it's used to 
open a submenu rather than a menu. Here are some of the attributes we 
should look at...

    |title| - Some programs do have values like this for submenu labels.

    |icon| - I'm not sure if this is necessary, but might be nice.

    |hide| - You may not always want a submenu label visible.

    |disabled| - You may not always want a submenu label enabled.

    |default| - If the menu is being used for navigation, you may want 
the submenu label to be shown as a default if the page you are currently 
on is within the submenu (and also set as the default). I actually 
worked on an in-house application where my supervisor specifically asked 
for this kind of feature.

    At any rate, I think there's still a lot to work on with the markup 
for menus. Let's kick this conversation into high gear.


[1]<http://www.whatwg.org/specs/web-apps/current-work/#tutorial>
[2]<http://www.whatwg.org/specs/web-apps/current-work/#using>
[3]<http://www.whatwg.org/specs/web-apps/current-work/#the-menulabel>
[4]<http://www.whatwg.org/specs/web-apps/current-work/#the-command0>