Zero-width/zero-value progress bars not announced consistently by browser/assistive technology combinations
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
Due to screen reader heuristics (see https://github.com/nvaccess/nvda/issues/13897#issuecomment-1184117527) the zero width/zero value progress bar is not being announced consistently. https://getbootstrap.com/docs/5.2/components/progress/#how-it-works
Browser/AT combinations that do announce the zero-width progress bar:
- Chrome+JAWS
- Firefox+JAWS
- Safari+VoiceOver/macOS
- Chrome+VoiceOver/macOS
- Firefox+VoiceOver/macOS (though it's broken in other ways in general, not announcing value)
- Chrome+Talkback/Android
Browser/AT combinations that don't announce the zero-width progress bar:
- Chrome+NVDA
- Firefox+NVDA
- Safari+VoiceOver/iOS
Video recording of the Chrome+NVDA - note how the first progress bar is completely skipped
https://user-images.githubusercontent.com/895831/178932541-2f67584f-8e22-42ec-938d-a104e6565960.mp4
Will need some exploration, but to work around the issue of "not rendered" (zero width) elements being ignored by some of the AT heuristics, it may be necessary to shift the various aria-
attributes to the container element, rather than the element that acts as the visual bar itself.
i.e. changing
<div class="progress">
<div class="progress-bar" role="progressbar" aria-label="..." aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
to
<div class="progress" role="progressbar" aria-label="..." aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar"></div>
</div>
or even something using a generated pseudo-element to be the "actual" visual bar.
obviously the approach of loading all aria-
into the parent won't work for the current multi-bar thing https://getbootstrap.com/docs/5.2/components/progress/#multiple-bars ... so perhaps the pseudo-element way is the way to go...
Reduced test cases
https://getbootstrap.com/docs/5.2/components/progress/#how-it-works
What operating system(s) are you seeing the problem on?
Windows, macOS, Android, iOS
What browser(s) are you seeing the problem on?
No response
What version of Bootstrap are you using?
5.2