Logically moves the various role
and aria-
attributes to the .progress
element itself, leaving the .progress-bar
to be used purely for the visual presentation. This fixes the problem documented in #36736 (closed) that in certain browser/AT combinations (NVDA, VoiceOver), zero-value/zero-width progress bars are completely ignored and not announced.
For multiple/stacked progress bars, this PR introduces a new wrapper and class .progress-stacked
, to accommodate for the fact that with the more logical structure above, we need full .progress
elements with child .progress-bar
elements, and can't get away with the fudge we had before of having a single .progress
with multiple .progress-bar
s.
Note that the old markup structures still work with this change, so this could be considered a non-breaking change - though one we definitely want to highlight as it's more accessible (as it now guarantees that zero-value/zero-width progress bars, whether on their own or as part of a multi/stacked bar, are actually announced)
Closes #36736 (closed)