ARIA progressbar nodes must have an accessible name

[Klarence]

Issue

When running Deque's aXe DevTools I receive the error:

ARIA progressbar nodes must have an accessible name

Fix at least one (1) of these issues:

• aria-label attribute does not exist or is empty
• aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
• Element has no title attribute

https://dequeuniversity.com/rules/axe/4.4/aria-progressbar-name?application=AxeChrome

Solution

Please provide an @inputfor at least one of the following:

1. aria-label
2. aria-labelledby
3. title

Due to the accessibility issues with the title attribute for mobile and keyboard users. A strong preference for aria-label and aria-labeledby.

[crisbeto]

It would be difficult to set an aria-label or aria-labelledby automatically from inside the library since it can't know what context the component is used in. You can set the aria-label on the round-progress element yourself.