Ticket #3482: progress-aria.3.diff

tests/progressbar.js

@@ -52 +52 @@
 
 });
 
+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);

ui/ui.progressbar.js

@@ -23 +23 @@
                         text = options.text || '0%';
                 
                 this.element.addClass("ui-progressbar").width(options.width);
-                
+                this.element.ariaRole("progressbar");
+                this.element.ariaState("valuemin","0");
+                this.element.ariaState("valuemax","100");
+                this.element.ariaState("valuenow","0");
                 $.extend(this, {
                         active: false,
                         pixelState: 0,
@@ -97 +100 @@
         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 +125 @@
                 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());
         },