From 133137b39b87e21fd1f49e170fbcf0e7c76a442b Mon Sep 17 00:00:00 2001 From: jzaefferer Date: Thu, 17 Mar 2011 15:10:25 +0100 Subject: [PATCH] Menubar: Focus/tab handling, improved much --- tests/visual/menu/menubar.js | 57 ++++++++++++++++++++++++++++-------- 1 file changed, 45 insertions(+), 12 deletions(-) diff --git a/tests/visual/menu/menubar.js b/tests/visual/menu/menubar.js index 9826a7e69..19e9ed630 100644 --- a/tests/visual/menu/menubar.js +++ b/tests/visual/menu/menubar.js @@ -14,6 +14,7 @@ $.widget("ui.menubar", { _create: function() { var self = this; var items = this.items = this.element.children("button, a"); + items.slice(1).attr("tabIndex", -1); var o = this.options; this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix'); @@ -32,19 +33,16 @@ $.widget("ui.menubar", { event.stopPropagation(); switch (event.keyCode) { case $.ui.keyCode.LEFT: - self.left(event); + self._left(event); event.preventDefault(); break; case $.ui.keyCode.RIGHT: - self.right(event); + self._right(event); event.preventDefault(); break; }; }).blur(function() { - $(this).hide().prev().removeClass("ui-state-active").removeAttr("tabIndex"); - self.timer = setTimeout(function() { - self.open = false; - }, 13); + self._close(); }); }); items.each(function() { @@ -64,11 +62,20 @@ $.widget("ui.menubar", { }) .bind( "keydown", function( event ) { switch ( event.keyCode ) { + case $.ui.keyCode.SPACE: case $.ui.keyCode.UP: case $.ui.keyCode.DOWN: self._open( event, $( this ).next() ); event.preventDefault(); break; + case $.ui.keyCode.LEFT: + self._prev( event, $( this ) ); + event.preventDefault(); + break; + case $.ui.keyCode.RIGHT: + self._next( event, $( this ) ); + event.preventDefault(); + break; } }) .addClass("ui-button ui-widget ui-button-text-only ui-menubar-link") @@ -86,7 +93,7 @@ $.widget("ui.menubar", { }); self._bind(document, { click: function(event) { - !$(event.target).closest(".ui-menubar").length && self._close(); + self.open && !$(event.target).closest(".ui-menubar").length && self._close(); } }) self._bind({ @@ -103,12 +110,18 @@ $.widget("ui.menubar", { }, _close: function() { - this.items.next("ul").hide(); - this.items.removeClass("ui-state-active").removeAttr("tabIndex"); - this.open = false; + this.active.menu("closeAll").hide(); + this.active.prev().removeClass("ui-state-active").removeAttr("tabIndex"); + this.active = null; + var self = this; + // delay for the next focus event to see it as still "open" + self.timer = setTimeout(function() { + self.open = false; + }, 13); }, _open: function(event, menu) { + // TODO refactor with _close if (this.active) { this.active.menu("closeAll").hide(); this.active.prev().removeClass("ui-state-active").removeAttr("tabIndex"); @@ -124,7 +137,27 @@ $.widget("ui.menubar", { }).focus(); }, - left: function(event) { + _prev: function( event, button ) { + button.attr("tabIndex", -1); + var prev = button.prevAll( ".ui-button" ).eq( 0 ); + if (prev.length) { + prev.removeAttr("tabIndex")[0].focus(); + } else { + this.element.children(".ui-button:last").removeAttr("tabIndex")[0].focus(); + } + }, + + _next: function( event, button ) { + button.attr("tabIndex", -1); + var next = button.nextAll( ".ui-button" ).eq( 0 ); + if (next.length) { + next.removeAttr("tabIndex")[0].focus(); + } else { + this.element.children(".ui-button:first").removeAttr("tabIndex")[0].focus(); + } + }, + + _left: function(event) { var prev = this.active.prevAll( ".ui-menu" ).eq( 0 ); if (prev.length) { this._open(event, prev); @@ -133,7 +166,7 @@ $.widget("ui.menubar", { } }, - right: function(event) { + _right: function(event) { var next = this.active.nextAll( ".ui-menu" ).eq( 0 ); if (next.length) { this._open(event, next); -- 2.39.5