From 26a3ef1bcb147d3a3b79610f674298e6fdfb11fe Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 29 Nov 2022 07:07:48 +0000 Subject: Rework progress bar markup and styles (#36831) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Rework progress bar markup and styles 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 #36736 that in certain browser/AT combinations, 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) * Add a note about progress bar change in migration guide * Add notes with old markup examples and explanation * Fix bundlewatch * Update site/content/docs/5.2/components/progress.md Co-authored-by: Julien Déramond * Reintroduce deleted styles Turns out they're needed for correct positioning of text inside progress bar * Move changes in markup to Migrationg guide, link to that from top of progress page, rewrite some content * Fix typo in callout * Clarify "Sizing" section * Remove redundant "now" Co-authored-by: Julien Déramond Co-authored-by: Julien Déramond Co-authored-by: Mark Otto Co-authored-by: Mark Otto --- scss/_progress.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'scss/_progress.scss') diff --git a/scss/_progress.scss b/scss/_progress.scss index 1bfafb58f..148c3815e 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -8,7 +8,8 @@ } // scss-docs-end progress-keyframes -.progress { +.progress, +.progress-stacked { // scss-docs-start progress-css-vars --#{$prefix}progress-height: #{$progress-height}; @include rfs($progress-font-size, --#{$prefix}progress-font-size); @@ -46,6 +47,14 @@ background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height); } +.progress-stacked > .progress { + overflow: visible; +} + +.progress-stacked > .progress > .progress-bar { + width: 100%; +} + @if $enable-transitions { .progress-bar-animated { animation: $progress-bar-animation-timing progress-bar-stripes; -- cgit v1.2.3