added ARIA semantics, and tests.

patch review:scott.gonzalez@gmail.com
(fixes bug #3482)
This commit is contained in:
David Bolter 2008-10-29 16:57:04 +00:00
parent 95980d34da
commit b0772dc3d8
2 changed files with 28 additions and 3 deletions

View File

@ -52,5 +52,20 @@ test("set defaults on init", function() {
}); });
test("accessibility", function() {
expect(7);
el = $("#progressbar").progressbar();
equals(el.ariaRole(), "progressbar", "aria role");
equals(el.ariaState("valuemin"), 0, "aria-valuemin");
equals(el.ariaState("valuemax"), 100, "aria-valuemax");
equals(el.ariaState("valuenow"), 0, "aria-valuenow initially");
el.progressbar("progress", 77);
equals(el.ariaState("valuenow"), 77, "aria-valuenow");
el.progressbar("disable");
equals(el.ariaState("disabled"), "true", "aria-disabled");
el.progressbar("enable");
equals(el.ariaState("disabled"), "false", "enabled");
});
})(jQuery); })(jQuery);

View File

@ -22,7 +22,13 @@ $.widget("ui.progressbar", {
id = ((new Date()).getTime() + Math.random()), id = ((new Date()).getTime() + Math.random()),
text = options.text || '0%'; text = options.text || '0%';
this.element.addClass("ui-progressbar").width(options.width); this.element
.addClass("ui-progressbar")
.width(options.width)
.ariaRole("progressbar")
.ariaState("valuemin","0")
.ariaState("valuemax","100")
.ariaState("valuenow","0");
$.extend(this, { $.extend(this, {
active: false, active: false,
@ -97,11 +103,13 @@ $.widget("ui.progressbar", {
disable: function() { disable: function() {
this.element.addClass("ui-progressbar-disabled"); this.element.addClass("ui-progressbar-disabled");
this.disabled = true; this.disabled = true;
this.element.ariaState("disabled", true);
}, },
enable: function() { enable: function() {
this.element.removeClass("ui-progressbar-disabled"); this.element.removeClass("ui-progressbar-disabled");
this.disabled = false; this.disabled = false;
this.element.ariaState("disabled", false);
}, },
pause: function() { pause: function() {
@ -120,9 +128,11 @@ $.widget("ui.progressbar", {
this.bar.width(this.pixelState); this.bar.width(this.pixelState);
this.textElement.width(this.pixelState); this.textElement.width(this.pixelState);
var percent = Math.round(this.percentState);
if (this.options.range && !this.options.text) { if (this.options.range && !this.options.text) {
this.textElement.html(Math.round(this.percentState) + '%'); this.textElement.html(percent + '%');
} }
this.element.ariaState("valuenow", percent);
this._propagate('progress', this.ui()); this._propagate('progress', this.ui());
}, },