diff options
| author | Louis-Maxime Piton <[email protected]> | 2023-02-14 03:38:21 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2023-02-13 18:38:21 -0800 |
| commit | 7bffd6ea8d073f1c8fa2209ef2864227f7c5f213 (patch) | |
| tree | 037198b74098604c6c39de96ae37c8681ffc316a | |
| parent | 70bad9b1b6a39a405b77a2d062b5e313a8219d6d (diff) | |
| download | bootstrap-7bffd6ea8d073f1c8fa2209ef2864227f7c5f213.tar.xz bootstrap-7bffd6ea8d073f1c8fa2209ef2864227f7c5f213.zip | |
Docs: Progress fix + proposal (#38014)
* Fix + proposal
* fix(review)
---------
Co-authored-by: Patrick H. Lauke <[email protected]>
| -rw-r--r-- | site/content/docs/5.3/components/progress.md | 4 |
1 files changed, 2 insertions, 2 deletions
diff --git a/site/content/docs/5.3/components/progress.md b/site/content/docs/5.3/components/progress.md index ea9e3d2d2..73f131589 100644 --- a/site/content/docs/5.3/components/progress.md +++ b/site/content/docs/5.3/components/progress.md @@ -15,7 +15,7 @@ toc: true 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. - We use the `.progress` as a wrapper to indicate the max value of the progress bar. -- 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). +- 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). - We use the inner `.progress-bar` purely for the visual bar and label. - The `.progress-bar` requires an inline style, utility class, or custom CSS to set its width. - 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 You only set a `height` value on the `.progress` container, so if you change that value, the inner `.progress-bar` will automatically resize accordingly. {{< example >}} -<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px"> +<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px"> <div class="progress-bar" style="width: 25%"></div> </div> <div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px"> |