From 8a0df90bf1650961952bdc251d19d29aeb0effeb Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Fri, 15 Apr 2011 19:18:58 +0200 Subject: Accessibility / bug fixes for menubar --- tests/visual/menu/menubar.js | 88 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 70 insertions(+), 18 deletions(-) (limited to 'tests/visual/menu/menubar.js') 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); } } }); -- cgit v1.2.3 From e448cd076153500f178878abfa7db7631d452ad8 Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Fri, 15 Apr 2011 20:31:43 +0200 Subject: Added icon removal to _destroy --- tests/visual/menu/menubar.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'tests/visual/menu/menubar.js') diff --git a/tests/visual/menu/menubar.js b/tests/visual/menu/menubar.js index 7fb3aea36..453f5fae7 100644 --- a/tests/visual/menu/menubar.js +++ b/tests/visual/menu/menubar.js @@ -129,6 +129,7 @@ $.widget("ui.menubar", { } }); }, + _destroy : function() { var items = this.element.children("li") .removeClass("ui-menubar-item") @@ -138,17 +139,18 @@ $.widget("ui.menubar", { 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") + items + .removeClass("ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default") .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"); + }) + .end() + .children(".ui-icon").remove(); - //TODO remove icons + $(document).unbind(".menubar"); this.element.find(":ui-menu").menu("destroy") .show() -- cgit v1.2.3 From d77185a5a115174cf6ab8bf5224f652124008e19 Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Mon, 18 Apr 2011 23:05:50 +0200 Subject: Fix "menubar does not collapse when clicking on other menubar" + minor changes --- tests/visual/menu/menubar.html | 4 ++-- tests/visual/menu/menubar.js | 10 +++++++--- ui/jquery.ui.menu.js | 1 + 3 files changed, 10 insertions(+), 5 deletions(-) (limited to 'tests/visual/menu/menubar.js') diff --git a/tests/visual/menu/menubar.html b/tests/visual/menu/menubar.html index c5b63ae86..1b4b331f6 100644 --- a/tests/visual/menu/menubar.html +++ b/tests/visual/menu/menubar.html @@ -55,13 +55,13 @@ .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; } - ol.ui-menubar, ul.ui-menubar { + .ui-menubar, .ui-menubar { list-style: none; margin-left: 0; padding-left: 0; } - li.ui-menubar-item { + .ui-menubar-item { float: left; } diff --git a/tests/visual/menu/menubar.js b/tests/visual/menu/menubar.js index 453f5fae7..e6f6ab069 100644 --- a/tests/visual/menu/menubar.js +++ b/tests/visual/menu/menubar.js @@ -67,7 +67,6 @@ $.widget("ui.menubar", { return; } event.preventDefault(); - event.stopPropagation(); if (event.type == "click" && menu.is(":visible") && self.active && self.active[0] == menu[0]) { self._close(); return; @@ -111,8 +110,11 @@ $.widget("ui.menubar", { }); self._bind(document, { click: function(event) { - if (self.open && !$(event.target).closest(".ui-menubar").length) { - self._close(); + if (self.open) { + var menubar = $(event.target).closest(".ui-menubar"); + if (!menubar.length || menubar.get(0) !== self.element.get(0)) { + self._close(); + } } } }) @@ -162,6 +164,8 @@ $.widget("ui.menubar", { }, _close: function() { + if (!this.active || !this.active.length) + return; 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; diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 0b2852f06..0a06fe0b5 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -319,6 +319,7 @@ $.widget("ui.menu", { if (newItem && newItem.length) { this._open(newItem.parent()); var current = this.active; + //timeout so Firefox will not hide activedescendant change in expanding submenu from AT setTimeout(function(){self.focus(event, newItem)}, 20); return true; } -- cgit v1.2.3 From 03132f93fc961fc23771b1784ada7d46c104dea1 Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Wed, 20 Apr 2011 20:15:26 +0200 Subject: Fix menubar escape key + minor css fix --- tests/visual/menu/menubar.html | 4 ++-- tests/visual/menu/menubar.js | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) (limited to 'tests/visual/menu/menubar.js') diff --git a/tests/visual/menu/menubar.html b/tests/visual/menu/menubar.html index 1b4b331f6..d2185e97c 100644 --- a/tests/visual/menu/menubar.html +++ b/tests/visual/menu/menubar.html @@ -55,9 +55,9 @@ .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; } - .ui-menubar, .ui-menubar { + .ui-menubar { list-style: none; - margin-left: 0; + margin: 0; padding-left: 0; } diff --git a/tests/visual/menu/menubar.js b/tests/visual/menu/menubar.js index e6f6ab069..13a508811 100644 --- a/tests/visual/menu/menubar.js +++ b/tests/visual/menu/menubar.js @@ -38,7 +38,6 @@ $.widget("ui.menubar", { var menu = $(this); if (menu.is(":hidden")) return; - event.stopPropagation(); switch (event.keyCode) { case $.ui.keyCode.LEFT: self._left(event); @@ -119,7 +118,7 @@ $.widget("ui.menubar", { } }) self._bind({ - keyup: function(event) { + keydown: function(event) { if (event.keyCode == $.ui.keyCode.ESCAPE && self.open) { if (self.active.menu("left", event) !== true) { var active = self.active; -- cgit v1.2.3 From 45c418d29327c83a54c06553ad0f7505ede64cbb Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Fri, 22 Apr 2011 20:22:16 +0200 Subject: Added focusin & focusout handler for menubar --- tests/visual/menu/menubar.js | 44 ++++++++++++++++---------------------------- 1 file changed, 16 insertions(+), 28 deletions(-) (limited to 'tests/visual/menu/menubar.js') diff --git a/tests/visual/menu/menubar.js b/tests/visual/menu/menubar.js index 13a508811..0fd5d0ecd 100644 --- a/tests/visual/menu/menubar.js +++ b/tests/visual/menu/menubar.js @@ -47,14 +47,8 @@ $.widget("ui.menubar", { self._right(event); event.preventDefault(); break; - case $.ui.keyCode.TAB: - self.open= false; - break; }; - }).blur(function( event ) { - if (!self.open) - self._close( event ); - }); + }) }); items.each(function() { var input = $(this), @@ -107,19 +101,9 @@ $.widget("ui.menubar", { }; }); - self._bind(document, { - click: function(event) { - if (self.open) { - var menubar = $(event.target).closest(".ui-menubar"); - if (!menubar.length || menubar.get(0) !== self.element.get(0)) { - self._close(); - } - } - } - }) self._bind({ keydown: function(event) { - if (event.keyCode == $.ui.keyCode.ESCAPE && self.open) { + if (event.keyCode == $.ui.keyCode.ESCAPE) { if (self.active.menu("left", event) !== true) { var active = self.active; self.active.blur(); @@ -127,6 +111,14 @@ $.widget("ui.menubar", { active.prev().focus(); } } + }, + focusout : function( event ) { + self.closeTimer = setTimeout(function() { + self._close( event ); + }, 100); + }, + focusin :function( event ) { + clearTimeout(self.closeTimer); } }); }, @@ -158,7 +150,7 @@ $.widget("ui.menubar", { .removeAttr("aria-hidden", "true") .removeAttr("aria-expanded", "false") .removeAttr("tabindex") - .unbind("keydown", "blur") + .unbind("keydown", "blur", "focusin", "focusout") ; }, @@ -168,11 +160,7 @@ $.widget("ui.menubar", { 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; - // delay for the next focus event to see it as still "open" - self.timer = setTimeout(function() { - self.open = false; - }, 13); + self.open = false; }, _open: function(event, menu) { @@ -185,8 +173,6 @@ $.widget("ui.menubar", { this.active.menu("closeAll").hide().attr("aria-hidden", "true").attr("aria-expanded", "false"); this.active.prev().removeClass("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({ @@ -196,8 +182,10 @@ $.widget("ui.menubar", { }) .removeAttr("aria-hidden").attr("aria-expanded", "true") .menu("focus", event, menu.children("li").first()) - .focus(); - + .focus() + .focusin() + ; + self.open = true; }, _prev: function( event, button ) { -- cgit v1.2.3 From 42e11d8e41253571d67a7e1a62caa9376771c292 Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Fri, 22 Apr 2011 23:11:53 +0200 Subject: Fix error for Escape key on menubar item --- tests/visual/menu/menubar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'tests/visual/menu/menubar.js') diff --git a/tests/visual/menu/menubar.js b/tests/visual/menu/menubar.js index 0fd5d0ecd..8c0bd4904 100644 --- a/tests/visual/menu/menubar.js +++ b/tests/visual/menu/menubar.js @@ -104,7 +104,7 @@ $.widget("ui.menubar", { self._bind({ keydown: function(event) { if (event.keyCode == $.ui.keyCode.ESCAPE) { - if (self.active.menu("left", event) !== true) { + if (self.active && self.active.menu("left", event) !== true) { var active = self.active; self.active.blur(); self._close( event ); -- cgit v1.2.3 From 54795b56509cb5562fb9385ae59f10552df5cd78 Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Sat, 23 Apr 2011 17:31:25 +0200 Subject: change self.open to this.open --- tests/visual/menu/menubar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'tests/visual/menu/menubar.js') diff --git a/tests/visual/menu/menubar.js b/tests/visual/menu/menubar.js index 8c0bd4904..8e2d51e30 100644 --- a/tests/visual/menu/menubar.js +++ b/tests/visual/menu/menubar.js @@ -160,7 +160,7 @@ $.widget("ui.menubar", { 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; - self.open = false; + this.open = false; }, _open: function(event, menu) { @@ -185,7 +185,7 @@ $.widget("ui.menubar", { .focus() .focusin() ; - self.open = true; + this.open = true; }, _prev: function( event, button ) { -- cgit v1.2.3 From f7d2fdbab8f6e0ea37fb02f9458489990305ff2f Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Sat, 23 Apr 2011 17:35:03 +0200 Subject: removed unbind for focusin and focusout --- tests/visual/menu/menubar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'tests/visual/menu/menubar.js') diff --git a/tests/visual/menu/menubar.js b/tests/visual/menu/menubar.js index 8e2d51e30..cc3258d4a 100644 --- a/tests/visual/menu/menubar.js +++ b/tests/visual/menu/menubar.js @@ -150,7 +150,7 @@ $.widget("ui.menubar", { .removeAttr("aria-hidden", "true") .removeAttr("aria-expanded", "false") .removeAttr("tabindex") - .unbind("keydown", "blur", "focusin", "focusout") + .unbind("keydown", "blur") ; }, -- cgit v1.2.3