Docs: improve progress bar labels markup and explanations for accessibility (#39364)

* Docs: improve progress bar labels markup and explanations for accessibility

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

---------

Co-authored-by: Mark Otto <markd.otto@gmail.com>

diff --git a/site/content/docs/5.3/components/progress.md b/site/content/docs/5.3/components/progress.md
index 73f1315897638031fce6de35f76f0250f8cc918a..caa5d09fddfbb01ccb14f130b7d6f80cbb777655 100644 (file)
--- a/site/content/docs/5.3/components/progress.md
+++ b/site/content/docs/5.3/components/progress.md
@@ -75,13 +75,15 @@ Add labels to your progress bars by placing text within the `.progress-bar`.
 </div>
 {{< /example >}}
 
-Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]({{< docsref "/utilities/overflow" >}}), but make sure to also define an explicit [text color]({{< docsref "/utilities/colors#colors" >}}) so the text remains readable. Be aware though that currently this approach does not take into account [color modes]({{< docsref "/customize/color-modes" >}}).
+### Long labels
 
-{{< example >}}
-<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-  <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
-</div>
-{{< /example >}}
+Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]({{< docsref "/utilities/overflow" >}}).
+
+{{< callout warning >}}
+Labels longer than the progress bar within may not be fully accessible using this method because it relies on the text color having the correct contrast ratio with both the `.progress` and `.progress-bar` background colors. Use caution when implementing this example.
+
+If the text can overlap the progress bar, we often recommend displaying the label outside of the progress bar for better accessibility.
+{{< /callout >}}
 
 ## Backgrounds
 
@@ -106,28 +108,20 @@ Use background utility classes to change the appearance of individual progress b
 {{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
 
-If you're adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]({{< docsref "/utilities/colors#colors" >}}), so the labels remain readable and have sufficient contrast.
+If you're adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]({{< docsref "/utilities/colors#colors" >}}), so the labels remain readable and have sufficient contrast. We recommend using the [color and background]({{< docsref "/helpers/color-background" >}}) helper classes.
 
 {{< example >}}
 <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
-  <div class="progress-bar bg-success" style="width: 25%">25%</div>
+  <div class="progress-bar text-bg-success" style="width: 25%">25%</div>
 </div>
 <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
-  <div class="progress-bar bg-info text-dark" style="width: 50%">50%</div>
+  <div class="progress-bar text-bg-info" style="width: 50%">50%</div>
 </div>
 <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-  <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
+  <div class="progress-bar text-bg-warning" style="width: 75%">75%</div>
 </div>
 <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-  <div class="progress-bar bg-danger" style="width: 100%">100%</div>
-</div>
-{{< /example >}}
-
-Alternatively, you can use the new combined [color and background]({{< docsref "/helpers/color-background" >}}) helper classes.
-
-{{< example >}}
-<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-  <div class="progress-bar text-bg-warning" style="width: 75%">75%</div>
+  <div class="progress-bar text-bg-danger" style="width: 100%">100%</div>
 </div>
 {{< /example >}}