Accessibility / bug fixes for menubar

Author: hanshillen

tests/visual/menu/menubar.js

@@ -13,20 +13,28 @@ $.widget("ui.menubar", {
    },
 	_create: function() {
 		var self = this;
-		var items = this.items = this.element.children("button, a");
+		var items = this.items = this.element.children("li")
+			.addClass("ui-menubar-item")
+			.attr("role", "presentation")
+			.children("button, a");
 		items.slice(1).attr("tabIndex", -1);
 		var o = this.options;
 
-		this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix');
+		this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix').attr("role", "menubar");
 		this._focusable(items);
 		this._hoverable(items);
 		items.next("ul").each(function(i, elm) {
 			$(elm).menu({
 				select: function(event, ui) {
-					ui.item.parents("ul:last").hide()
-					self.options.select.apply(this, arguments);
+					ui.item.parents("ul.ui-menu:last").hide();
+					self._trigger( "select", event, ui );
+					self._close();
+					$(event.target).prev().focus();
 				}
-			}).hide().keydown(function(event) {
+			}).hide()
+			.attr("aria-hidden", "true")
+			.attr("aria-expanded", "false")
+			.keydown(function(event) {
 				var menu = $(this);
 				if (menu.is(":hidden")) 
 					return;
@@ -40,9 +48,13 @@ $.widget("ui.menubar", {
 					self._right(event);
 					event.preventDefault();
 					break;
+				case $.ui.keyCode.TAB:
+					self.open= false;
+					break;
 				};
 			}).blur(function( event ) {
-				self._close( event );
+				if (!self.open)
+					self._close( event );
 			});
 		});
 		items.each(function() {
@@ -60,7 +72,7 @@ $.widget("ui.menubar", {
 					self._close();
 					return;
 				}
-   				if (self.open || event.type == "click") {
+   				if ((self.open && event.type == "mouseenter") || event.type == "click") {
    					self._open(event, menu);
    				}
    			})
@@ -83,6 +95,8 @@ $.widget("ui.menubar", {
 				}
 			})
 			.addClass("ui-button ui-widget ui-button-text-only ui-menubar-link")
+			.attr("role", "menuitem")
+			.attr("aria-haspopup", "true")
 			.wrapInner("<span class='ui-button-text'></span>");
 
 			if (o.menuIcon) {
@@ -108,15 +122,45 @@ $.widget("ui.menubar", {
 					if (self.active.menu("left", event) !== true) {
 						var active = self.active;
 						self.active.blur();
+						self._close( event );
 						active.prev().focus();
 					}
 				}
 			}
 		});
 	},
+	_destroy : function() {
+		var items = this.element.children("li")
+			.removeClass("ui-menubar-item")
+			.removeAttr("role", "presentation")
+			.children("button, a");
+		
+		this.element.removeClass('ui-menubar ui-widget-header ui-helper-clearfix').removeAttr("role", "menubar").unbind(".menubar");;
+		items.unbind("focusin focusout click focus mouseenter keydown");
+		
+			items
+			.removeClass("ui-button ui-widget ui-button-text-only ui-menubar-link")
+			.removeAttr("role", "menuitem")
+			.removeAttr("aria-haspopup", "true")
+			.children("span.ui-button-text").each(function(i, e) {
+				var item = $(this);
+				item.parent().html(item.html());
+			});
+		$(document).unbind(".menubar");
+
+		//TODO remove icons
+		
+		this.element.find(":ui-menu").menu("destroy")
+		.show()
+		.removeAttr("aria-hidden", "true")
+		.removeAttr("aria-expanded", "false")
+		.removeAttr("tabindex")
+		.unbind("keydown", "blur")
+		;
+	},
 
 	_close: function() {
-		this.active.menu("closeAll").hide();
+		this.active.menu("closeAll").hide().attr("aria-hidden", "true").attr("aria-expanded", "false");
 		this.active.prev().removeClass("ui-state-active").removeAttr("tabIndex");
 		this.active = null;
 		var self = this;
@@ -133,7 +177,7 @@ $.widget("ui.menubar", {
 		}
 		// almost the same as _close above, but don't remove tabIndex
 		if (this.active) {
-			this.active.menu("closeAll").hide();
+			this.active.menu("closeAll").hide().attr("aria-hidden", "true").attr("aria-expanded", "false");
 			this.active.prev().removeClass("ui-state-active");
 		}
 		clearTimeout(this.timer);
@@ -144,44 +188,52 @@ $.widget("ui.menubar", {
 			my: "left top",
 			at: "left bottom",
 			of: button
-		}).focus();
+		})
+		.removeAttr("aria-hidden").attr("aria-expanded", "true")
+		.menu("focus", event, menu.children("li").first())
+		.focus();
+		
 	},
 
 	_prev: function( event, button ) {
 		button.attr("tabIndex", -1);
-		var prev = button.prevAll( ".ui-button" ).eq( 0 );
+		var prev = button.parent().prevAll("li").children( ".ui-button" ).eq( 0 );
 		if (prev.length) {
 			prev.removeAttr("tabIndex")[0].focus();
 		} else {
-			this.element.children(".ui-button:last").removeAttr("tabIndex")[0].focus();
+			var lastItem = this.element.children("li:last").children(".ui-button:last");
+			lastItem.removeAttr("tabIndex")[0].focus();
 		}
 	},
 
 	_next: function( event, button ) {
 		button.attr("tabIndex", -1);
-		var next =  button.nextAll( ".ui-button" ).eq( 0 );
+		var next = button.parent().nextAll("li").children( ".ui-button" ).eq( 0 );
 		if (next.length) {
 			next.removeAttr("tabIndex")[0].focus();
 		} else {
-			this.element.children(".ui-button:first").removeAttr("tabIndex")[0].focus();
+			var firstItem = this.element.children("li:first").children(".ui-button:first");
+			firstItem.removeAttr("tabIndex")[0].focus();
 		}
 	},
 
 	_left: function(event) {
-		var prev = this.active.prevAll( ".ui-menu" ).eq( 0 );
+		var prev = this.active.parent().prevAll("li:eq(0)").children( ".ui-menu" ).eq( 0 );
 		if (prev.length) {
 			this._open(event, prev);
 		} else {
-			this._open(event, this.element.children(".ui-menu:last"));
+			var lastItem = this.element.children("li:last").children(".ui-menu:first");
+			this._open(event, lastItem);
 		}
 	},
 
 	_right: function(event) {
-		var next =  this.active.nextAll( ".ui-menu" ).eq( 0 );
+		var next = this.active.parent().nextAll("li:eq(0)").children( ".ui-menu" ).eq( 0 );
 		if (next.length) {
 			this._open(event, next);
 		} else {
-			this._open(event, this.element.children(".ui-menu:first"));
+			var firstItem = this.element.children("li:first").children(".ui-menu:first");
+			this._open(event, firstItem);
 		}
 	}
 });