Fix invalid ARIA roles

Readme.md

@@ -132,8 +132,8 @@ NProgress.configure({ minimum: 0.1 });
 
 #### `template`
 You can change the markup using `template`. To keep the progress
-bar working, keep an element with `role='bar'` in there. See the [default template]
-for reference.
+bar working, keep an element that matches `barSelector` in there. See the
+[default template] for reference.
 
 ~~~ js
 NProgress.configure({

nprogress.js

@@ -24,10 +24,10 @@
     trickle: true,
     trickleSpeed: 200,
     showSpinner: true,
-    barSelector: '[role="bar"]',
-    spinnerSelector: '[role="spinner"]',
+    barSelector: '.bar',
+    spinnerSelector: '.spinner',
     parent: 'body',
-    template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
+    template: '<div class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0"><div class="peg"></div></div><div class="spinner" role="presentation"><div class="spinner-icon"></div></div>'
   };
 
   /**
@@ -71,6 +71,8 @@
         speed    = Settings.speed,
         ease     = Settings.easing;
 
+    bar.setAttribute('aria-valuenow', n);
+
     progress.offsetWidth; /* Repaint */
 
     queue(function(next) {

test/test.js

@@ -35,6 +35,23 @@
         done();
       });
 
+      it('must use valid ARIA roles', function() {
+        NProgress.set(0.4);
+
+        assert.equal($("#nprogress .bar").attr('role'), 'progressbar');
+        assert.equal($("#nprogress .bar").attr('aria-valuemin'), '0');
+        assert.equal($("#nprogress .bar").attr('aria-valuemax'), '1');
+        assert.equal($("#nprogress .bar").attr('aria-valuenow'), '0.4');
+        assert.equal($("#nprogress .spinner").attr('role'), 'presentation');
+      });
+
+      it('must update aria-valuenow when progress changes', function() {
+        NProgress.set(0.2);
+        NProgress.set(0.5);
+
+        assert.equal($("#nprogress .bar").attr('aria-valuenow'), '0.5');
+      });
+
       it('.set(1) should appear and disappear', function(done) {
         NProgress.configure({ speed: 10 });
         NProgress.set(0).set(1);