type: widget

release: 1.9

status: in development

documentation: N/A

demo: http://view.jqueryui.com/menubar/demos/popup/default.html

TODOs   

• add "tooltip"-popup (mouseover opens popup) demo 
• The resulting popup needs to be interactive, e.g. text inside the popup can be selected or a link clicked. 
• add "facebook header notification" demo: http://bassistance.de/i/a62642.png
• some trigger opens a popup that has links or other interactive elements. Contained content must work normally, not close the popup unexpectedly. 
• Fix popups with menus in IE6. Submenus are not visible 
• write unit tests
• write documentation 

1 - Description:

A widget that provides the glue code between a popup widget like a menu and it's trigger, like a button. It handles the necessary mouse and keyboard interaction to show the popup on click or enter and hide it on click on the trigger our outside of it (but not on the popup itself) as well as a Escape keypress.

It also adds the necessary aria-roles and other attributes for a screenreader to understand what's going on.

The widget itself has no visible UI, it just combines other widegts.

The widget uses the position utility to position the popup and exposing its configuration for customization.

2 - Visual Design:

None, see above.

3 - Functional Specifications/Requirements:

(Detailed description of how the script will be structured: defaults, options, architecture, extensibility, etc.)

Options:

• trigger (Selector, default: this.element.prev())
• the element to work as a trigger
• If nothing gets specified, will be set to the previous element (this.element.prev())  
• position (Object, default: { my: "left top", at: "left bottom" } )
• configuration for the position utility, controls the position of the popup relative to the trigger
• only my and at are required properties, of will get set at runtime 

Methods:

• open
• opens the popup 
• close
• closes the popup

Events:

• open
• when the popup was opened 
• close
• when the popup was closed 

Mouse/keyboard interaction:

• binds a click to a trigger element (e.g. a button) to open a popup element (e.g. a menu), position it relative to the trigger (configurable) and handle ESCAPE key event to close and move focus back to the trigger if it had focus when clicked (not the case for a div without tabindex.
• Handle clicking outside to close it, without moving focus back. Set aria-haspopup="true" and aria-owns="<popup id>" on trigger element. Generate an id on the popup element if none exists.
• If the popup element has no role attribute, add a role of tooltip or dialog (undecided). Add aria-hidden="true" to the popup, set to false when showing the popup. Add aria-expanded="false" to the popup, set to true when showing the popup.

4 - Markup & Style:

4.1 Initial markup examples

None

4.2 Recommended transformed HTML markup

None

4.3 Accessibility recommendation

See above

4.4 CSS & Theme

None

5 - Latest version of plugin:

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

6 - Open issues being discussed