Uses invalid ARIA roles

[aardrian]

The animated line has this construct:

<div class="bar" role="bar" style="[…]">[…]</div>

The spinner has this construct:

<div class="spinner" role="spinner">[…]</div>

There is no ARIA role bar and no role spinner. An automated accessibility checker would have picked this up. You can see a full list of roles at the ARIA 1.1 spec. As it stands now, this constitutes a WCAG failure.

I suggest rebuilding this to expose correct roles, states, and properties so the browser accessibility APIs can convey the progress bar to assistive technology users.

[aardrian]

I performed a poor search. I see this is a duplicate of this 2017 issue:
Invalid ARIA roles #180

It looks like this has been forked and made accessible (per the claim; did not test):
https://github.com/nmackey/accessible-nprogress

[CamBurris]

For anyone who doesn't want to use a fork, you can fix this issue by using Nprogress.configure(). You need to update the template with a custom one without the invalid aria roles. You will also need to update barSelector and spinnerSelector as they try to select via the role by default. Here is what I used:

NProgress.configure({
  barSelector: '.bar',
  spinnerSelector: '.spinner',
  template:
    '<div class="bar"><div class="peg"></div></div><div class="spinner"><div class="spinner-icon"></div></div>',
});