Skip to content

Commit

Permalink
Use .attr() for boolean ARIA attributes.
Browse files Browse the repository at this point in the history
  • Loading branch information
@scottgonzalez
scottgonzalez committed Jul 12, 2011
1 parent da84672 commit 0080f2d
Show file tree
Hide file tree
Showing 9 changed files with 77 additions and 78 deletions.
16 changes: 8 additions & 8 deletions tests/unit/accordion/accordion_core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,15 @@ test( "accessibility", function () {
equals( element.attr( "role" ), "tablist", "main role" );
equals( headers.attr( "role" ), "tab", "tab roles" );
equals( headers.next().attr( "role" ), "tabpanel", "tabpanel roles" );
equals( headers.eq( 1 ).prop( "aria-expanded" ), true, "active tab has aria-expanded" );
equals( headers.eq( 0 ).prop( "aria-expanded" ), false, "inactive tab has aria-expanded" );
equals( headers.eq( 1 ).prop( "aria-selected" ), true, "active tab has aria-selected" );
equals( headers.eq( 0 ).prop( "aria-selected" ), false, "inactive tab has aria-selected" );
equals( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab has aria-expanded" );
equals( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded" );
equals( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected" );
equals( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" );
element.accordion( "option", "active", 0 );
equals( headers.eq( 0 ).prop( "aria-expanded" ), true, "newly active tab has aria-expanded" );
equals( headers.eq( 1 ).prop( "aria-expanded" ), false, "newly inactive tab has aria-expanded" );
equals( headers.eq( 0 ).prop( "aria-selected" ), true, "active tab has aria-selected" );
equals( headers.eq( 1 ).prop( "aria-selected" ), false, "inactive tab has aria-selected" );
equals( headers.eq( 0 ).attr( "aria-expanded" ), "true", "newly active tab has aria-expanded" );
equals( headers.eq( 1 ).attr( "aria-expanded" ), "false", "newly inactive tab has aria-expanded" );
equals( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected" );
equals( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" );
});

}( jQuery ) );
4 changes: 2 additions & 2 deletions tests/unit/progressbar/progressbar_core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ test("accessibility", function() {
el.progressbar("value", 77);
equals(el.attr("aria-valuenow"), 77, "aria-valuenow");
el.progressbar("disable");
equals(el.prop("aria-disabled"), true, "aria-disabled on");
equals(el.attr("aria-disabled"), "true", "aria-disabled on");
el.progressbar("enable");
// FAIL: for some reason IE6 and 7 return a boolean false instead of the string
equals(el.prop("aria-disabled"), false, "aria-disabled off");
equals(el.attr("aria-disabled"), "false", "aria-disabled off");
});

})(jQuery);
39 changes: 19 additions & 20 deletions ui/jquery.ui.accordion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,24 +78,23 @@ $.widget( "ui.accordion", {

self.headers
.not( self.active )
.prop({
"aria-expanded": false,
"aria-selected": false
.attr({
"aria-expanded": "false",
"aria-selected": "false",
tabIndex: -1
})
.attr( "tabIndex", -1 )
.next()
.hide();

// make sure at least one header is in the tab order
if ( !self.active.length ) {
self.headers.eq( 0 ).attr( "tabIndex", 0 );
} else {
self.active
.prop({
"aria-expanded": true,
"aria-selected": true
})
.attr( "tabIndex", 0 );
self.active.attr({
"aria-expanded": "true",
"aria-selected": "true",
tabIndex: 0
});
}

// only need links in tab order for Safari
Expand Down Expand Up @@ -135,8 +134,8 @@ $.widget( "ui.accordion", {
.unbind( ".accordion" )
.removeClass( "ui-accordion-header ui-accordion-disabled ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-state-disabled ui-corner-top" )
.removeAttr( "role" )
.removeProp( "aria-expanded" )
.removeProp( "aria-selected" )
.removeAttr( "aria-expanded" )
.removeAttr( "aria-selected" )
.removeAttr( "tabIndex" )
.find( "a" )
.removeAttr( "tabIndex" )
Expand Down Expand Up @@ -393,18 +392,18 @@ $.widget( "ui.accordion", {

// TODO assert that the blur and focus triggers are really necessary, remove otherwise
toHide.prev()
.prop({
"aria-expanded": false,
"aria-selected": false
.attr({
"aria-expanded": "false",
"aria-selected": "false",
tabIndex: -1
})
.attr( "tabIndex", -1 )
.blur();
toShow.prev()
.prop({
"aria-expanded": true,
"aria-selected": true
.attr({
"aria-expanded": "true",
"aria-selected": "true",
tabIndex: 0
})
.attr( "tabIndex", 0 )
.focus();
},

Expand Down
6 changes: 3 additions & 3 deletions ui/jquery.ui.autocomplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,9 @@ $.widget( "ui.autocomplete", {
// TODO verify these actually work as intended
.attr({
role: "textbox",
"aria-autocomplete": "list"
"aria-autocomplete": "list",
"aria-haspopup": "true"
})
.prop( "aria-haspopup", true )
.bind( "keydown.autocomplete", function( event ) {
if ( self.options.disabled || self.element.prop( "readonly" ) ) {
suppressKeyPress = true;
Expand Down Expand Up @@ -268,7 +268,7 @@ $.widget( "ui.autocomplete", {
.removeAttr( "autocomplete" )
.removeAttr( "role" )
.removeAttr( "aria-autocomplete" )
.removeProp( "aria-haspopup" );
.removeAttr( "aria-haspopup" );
this.menu.element.remove();
},

Expand Down
16 changes: 8 additions & 8 deletions ui/jquery.ui.button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,15 +147,15 @@ $.widget( "ui.button", {
return false;
}
$( this ).toggleClass( "ui-state-active" );
self.buttonElement.prop( "aria-pressed", self.element[0].checked );
self.buttonElement.attr( "aria-pressed", self.element[0].checked );
});
} else if ( this.type === "radio" ) {
this.buttonElement.bind( "click.button", function() {
if ( options.disabled || clickDragged ) {
return false;
}
$( this ).addClass( "ui-state-active" );
self.buttonElement.prop( "aria-pressed", true );
self.buttonElement.attr( "aria-pressed", "true" );

var radio = self.element[ 0 ];
radioGroup( radio )
Expand All @@ -164,7 +164,7 @@ $.widget( "ui.button", {
return $( this ).button( "widget" )[ 0 ];
})
.removeClass( "ui-state-active" )
.prop( "aria-pressed", false );
.attr( "aria-pressed", "false" );
});
} else {
this.buttonElement
Expand Down Expand Up @@ -260,7 +260,7 @@ $.widget( "ui.button", {
this.buttonElement
.removeClass( baseClasses + " " + stateClasses + " " + typeClasses )
.removeAttr( "role" )
.removeProp( "aria-pressed" )
.removeAttr( "aria-pressed" )
.html( this.buttonElement.find(".ui-button-text").html() );

if ( !this.hasTitle ) {
Expand Down Expand Up @@ -291,22 +291,22 @@ $.widget( "ui.button", {
if ( $( this ).is( ":checked" ) ) {
$( this ).button( "widget" )
.addClass( "ui-state-active" )
.prop( "aria-pressed", true );
.attr( "aria-pressed", "true" );
} else {
$( this ).button( "widget" )
.removeClass( "ui-state-active" )
.prop( "aria-pressed", false );
.attr( "aria-pressed", "false" );
}
});
} else if ( this.type === "checkbox" ) {
if ( this.element.is( ":checked" ) ) {
this.buttonElement
.addClass( "ui-state-active" )
.prop( "aria-pressed", true );
.attr( "aria-pressed", "true" );
} else {
this.buttonElement
.removeClass( "ui-state-active" )
.prop( "aria-pressed", false );
.attr( "aria-pressed", "false" );
}
}
},
Expand Down
24 changes: 12 additions & 12 deletions ui/jquery.ui.menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,8 +178,8 @@ $.widget("ui.menu", {
.removeAttr( "role" )
.removeAttr("tabIndex")
.removeAttr( "aria-labelledby" )
.removeProp( "aria-expanded" )
.removeProp( "aria-hidden" )
.removeAttr( "aria-expanded" )
.removeAttr( "aria-hidden" )
.show();

//destroy menu items
Expand All @@ -191,7 +191,7 @@ $.widget("ui.menu", {
.removeClass( "ui-corner-all ui-state-hover" )
.removeAttr( "tabIndex" )
.removeAttr( "role" )
.removeProp( "aria-haspopup" )
.removeAttr( "aria-haspopup" )
.removeAttr( "id" )
.children(".ui-icon").remove();
},
Expand All @@ -203,9 +203,9 @@ $.widget("ui.menu", {
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
.attr("role", "menu")
.hide()
.prop({
"aria-hidden": true,
"aria-expanded": false
.attr({
"aria-hidden": "true",
"aria-expanded": "false"
});

// don't refresh list items that are already adapted
Expand All @@ -222,7 +222,7 @@ $.widget("ui.menu", {
submenus.each(function() {
var menu = $(this);
var item = menu.prev("a")
item.prop("aria-haspopup", true)
item.attr("aria-haspopup", "true")
.prepend('<span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span>');
menu.attr("aria-labelledby", item.attr("id"));
});
Expand Down Expand Up @@ -290,34 +290,34 @@ $.widget("ui.menu", {

_open: function(submenu) {
clearTimeout(this.timer);
this.element.find(".ui-menu").not(submenu.parents()).hide().prop("aria-hidden", true);
this.element.find(".ui-menu").not(submenu.parents()).hide().attr("aria-hidden", "true");
var position = $.extend({}, {
of: this.active
}, $.type(this.options.position) == "function"
? this.options.position(this.active)
: this.options.position
);
submenu.show().removeProp("aria-hidden").prop("aria-expanded", true).position(position);
submenu.show().removeAttr("aria-hidden").attr("aria-expanded", "true").position(position);
},

closeAll: function() {
this.element
.find("ul").hide().prop("aria-hidden", true).prop("aria-expanded", false).end()
.find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end()
.find("a.ui-state-active").removeClass("ui-state-active");
this.blur();
this.activeMenu = this.element;
},

_close: function() {
this.active.parent()
.find("ul").hide().prop("aria-hidden", true).prop("aria-expanded", false).end()
.find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end()
.find("a.ui-state-active").removeClass("ui-state-active");
},

left: function(event) {
var newItem = this.active && this.active.parents("li:not(.ui-menubar-item)").first();
if (newItem && newItem.length) {
this.active.parent().prop("aria-hidden", true).prop("aria-expanded", false).hide();
this.active.parent().attr("aria-hidden", "true").attr("aria-expanded", "false").hide();
this.focus(event, newItem);
return true;
}
Expand Down
30 changes: 15 additions & 15 deletions ui/jquery.ui.menubar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,9 @@ $.widget( "ui.menubar", {
}
})
.hide()
.prop({
"aria-hidden": true,
"aria-expanded": false
.attr({
"aria-hidden": "true",
"aria-expanded": "false"
})
.bind( "keydown.menubar", function( event ) {
var menu = $( this );
Expand Down Expand Up @@ -108,7 +108,7 @@ $.widget( "ui.menubar", {
})
.addClass( "ui-button ui-widget ui-button-text-only ui-menubar-link" )
.attr( "role", "menuitem" )
.prop( "aria-haspopup", true )
.attr( "aria-haspopup", "true" )
.wrapInner( "<span class='ui-button-text'></span>" );

// TODO review if these options are a good choice, maybe they can be merged
Expand Down Expand Up @@ -158,7 +158,7 @@ $.widget( "ui.menubar", {
.unbind( ".menubar" )
.removeClass( "ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default" )
.removeAttr( "role" )
.removeProp( "aria-haspopup" )
.removeAttr( "aria-haspopup" )
// TODO unwrap?
.children( "span.ui-button-text" ).each(function( i, e ) {
var item = $( this );
Expand All @@ -170,8 +170,8 @@ $.widget( "ui.menubar", {
this.element.find( ":ui-menu" )
.menu( "destroy" )
.show()
.removeProp( "aria-hidden" )
.removeProp( "aria-expanded" )
.removeAttr( "aria-hidden" )
.removeAttr( "aria-expanded" )
.removeAttr( "tabindex" )
.unbind( ".menubar" );
},
Expand All @@ -182,9 +182,9 @@ $.widget( "ui.menubar", {
this.active
.menu( "closeAll" )
.hide()
.prop({
"aria-hidden": true,
"aria-expanded": false
.attr({
"aria-hidden": "true",
"aria-expanded": "false"
});
this.active
.prev()
Expand All @@ -204,9 +204,9 @@ $.widget( "ui.menubar", {
this.active
.menu( "closeAll" )
.hide()
.prop({
"aria-hidden": true,
"aria-expanded": false
.attr({
"aria-hidden": "true",
"aria-expanded": "false"
});
this.active
.prev()
Expand All @@ -221,8 +221,8 @@ $.widget( "ui.menubar", {
at: "left bottom",
of: button
})
.removeProp( "aria-hidden" )
.prop( "aria-expanded", true )
.removeAttr( "aria-hidden" )
.attr( "aria-expanded", "true" )
.menu("focus", event, menu.children( "li" ).first() )
// TODO need a comment here why both events are triggered
.focus()
Expand Down
16 changes: 8 additions & 8 deletions ui/jquery.ui.popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ $.widget( "ui.popup", {
}

this.options.trigger
.prop( "aria-haspopup", true )
.attr( "aria-haspopup", "true" )
.attr( "aria-owns", this.element.attr( "id" ) );

this.element
Expand Down Expand Up @@ -118,11 +118,11 @@ $.widget( "ui.popup", {
this.element
.show()
.removeClass( "ui-popup" )
.removeProp( "aria-hidden" )
.removeProp( "aria-expanded" );
.removeAttr( "aria-hidden" )
.removeAttr( "aria-expanded" );

this.options.trigger
.removeProp( "aria-haspopup" )
.removeAttr( "aria-haspopup" )
.removeAttr( "aria-owns" );

if ( this.generatedId ) {
Expand All @@ -140,8 +140,8 @@ $.widget( "ui.popup", {

this.element
.show()
.prop( "aria-hidden", false )
.prop( "aria-expanded", true )
.attr( "aria-hidden", "false" )
.attr( "aria-expanded", "true" )
.position( position )
// TODO find a focussable child, otherwise put focus on element, add tabIndex=0 if not focussable
.focus();
Expand All @@ -160,8 +160,8 @@ $.widget( "ui.popup", {
close: function( event ) {
this.element
.hide()
.prop( "aria-hidden", true )
.prop( "aria-expanded", false );
.attr( "aria-hidden", "true" )
.attr( "aria-expanded", "false" );

this.options.trigger.attr("tabindex", 0);

Expand Down
Loading

0 comments on commit 0080f2d

Please sign in to comment.