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