type: widget

release: ?

status: in development

documentation: n/a

demo: http://view.jqueryui.com/menubar/demos/index.html#menubar

TODOs:

• Can the popup utility be used for  the menubar implementation? Probably needs methods for the menubar to use for handling left/right key navigation (or up/down, for vertical orientation) 
• Add option orientation: vertical|horizontal  
• Add refresh method 
• Overhaul demo
• Overhaul button-related options, figure out what options actually make sense 
• Figure out API for setting top-level menu position and submenu position 
• Write down the spec 
• Write tests
• Write documentation 
• Add a demo ala Wordpress admin menubar: http://bassistance.de/i/40afad.png 

1 - Description:

A horizontal menu with nested vertical flyout menus for each menu item. Wraps the menu widget (which has a lot more links to existing plugins and other references).

A relevant reference is the whatwg html spec on menus.

2 - Visual Design:

See E2:

3 - Functional Specifications/Requirements:

Options:

• option (Type, default: default ) 
  
• description 

Methods:

• method(arguments)
• description

Events:

• event
• descriptions

4 - Markup & Style:

4.1 Initial markup examples 

     Any unordered list:

          <ul>

              <li><a href="/http://google.com">Google</a></li>

              <li><a href="/http://yahoo.com">Yahoo</a></li>

              <li><a href="/http://msn.com">MSN</a></li>

              <li><a href="/http://ask.com">Ask</a></li>

              <li><a href="/http://aol.com">AOL</a></li>

</ul>

     For nested menus, nested unordered lists:

          <ul>

              <li><a href="/http://google.com">Google</a></li>

              <li><a href="/http://yahoo.com">Yahoo</a></li>

              <li><a href="/http://msn.com">MSN</a>

                    <ul>

                         <li><a href="/htp://sub1.example.com">sub-level</a></li>

                        <li><a href="/http://sub2.example.com">sub-level</a></li>

                    </ul>

               </li>

              <li><a href="/http://ask.com">Ask</a></li>

              <li><a href="/http://aol.com">AOL</a></li>

</ul>

4.2 Recommended transformed HTML markup

TODO

4.3 Accessibility recommendations

ARIA markup:

Use the following roles:

• role="menubar" for menubar <ul>
• role="menu" for submenu <ul> elements
• role="menuitem" for (sub)menu items *
• role="menuitemradio" and role="menuitemcheckox" for checkable menu items
• Role="presentation" for menuitem containers that are not needed in the exposed accessible menubar structure* 

Use the following states:

• aria-expanded="true/false" for branch menu items
• aria-hidden="true/false" for submenus
• aria-activedescendant="<id of active menuitem>" to track focus
• aria-labelledby="<id of parent menu item>"

* Support for ARIA menubars by screen readers such as JAWS is erratic at best, specifically in internet explorer. It seems support is more consistent when placing the role="menuitem" element adjacent to its submenu, as opposed to nesting the submenu inside the menuitem element (which is what regular nested html lists do). Because of this it's recommended to set role="presentation" on the <li> element and role="menuitem" on the <a> element inside of it.

To associate submenus with their parent menu(bar) items we need an aria-labelledby attribute on the submenu elements that point to the ID of the parent menu item. The downside is that you would have set ID values on those menu items, which would also conflict with the ID value bring added and removed by the menubar's  aria-activedescendant attribute. An easier solution would be to use the aria-label attribute, which just takes the submenu's accessible name as a string. The downside there is that IE does not support this attribute yet. The other option is to add the submenu's name as a title attribute, which works on all browsers and does not requires IDs. But of course the downside there is that you get unwanted tooltips as a side effect.

Keyboard navigation

In general the menubar needs to behave like in a desktop environment. It should be possible to use the left and right arrow keys to open the adjacent sub menu in the bar. It should also be possible to navigate the menubar items sideways without automatically expanding their sub menus (unless the current menubar item was already expanded).

Optionally, there could be a shortcut to move focus to the menu from any point in the web application. Selecting an item in the menubar should ten attempt to move focus back to where it was when the menubar shortcut was triggered

High contrast support

The sub menu indicators as well as checkable indicators must be visible in high contrast mode.

4.4 CSS & Theme

TODO

5 - Latest version of plugin:

http://view.jqueryui.com/master/demos/menubar/default.html

6 - Open issues being discussed

• Adjust keyboard handling based on orientation? How does the screenreader know what the orientation is? Does aria-orientation work here?
• Should menubar allow top-level regular links, without submenus? Currently those aren't handled correctly