Skip to content

Commit 7bffd6e

Browse files
Docs: Progress fix + proposal (#38014)
* Fix + proposal * fix(review) --------- Co-authored-by: Patrick H. Lauke <[email protected]>
1 parent 70bad9b commit 7bffd6e

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

site/content/docs/5.3/components/progress.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ toc: true
1515
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.
1616

1717
- We use the `.progress` as a wrapper to indicate the max value of the progress bar.
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).
18+
- The `.progress` wrapper also requires a `role="progressbar"` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar).
1919
- We use the inner `.progress-bar` purely for the visual bar and label.
2020
- The `.progress-bar` requires an inline style, utility class, or custom CSS to set its width.
2121
- We provide a special `.progress-stacked` class to create multiple/stacked progress bars.
@@ -57,7 +57,7 @@ Bootstrap provides a handful of [utilities for setting width]({{< docsref "/util
5757
You only set a `height` value on the `.progress` container, so if you change that value, the inner `.progress-bar` will automatically resize accordingly.
5858

5959
{{< example >}}
60-
<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
60+
<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
6161
<div class="progress-bar" style="width: 25%"></div>
6262
</div>
6363
<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">

0 commit comments

Comments
 (0)