Menu: Fix menubar tab and focus handling

jquery · Mar 17, 2011 · 4a04ad2 · 4a04ad2
1 parent a077047
commit 4a04ad2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/tests/visual/menu/menubar.html b/tests/visual/menu/menubar.html
@@ -52,7 +52,7 @@
 		}
 
 		/* menubar styles */
-		.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; }
+		.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
 		.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
 
 		table {

diff --git a/tests/visual/menu/menubar.js b/tests/visual/menu/menubar.js
@@ -17,7 +17,7 @@ $.widget("ui.menubar", {
 		var o = this.options;
 
 		this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix');
-
+		this._focusable(items);
 		items.next("ul").each(function(i, elm) {
 			$(elm).menu({
 				select: function(event, ui) {
@@ -38,11 +38,12 @@ $.widget("ui.menubar", {
 					self.right(event);
 					event.preventDefault();
 					break;
-				case $.ui.keyCode.TAB:
-					self[ event.shiftKey ? "left" : "right" ]( event );
-					event.preventDefault();
-					break;
 				};
+			}).blur(function() {
+				$(this).hide().prev().removeClass("ui-state-active").removeAttr("tabIndex");
+				self.timer = setTimeout(function() {
+					self.open = false;
+				}, 13);
 			});
 		});
 		items.each(function() {
@@ -56,7 +57,7 @@ $.widget("ui.menubar", {
 					self._close();
 					return;
 				}
-   				if (menu.length && (!/^mouse/.test(event.type) || self.active && self.active.is(":visible") )) {
+   				if (menu.length && (self.open || event.type == "click")) {
    					self._open(event, menu);
    				}
    			})
@@ -81,15 +82,19 @@ $.widget("ui.menubar", {
 
 	_close: function() {
 		this.items.next("ul").hide();
-		this.items.removeClass("ui-state-active");
+		this.items.removeClass("ui-state-active").removeAttr("tabIndex");
+		this.open = false;
 	},
 
 	_open: function(event, menu) {
 		if (this.active) {
 			this.active.menu("closeAll").hide();
-			this.active.prev().removeClass("ui-state-active");
+			this.active.prev().removeClass("ui-state-active").removeAttr("tabIndex");
 		}
-		var button = menu.prev().addClass("ui-state-active");
+		clearTimeout(this.timer);
+		this.open = true;
+		// set tabIndex -1 to have the button skipped on shift-tab when menu is open (it gets focus)
+		var button = menu.prev().addClass("ui-state-active").attr("tabIndex", -1);
 		this.active = menu.show().position({
 			my: "left top",
 			at: "left bottom",