library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility / bug fixes for menubar

Browse Source
This commit is contained in:
Hans Hillen 2011-04-15 19:18:58 +02:00
parent f89f0ca61f
commit 8a0df90bf1
1 changed files with 70 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
tests/visual/menu/menubar.js
View File

@ -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("<span class='ui-button-text'></span>");
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);
}
}
});