Docs: Progress fix + proposal (#38014)

* Fix + proposal

* fix(review)

---------

Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>

diff --git a/site/content/docs/5.3/components/progress.md b/site/content/docs/5.3/components/progress.md
index ea9e3d2d2779bcfed2a4e55dfcccef961e48bd49..73f1315897638031fce6de35f76f0250f8cc918a 100644 (file)
--- 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">