Menu: Fix menubar tab and focus handling

diff --git a/tests/visual/menu/menubar.html b/tests/visual/menu/menubar.html
index 930f23cc5710c4ae0af8c1cd914b9b7b3a7ae047..5847c623f1d81b6447cc2c49fe656a832c006710 100644 (file)
--- 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
index afddd76a6e79933471038e5cb4188e35f426b5d7..af431f43bb8e9b21f33ff6412ca17664f0f9547a 100644 (file)
--- 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",