Progress Bar Examples have accessibility issues

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

The provided examples at: https://getbootstrap.com/docs/5.2/components/progress/ have accessibility issues reported by both Google Lighthouse and Webhint.io

I think that the progress bar should have a non-empty aria-label attribute or a title.

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

Let me know what you think, I’d be happy to open a PR…

(I realise this might be flagged as an accessibility issue incorrectly and maybe the aria-valuenow, aria-valuemax and aria-valuetext attributes are enough? cc @patrickhlauke )

Reduced test cases

Webhint screenshot:

Lighthouse screenshot:

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Microsoft Edge

What version of Bootstrap are you using?

v5.2.0-beta1

[patrickhlauke]

ditto…i think i’m just going to go with something generic like “example” or similar. and something a bit more creative for the stacked bars example

[patrickhlauke]

@coliff already started making a PR, so no worries 😃