Made the progressbars more accessible by adding @ROLE="progressbar", …

…@aria-valuemin="0", @aria-valuemax="100" in the example, and dynamically updating @aria-valuenow and @aria-valuetext from jquery.fileupload-ui.js.

index.html

@@ -94,7 +94,7 @@ <h1>jQuery File Upload Demo</h1>
             <!-- The global progress information -->
             <div class="span5 fileupload-progress fade">
                 <!-- The global progress bar -->
-                <div class="progress progress-success progress-striped active">
+                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                     <div class="bar" style="width:0%;"></div>
                 </div>
                 <!-- The extended global progress information -->
@@ -105,7 +105,7 @@ <h1>jQuery File Upload Demo</h1>
         <div class="fileupload-loading"></div>
         <br>
         <!-- The table listing the files available for upload/download -->
-        <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
+        <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
     </form>
     <br>
     <div class="well">
@@ -157,7 +157,7 @@ <h3 class="modal-title"></h3>
             <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
         {% } else if (o.files.valid && !i) { %}
             <td>
-                <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
+                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0%"><div class="bar" style="width:0%;"></div></div>
             </td>
             <td class="start">{% if (!o.options.autoUpload) { %}
                 <button class="btn btn-primary">

js/jquery.fileupload-ui.js

@@ -124,13 +124,20 @@
                     // Iframe Transport does not support progress events.
                     // In lack of an indeterminate progress bar, we set
                     // the progress to 100%, showing the full animated bar:
+                	var progress = parseInt(100, 10);
                     data.context
                         .find('.progress').addClass(
                             !$.support.transition && 'progress-animated'
                         )
                         .find('.bar').css(
                             'width',
-                            parseInt(100, 10) + '%'
+                            progress + '%'
+                        ).parent().attr(
+                        	'aria-valuenow',
+                        	progress
+                        ).attr(
+                        	'aria-valuetext',
+                        	progress + '%'
                         );
                 }
                 return that._trigger('sent', e, data);
@@ -227,19 +234,33 @@
             // Callback for upload progress events:
             progress: function (e, data) {
                 if (data.context) {
+                	var progress = parseInt(data.loaded / data.total * 100, 10);
                     data.context.find('.bar').css(
                         'width',
-                        parseInt(data.loaded / data.total * 100, 10) + '%'
+                        progress + '%'
+                    ).parent().attr(
+                    	'aria-valuenow',
+                    	progress
+                    ).attr(
+                    	'aria-valuetext',
+                    	progress + '%'
                     );
                 }
             },
             // Callback for global upload progress events:
             progressall: function (e, data) {
                 var $this = $(this);
+                var progress = parseInt(data.loaded / data.total * 100, 10);
                 $this.find('.fileupload-progress')
                     .find('.bar').css(
                         'width',
-                        parseInt(data.loaded / data.total * 100, 10) + '%'
+                        progress + '%'
+                    ).parent().attr(
+                    	'aria-valuenow',
+                    	progress
+                    ).attr(
+                    	'aria-valuetext',
+                    	progress + '%'
                     ).end()
                     .find('.progress-extended').each(function () {
                         $(this).html(
@@ -262,7 +283,7 @@
                 var that = $(this).data('fileupload');
                 that._transition($(this).find('.fileupload-progress')).done(
                     function () {
-                        $(this).find('.bar').css('width', '0%');
+                        $(this).find('.bar').css('width', '0%').parent().attr('aria-valuenow', '0').attr('aria-valuetext', '0%');
                         $(this).find('.progress-extended').html(' ');
                         that._trigger('stopped', e);
                     }