You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* 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 <julien.deramond@orange.com>
* 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 <julien.deramond@orange.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Copy file name to clipboardexpand all lines: site/content/docs/5.2/components/progress.md
+67-52
Original file line number
Diff line number
Diff line change
@@ -6,63 +6,72 @@ group: components
6
6
toc: true
7
7
---
8
8
9
+
{{< callout info >}}
10
+
**New markup in v5.3.0 —** We've deprecated the previous HTML structure for progress bars and replaced it with a more accessible one. The previous structure will continue to work until v6. [See what's changed in our migration guide.]({{< docsref "/migration#improved-markup-for-progress-bars" >}})
11
+
{{< /callout >}}
12
+
9
13
## How it works
10
14
11
15
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them.
12
16
13
17
- We use the `.progress` as a wrapper to indicate the max value of the progress bar.
14
-
- We use the inner `.progress-bar` to indicate the progress so far.
15
-
- The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width.
16
-
- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar).
18
+
- The `.progress` wrapper also requires a `role="progress"` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar).
19
+
- We use the inner `.progress-bar` purely for the visual bar and label.
20
+
- The `.progress-bar` requires an inline style, utility class, or custom CSS to set its width.
21
+
- We provide a special `.progress-stacked` class to create multiple/stacked progress bars.
17
22
18
23
Put that all together, and you have the following examples.
Bootstrap provides a handful of [utilities for setting width]({{< docsref "/utilities/sizing" >}}). Depending on your needs, these may help with quickly configuring progress.
43
+
## Bar sizing
44
+
45
+
### Width
46
+
47
+
Bootstrap provides a handful of [utilities for setting width]({{< docsref "/utilities/sizing" >}}). Depending on your needs, these may help with quickly configuring the width of the `.progress-bar`.
Add labels to your progress bars by placing text within the `.progress-bar`.
57
+
You only set a `height` value on the `.progress` container, so if you change that value, the inner `.progress-bar` will automatically resize accordingly.
49
58
50
59
{{< example >}}
51
-
<divclass="progress">
52
-
<divclass="progress-bar"role="progressbar"aria-label="Example with label"style="width: 25%;"aria-valuenow="25"aria-valuemin="0"aria-valuemax="100">25%</div>
<divclass="progress-bar"role="progressbar"aria-label="Example 20px high"style="width: 25%;"aria-valuenow="25"aria-valuemin="0"aria-valuemax="100"></div>
73
+
<divclass="progress"role="progressbar"aria-label="Example with label"aria-valuenow="25"aria-valuemin="0"aria-valuemax="100">
@@ -91,13 +100,19 @@ Use background utility classes to change the appearance of individual progress b
91
100
92
101
## Multiple bars
93
102
94
-
Include multiple progress bars in a progress component if you need.
103
+
You can include multiple progress components inside a container with `.progress-stacked` to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar *must* be applied to the `.progress` elements, rather than the `.progress-bar`s.
0 commit comments