diff --git a/tests/visual/menu/menubar.js b/tests/visual/menu/menubar.js index 6c8173cd9..7fb3aea36 100644 --- a/tests/visual/menu/menubar.js +++ b/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(""); 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); } } });