diff --git a/Readme.md b/Readme.md
index 2ddda6e..b966ed1 100644
--- a/Readme.md
+++ b/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({
diff --git a/nprogress.js b/nprogress.js
index cdb5f4b..4347588 100644
--- a/nprogress.js
+++ b/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: '
'
+ template: ''
};
/**
@@ -71,6 +71,8 @@
speed = Settings.speed,
ease = Settings.easing;
+ bar.setAttribute('aria-valuenow', n);
+
progress.offsetWidth; /* Repaint */
queue(function(next) {
diff --git a/test/test.js b/test/test.js
index a381b09..afc1e06 100644
--- a/test/test.js
+++ b/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);