button: add ui-state-focus on focus, making keyboard navigation possible, and button like 200% more accessible

This commit is contained in:
Jörn Zaefferer 2010-01-20 17:44:54 +00:00
parent d01e785c98
commit dab6e943b3

View File

@ -34,7 +34,8 @@ $.widget( "ui.button", {
var self = this, var self = this,
options = this.options, options = this.options,
toggleButton = this.type === "checkbox" || this.type === "radio", toggleButton = this.type === "checkbox" || this.type === "radio",
hoverClass = "ui-state-hover" + ( !toggleButton ? " ui-state-active" : "" ); hoverClass = "ui-state-hover" + ( !toggleButton ? " ui-state-active" : "" ),
focusClass = "ui-state-focus";
if ( options.label === null ) { if ( options.label === null ) {
options.label = this.buttonElement.html(); options.label = this.buttonElement.html();
@ -57,6 +58,13 @@ $.widget( "ui.button", {
return; return;
} }
$( this ).removeClass( hoverClass ); $( this ).removeClass( hoverClass );
})
.bind( "focus.button", function() {
// no need to check disabled, focus won't be triggered anyway
$( this ).addClass( focusClass );
})
.bind( "blur.button", function() {
$( this ).removeClass( focusClass );
}); });
if ( this.type === "checkbox") { if ( this.type === "checkbox") {