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);

View File

@ -22,8 +22,14 @@ $.widget("ui.progressbar", {
id = ((new Date()).getTime() + Math.random()),
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, {
active: false,
pixelState: 0,
@ -97,11 +103,13 @@ $.widget("ui.progressbar", {
disable: function() {
this.element.addClass("ui-progressbar-disabled");
this.disabled = true;
this.element.ariaState("disabled", true);
},
enable: function() {
this.element.removeClass("ui-progressbar-disabled");
this.disabled = false;
this.element.ariaState("disabled", false);
},
pause: function() {
@ -120,9 +128,11 @@ $.widget("ui.progressbar", {
this.bar.width(this.pixelState);
this.textElement.width(this.pixelState);
var percent = Math.round(this.percentState);
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());
},